Next.js v13の新機能を見てみる会

2024/6/10 5:322024/6/10 5:32

Next.js 13 introduces layouts, React Server Components, and streaming in the app directory, as well as Turbopack, an improved image component, and the brand new font component.

https://nextjs.org/blog/next-13

これを読んでキャッチアップしましょう👶

関連

Rendering: Server and Client Components | Next.js

We recommend reading the Rendering Fundamentals page before continuing. Server and Client Components allow developers to build applications that span the server and client, combining the rich interactivity of client-side apps with the improved performance of traditional server rendering. This page will go through the differences between Server and Client Components and how to use them in your Next.js application.

https://beta.nextjs.org/docs/rendering/server-and-client-components

雑な翻訳

Next.js 13 和訳

雑に翻訳しました。意訳がめちゃくちゃ含まれているので注意です。 app/ Directory (beta): より簡単に、より速く、クライアント側JSのサイズをより小さく。 Layouts React Server Components Streaming Turbopack (alpha): Rustで実装したWebpackの代替バンドラーで最大700倍高速化。 New next/image (stable): ネイティブブラウザの遅延ロードを利用し、より高速に。 New @next/font (beta): レイアウトシフトをゼロにする自動セルフホストフォント。 Improved next/link: APIを簡素化し、タグを自動的に表示するようにしました。次のコマンドを利用して更新出来ます。 npm i next@latest react@latest react-dom@latest eslint-config-next@latest Next.jsで最も愛されている機能のひとつに、ファイルシステムベースのルーターがあります。フォルダ内にファイルを配置すると、アプリケーション内に即座にルートを作成することができます。設定は不要です。本日、Next.jsのルーティングとレイアウトを改善し、 app/ディレクトリ (beta)を導入しました。これは、以前に公開した Layouts RFCに対するコミュニティからのフィードバックを反映しています。これには、以下のサポートが含まれます。 Layouts: 状態を維持したままUIを簡単に共有し、再レンダリングを回避することができます。 Server Components: 動的なアプリケーションのためにサーバーファーストをデフォルトにする。 Streaming: ロード状態を瞬時に表示し、アップデートをストリームで表示します。 Suspense for Data Fetching: 新しいusehookは、コンポーネントレベルのフェッチを可能にします。 app/ディレクトリは、既存の pagesディレクトリと共存して、段階的に採用することができます。Next.js 13へのアップグレードでは app/ ディレクトリを使う必要はありませんが、より小さなJavaScriptを配信しながら複雑なインターフェイスを構築するための基盤を構築する事が出来ます。 app/ディレクトリは、既存のpages/ディレクトリから段階的に採用することができます。 app/ディレクトリを使用すると、ナビゲーションをまたいで状態を維持し、高価な再レンダリングを回避し、高度なルーティングパターンを可能にする複雑なインターフェースを簡単に作成することができます。さらに、コンポーネント、テスト、スタイルなど、アプリケーションのコードをルーティングと一緒に配置することもできます。 app/内にルートを作成するには、 page.js という1つのファイルが必要です。また、ファイルシステムを通じてレイアウトを定義することができるようになりました。レイアウトは、複数のページ間で UI を共有します。ナビゲーション時に、レイアウトは状態を保持し、インタラクティブな状態を維持し、再レンダリングは行いません。レイアウトとページについて詳しくはこちら、サンプルのデプロイはこちらで試せます。 app/ ディレクトリは、Reactの新しいServer Componentsアーキテクチャのサポートを導入しています。Server Componentsは、サーバとクライアントでそれぞれ得意な用途に使い分ける事で、高速で高度にインタラクティブなアプリを単一のプログラミングモデルで構築でき、素晴らしい開発体験を提供します。また、Server Componentsを使用することで、クライアントに送信されるJavaScriptの量を減らし、最初のページロードを高速化することができます。ルートが読み込まれると、キャッシュ可能でサイズも予測可能なNext.jsとReactのランタイムが読み込まれます。このランタイムは、アプリケーションが大きくなってもサイズが大きくなることはありません。さらに、ランタイムは非同期にロードされるので、サーバーにあるHTMLをクライアントで徐々に拡張していくことができます。サーバーコンポーネントについて詳しくはこちら、サンプルのデプロイはこちらで試せます。 app/ ...

https://zenn.dev/karibash/articles/eaba1b51fc757e