Next.js13の新機能
next.jsを最近学び始めたので、next.js13の機能も調べてみた。
新機能および変更
- ・appディレクトリ (ベータ版)
- レイアウト
- React サーバー コンポーネント
- ストリーミング
- ・Turbopack (アルファ版):最大 700 倍高速な Rust ベースの Webpack の置き換え。
- ・next/image:ネイティブ ブラウザの遅延読み込みで高速化。
- ・@next/font(ベータ版):レイアウト シフトがゼロの自動自己ホスト フォント。
- ・next/link: API を自動で簡素化。
app ディレクトリ
ディレクトリによってルーティングを行う機能（ベータ）
各ディレクトリに設置されたpageファイルが自動的に読み込まれます。
オプションなので明示的に設定を変更する必要があります。
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
experimental: {
appDir: true, //appDirを追加してtrueにする
},
};
module.exports = nextConfig;
Layouts - レイアウト
ディレクトリ単位で設定したレイアウトファイルをネストすることができます。
Reactサーバーコンポーネント （RSC）
appディレクトリの場合、作成したファイルはデフォルトでServer Componentでフェッチの処理を記述するとサーバーサイドで処理が行われます。
Reactサーバーコンポーネントではサーバとクライアントが連携してRactアプリケーションのレンダリングを行うことによって、一部のコンポーネントがサーバでレンダリングされ、他のコンポーネントがブラウザ（クライアント）によってレンダリングすることを可能にしています。
ストリーミング
サーバーコンポーネントとNext.jsのネストされたレイアウトを仕様し、データを必要としないページ部分を即座にレンダリングし、データを取得しているページの部分の読み込み状態を表示できます。これによりページ全体が読み込まれるのを待たずに操作を開始できます。
Turbopack
従来のWebpackから、RustベースのTurbopackが含まれています。
- Webpackよりも700倍高速な更新
- Viteよりも10倍高速な更新
- Webpackよりも4倍高速なコールドスタート
next/image
- クライアント側のJavaScriptの出荷を減らす
- スタイルと設定がより簡単に
- altデフォルトでタグを必要とし、よりアクセスしやすい。
- Webプラットフォームと連携
- ネイティブの遅延読み込みはハイドレーションを必要としないため高速
※ハイドレーション:HTMLに付随したJavaScriptを利用してイベントリスナを登録することでインタラクティブなページを生成する過程のことをいいます。
@next/font
- カスタムフォントを含むフォントを自動的に最適化します。
- プライバシーとパフォーマンスを向上させるための外部ネットワーク要求を削除します。
- 任意のフォントファイルのビルドイン自動セルフホスティング
- CSSの size-adjustプロパティを使用してレイアウトシフトを自動的にゼロにします。
ビルド時にダウンロードされ静的にアセットとともにホスティングされ、ブラウザからGoogleにリクエストを送信しません。
next/link
- <link>タグに<a>タグを記述しなくてもよくなりました。
import Link from 'next/link'
// Next.js 12: `<a>` タグが必要
<Link href="/about">
<a>About</a>
</Link>
// Next.js 13: `<Link>` always renders `<a>`
<Link href="/about">
About
</Link>
その他
- Open Graph Protocol を介してソーシャル メディア画像の生成を最適化する
- Internet Explorerのサポート外
終わりに
まだ、next.jsの勉強中ですが、アップデートだけを調べても勉強になりました。
・RSCの解説で参考にしたサイト
https://postd.cc/how-react-server-components-work/#01
・ハイドレーションについて参考にしたサイト
https://nishinatoshiharu.com/next-hydration-warning-resolution/#Hydration