すでにNext.jsを使用している場合は、最近Next.js 13向けに多くの優れた機能が発表されたことをご存知でしょう。
Next.js 13以降から魅力的な新機能が大量に追加され、Reactのサーバー側レンダリングと、それがインタラクティブなクライアント側コンポーネントと接続する方法がより魅力的で一貫したものになります。
この記事では、最新のNext.js 13以降のいくつかの新機能を詳しく掘り下げて、アップグレードによる主な変更点を初心者に詳しく解説していきます。
Next.js 13はまだ実験版であるため、運用アプリ（本番環境）での使用は推奨しません。
コミュニティは現在も開発と改善に取り組んでいます。
Next.js 13が安定リリースされると、Next.js開発者向けのチュートリアルコースも完全にアップデートされ、最新のNext.js 13の特典がすべて含まれるようになります。
Next.js v13
Next.jsは、2,400人以上の個々の開発者、GoogleやMetaのような業界パートナー、そして私たちのコアチームの共同作業の結果です。週に300万以上のnpmのダウンロード数と94,000以上のGitHubのスターを誇るNext.jsは、Webを構築するための最も人気のある手段の一つです。引用元：Next.js 13 | Community
Next.js 13アプリを作成するためには、コンピューターにNode.js 14.6.0以降がインストールされている必要があります。
Next.js 13以降ではReactの最小バージョンは17.0.2から18.2.0に変更されました。
12.x.xがサポート終了になったため、Node.jsの最小バージョンは12.22.0から14.6.0に変更となります。
以下のいずれかのコマンドを実行してNext.js 13をインストールします。
npx create-next-app@latest my-next-app
yarn create next-app my-next-app
npm create next-app my-next-app
新しいappフォルダを除いては、生成されるファイルとフォルダは以前のバージョンとほぼ同じです。
静的エクスポートの変更
Next.js 13.3以降では、静的エクスポートの構成オプションが変更されました。
以前は、next.config.jsファイルでtarget: 'static'を設定することで静的エクスポートを有効にしていましたが、新しいバージョンではoutputプロパティを使用します。
// next.config.js /** * @type {import('next').NextConfig} */ const nextConfig = { output: 'export', }; module.exports = nextConfig;
上記のコードでは、nextConfigという変数にNext.jsの構成オプションを定義しています。
outputプロパティは、エクスポートされる静的ファイルの出力ディレクトリを指定します。上記の例では、'export'という値が設定されているため、静的ファイルは/exportディレクトリに出力されます。
このnextConfigオブジェクトをmodule.exportsでエクスポートすることで、Next.jsアプリケーションでこの構成を使用できます。
上記の設定コードでは、nextConfig変数の型アノテーションが含まれており、TypeScriptを使用していることを前提としています。
もしTypeScriptを使用していない場合は、型アノテーションを削除して以下のように書いてください。
// next.config.js const nextConfig = { output: 'export', }; module.exports = nextConfig;
この設定により、TSを使用しない静的ファイルは/exportディレクトリに出力されます。
なお、このコードを使用する前に、Next.jsのバージョンが13.3以上であることを確認してください。また、他の構成オプションが必要な場合は、nextConfigオブジェクトに追加してカスタマイズすることができます。
また、Next.js 13.3以降の静的エクスポートの変更は、CNA（Client-side rendering, Server-side rendering, and Static Generation）の場合でもnext.config.jsファイルの変更が必要です。
以前のバージョンでは、next.config.jsファイルでtarget: 'static'を設定することで静的エクスポートが有効になっていましたが、Next.js 13.3以降ではoutputプロパティを使用します。
したがって、CNAの場合でもnext.config.jsファイルを変更してoutput: 'export'をご自身で設定する必要があります。
この設定により、静的ファイルは/exportディレクトリに出力されます。
新しいappディレクトリ
Next.js 13 | New app Directory (Beta)
Next.js 13 の注目すべき機能の1つは、まったく新しいappディレクトリ (ベータ版) です。
Next.js 13.3では、以前のバージョンと比較してアプリのディレクトリ構造が変更されました。
以前のバージョンでは、pagesディレクトリ内に作成されたファイルがUIのルートとして機能していました。
しかし、新しいバージョンでは、pagesディレクトリの隣にappディレクトリが追加され、新たな機能や変更点が導入されました。
新しいappディレクトリは、段階的な導入をサポートし、サーバーサイドレンダリング（SSR）や静的サイトレンダリング（SSG）などの他の新機能を提供します。
また、appディレクトリ内では、レイアウト、サーバーコンポーネント、ストリーミング、データフェッチなどの機能もサポートされています。
それでは、以前のNext.jsのディレクトリ構造とNext.js 13.3のディレクトリ構造を比較して解説します。
- pages/ - index.js - about.js - contact.js - components/ - Header.js - Footer.js - styles/ - main.css - ...
上記の構造では、pagesディレクトリ内に作成された各ファイルがUIのルートとして機能していました。
つまり、pages/index.jsはルートURLのメインページとして表示され、pages/about.jsは/aboutパスのページとして表示されるといった具体的な役割を持っていました。componentsディレクトリには再利用可能なコンポーネントが配置され、stylesディレクトリにはグローバルなスタイルが定義されていました。
しかし、Next.js 13.3では、新たにappディレクトリが導入されました。
新しいディレクトリ構造は以下のようになります。
- app/
- pages/
- index.js
- about.js
- contact.js
- components/
- Header.js
- Footer.js
- styles/
- main.css
- ...
appディレクトリはpagesディレクトリの隣に配置され、プロジェクトのルートディレクトリに追加される形となります。この変更により、appディレクトリはより多機能なアプリケーションの構築をサポートします。
app/pagesディレクトリ内の各ファイルは以前と同様にUIのルートとして機能します。
app/componentsディレクトリは再利用可能なコンポーネントを配置する場所であり、app/stylesディレクトリはグローバルなスタイルの定義に使用されます。
pagesディレクトリを保持し、appディレクトリと併存させることもできます。
または、appディレクトリを追加しないことも可能です。
これらを行う必要があるのは、next.config.jsに次のコードを追加してNextに使用することを伝えることです。
// next.config.js const nextConfig = { // ... experimental: { appDir: true }, }; // ...
上記のexperimental: { appDir: true }という設定は、Next.jsの実験的な機能を有効にするためのオプションです。
具体的には、appDirオプションをtrueに設定しています。
この設定により、先ほどの話で言及した新しいレイアウト機能を使うために、Next.jsはappディレクトリをプロジェクトのルートに作成します。
pagesディレクトリとappディレクトリを併存させ、pagesディレクトリは従来のNext.jsのページコンポーネントを格納するためのディレクトリであり、appディレクトリは新しいストリーミング機能を利用するためのディレクトリです。
これによって、より柔軟なルーティングとレイアウトの管理が可能になります。
ただし、この機能はまだベータ版であり、完全にオプションです。appディレクトリを使用しない場合は、この設定を省略することもできます。
この変更により、Next.jsはより柔軟性があり、より複雑なアプリケーションの開発をサポートするようになりました。
TypeScriptのバージョンアップ
Next.js 13.3では、TypeScriptのバージョンが4.4にアップグレードされました。
これにより、最新のTypeScriptの機能やパフォーマンスの向上が利用可能になります。
Next.js 13.3におけるTypeScript 4.4のアップグレードにより、以下のような具体的な機能が利用可能になります。
・ Assertion Functions（アサーション関数）:
TypeScript 4.4では、新しいアサーション関数が導入されました。
これにより、特定の型をアサート（確認）するためのカスタムな関数を定義できます。
例えば、assertNonNullというカスタムなアサーション関数を作成して、特定の変数がnullではないことを保証することができます。
・ Typed Template Strings（型付きテンプレート文字列）:
TypeScript 4.4では、テンプレート文字列に型情報を追加することができます。
テンプレート文字列内で${}を使用する際に、その中に含まれる式の型を正確に推論できます。
・ Class Property Inference from Constructors（コンストラクタからのクラスプロパティ推論）:
TypeScript 4.4では、クラスのプロパティの型推論が改善されました。
コンストラクタの引数として受け取った値を元に、クラス内のプロパティの型を推論することができます。
・ Symbol and Template String Pattern Index Signatures（シンボルとテンプレート文字列のパターンインデックスシグネチャ）:
TypeScript 4.4では、オブジェクトのインデックスシグネチャにおいて、シンボルやテンプレート文字列を使用することができます。 これにより、より柔軟なキーの型指定が可能になります。
これらは一部の具体的な機能ですが、TypeScript 4.4にはさまざまな他の改善や機能追加も含まれています。
TypeScript 4.4のアップグレードにより、開発者はより効率的で安全なコーディングを行うことができます。
Webpackアップデート
Next.js 13以降では、Webpackのバージョンが5.50にアップデートされました。
これにより、最新のWebpackの機能やパフォーマンスの向上が反映されます。
Next.js 13.3におけるWebpackのバージョンアップ（5.50）による、具体的な機能やパフォーマンスの向上反映は以下です。
・ キャッシュの改善：
新しいWebpackのバージョンでは、キャッシュの仕組みが改善されました。
ファイルの変更を検知してキャッシュを更新する仕組みが最適化され、ビルドの高速化と効率的なキャッシュ管理が可能になりました。
・ 最適化されたビルドパフォーマンス：
Webpack 5は、ビルドパフォーマンスの改善に焦点を当てています。
キャッシュの改善、並列処理の最適化、キャッシュの再利用などの機能により、ビルドの高速化が図られています。
・ モジュール解決の最適化：
Webpack 5では、モジュール解決のアルゴリズムが改善されました。
よりスマートな解決アルゴリズムにより、モジュールの依存関係の解決が効率的に行われます。
・ モジュールバンドルの最適化：
Webpack 5では、モジュールバンドルの最適化が進められました。
バンドルサイズの削減や、効率的なコード分割、ツリーシェイキングなどの機能により、アプリケーションのパフォーマンスが向上します。
これらの機能と改善により、Webpackのバージョンアップ（5.50）によって、Next.jsのビルドパフォーマンスやモジュール解決、モジュールバンドルの最適化が向上し、より効率的な開発環境が提供されるようになりました。
多言語対応の向上
Next.js 13.3では、インターナショナリゼーション（多言語対応）の機能が向上しました。
next/linkやnext/routerで使用するリンクやURLに対して、多言語パラメータを簡単に追加できるようになりました。
以下のような具体的な機能が追加されました。
・ ルートリンクの多言語サポート：
next/linkやnext/routerを使用して生成されるリンクやURLに対して、簡単に多言語パラメータを追加できるようになりました。
これにより、異なる言語のコンテンツを表示する際に、適切な言語パラメータを自動的に追加できます。
・ 動的ルートの多言語サポート：
動的なルート（Dynamic routes）に対しても、多言語パラメータを簡単に追加できるようになりました。
動的なパスセグメントに対して、異なる言語の情報を追加することができます。例えば、/products/[productId]という動的なルートであれば、/products/[productId]?lang=enといった形式で多言語パラメータを指定できます。
・ 言語切り替えの簡便化：
インターナショナリゼーションの機能により、言語切り替えのためのリンクやボタンを簡単に作成できます。
例えば、next/linkを使用して言語切り替えのリンクを作成する場合、適切な言語パラメータを含んだリンクを簡単に生成できます。
これらの機能により、Next.js 13.3ではインターナショナリゼーションの実装が簡便化され、異なる言語のコンテンツを扱う際の開発効率が向上しました。多言語対応のWebアプリケーションを作成する際に、上記の機能を活用することで、ユーザーエクスペリエンスの向上と国際的な展開の容易化が図られます。
Imageコンポーネントのアップデート
Next.js 13.3では、Imageコンポーネントのパフォーマンスと品質が向上しました。
自動生成される画像サイズが最適化され、画像の表示や読み込みのパフォーマンスが改善されました。
以前では、画像を表示するNext.jsのページやコンポーネントで、next/imageモジュールをインポートしましたが、Next.js 13以降ではnext/legacy-imageに変更して使用する必要があります。
next-image-to-legacy-image：next/legacy/imageにリネーム変更することにより、以前のNext.jsバージョンと同じ動作にすることができます。
しかし、next/legacy/imageを使用すると最新の機能（例えば、layout props）等は使用できません。
そのため、Next.jsは２つ目のコードモッドを用意しています。
next-image-experimental：このコードモッドは、next-image-experimentalを実行した後、任意で実行できます。
このコードモッドにより、最新機能を使用可能になります。しかし注意点はこのコードモッドはまだ実験的であり、動的な使用には完全に対応されていません。
Next.js 13.3におけるImageコンポーネントのアップデートによる、具体的な変更点とパフォーマンス向上は以下です。
・ 自動生成される画像サイズの最適化：
Imageコンポーネントは、画像の表示時に必要な最適なサイズの画像を自動的に生成します。
以前のバージョンでは、指定した幅と高さに基づいて画像が生成されましたが、Next.js 13.3ではより効率的なサイズの画像が生成されるように改善されました。
これにより、必要以上に大きな画像をダウンロードすることなく、適切なサイズの画像が表示されるため、ページの読み込み速度が向上します。
・ 画像の表示と読み込みのパフォーマンスの改善：
Imageコンポーネントは、画像の表示や読み込みのパフォーマンスを向上させるためのさまざまな最適化が行われています。
例えば、遅延読み込み（lazy loading）が自動的に有効になり、画面に表示される直前まで画像の読み込みが遅延されます。 また、ブラウザのビューポートに基づいた画像のプリロードやキャッシュ制御も行われます。
これらの最適化により、ユーザーエクスペリエンスが向上し、ページのパフォーマンスが向上します。
上記の変更により、Next.js 13.3におけるImageコンポーネントは、画像の表示と読み込みのパフォーマンスを大幅に改善し、ユーザーによりスムーズな体験を提供します。画像の最適化と効率的な読み込みにより、ページの速度やパフォーマンスが向上し、ユーザーエクスペリエンスが向上します。
当サイトで詳しく解説していますので参照ください。
サーバーサイドレンダリングの改善点
React v18を理解している方は、Reactコンポーネントがクライアント側コンポーネントとサーバー側コンポーネントの両方としてレンダリングできるようになった方法についてはすでにご存じかもしれません。
Next 13では、Reactアプリでのデータの取得方法が完全に変更されました。
データの取得はgetServerSideProps()、getStaticProps()、getInitialPath()などのデータフェッチメソッドに精通していると思います。
しかし、残念ながらNext.js 13以降では、これらのメソッドはアンチパターンとみなされ、使用は非推奨になりました。
Next.jsエコシステムで最も話題となっている変更の1つは、新しいappディレクトリの導入です。
従来のpagesディレクトリを作成し、すべてのページをそこに設定することもできますが、そうするとNext.jsバージョン13で提供される最新の素晴らしい機能を見逃すことになります。
app/ディレクトリでは、Reactの新しいサーバーコンポーネントアーキテクチャのサポートが導入されています。
アプリのルートが読み込まれると、キャッシュ可能で予測可能なサイズのNext.jsとReactのランタイムが読み込まれます。
このランタイムは、アプリが成長してもサイズが増えることはありません。
さらに、ランタイムは非同期に読み込まれるため、サーバーからのHTMLをクライアント上で段階的に拡張することができます。
つまり、サーバーコンポーネントを使用することで、パフォーマンスの向上と開発者エクスペリエンスの向上を実現できる、効果的なアプリ開発の手法が導入されています。
Streaming
Next.js 13以降では、ストリーミングのサポートが改善されました。
具体的には、Next.js 13では、新しいstreamモジュールが導入され、サーバーサイドレンダリング（SSR）時にストリーミングを行うことができるようになりました。
これにより、大きなデータセットやリアルタイムデータのストリーミングを処理するために、Next.jsアプリケーションでストリーミングを使用することができます。
また、ストリーミングを使用することで、速度とユーザーエクスペリエンスの向上に期待できます。
以下は、インストール手順の流れです。
まず、プロジェクトのルートディレクトリに移動します。
npm install stream // or yarn add stream
インストールが完了したら、streamモジュールを必要なファイルでインポートして使用することができます。
import { Readable, Writable, Transform } from 'stream';
上記のように、streamモジュールから必要なクラスや関数をインポートすることができます。
Readableは読み込み可能なストリーム、Writableは書き込み可能なストリーム、Transformは変換可能なストリームを表します。
インポートしたクラスや関数を使用する際には、適切なインスタンスを作成してストリームの操作を行っていきます。
app/ディレクトリでは、UIのレンダリングユニットを段階的にレンダリングし、クライアントに対して増分的にストリーム配信する機能を導入します。
Server ComponentsとNext.jsのネストされたレイアウトを使用することで、データを特に必要としないページの一部を即座にレンダリングし、データを取得しているページの一部にはローディング状態を表示することができます。
このアプローチにより、ユーザーはページ全体の読み込みを待つ必要なく、キャッシュされているページの部分または更新する必要のないページの部分を即座にレンダリングし、新しいデータをフェッチしているページの部分を読み込むことで、読み込み時間を短縮できます。
Turbopack
Next.js 13 | Introducing Turbopack (Alpha)
初めてリリースされて以来、Next.jsは内部でWebpackを使用してきました。
しかし、Next.jsのドキュメントによると「Webpack は30億回以上ダウンロードされています。これはWeb構築に不可欠な部分でしたが、JavaScriptベースのツールで可能な最大パフォーマンスの限界に達していました」と述べていました。
そして、彼らはNext.js v13でTurbopack（ターボパック）を発表しました。
Turbopackは、「RustベースのWebpackの最大700倍高速、Viteよりも10倍高速な代替」として注目されています。
開発に必要な最低限のみをバンドルしているため、起動時間が非常に高速です。
3,000モジュールを含むアプリでは、 Turbopackの起動に1.8秒かかります。Next.js 12は6.3秒、Viteは11.4秒、Webpackは16.5秒かかります。
驚愕の速さです。
Turbopackのアーキテクチャは、同じ作業を2回実行する必要がないようにキャッシュするという事実のおかげで、これらの速度を実現しています。
つまり、これは関数が変更された場合にのみ再実行されることを意味しており、多くの実行時間をスキップしていることになります。
Webpackの作者であるTobias Koppers氏から一般への開発者に向けて書かれたメッセージも含まれており、彼がこの新プロジェクトを主導していることは、フロントエンドコミュニティにとって非常に良いニュースです。
現時点では、Next.js 13と一緒にTurbopackを使用することができます。
プロジェクトを生成した後、"next dev --turbo"コマンドを実行するか、最初の"npm run dev --turbo"コマンドを使用する必要があります。
Turbopackは、Server Components、TypeScript、JSX、CSSなどをサポートしています。
ただし、このプロジェクトはまだアルファ版の状態であり、多くの機能がまだサポートされていません。
安定版のリリースが期待され、世界中のプロジェクトの速度向上に期待が寄せられています。
続報があり次第、この記事を更新してお知らせします。または、新記事で言及します。
最後に
Next.js 13は素晴らしい新機能をもたらします。
Next.js 13以降では、ルーティングとレイアウトを改善するために、appディレクトリをNext.jsプロジェクトのルートに導入しました。
この機能はまだベータ版であり、完全にオプションです。pagesディレクトリを保持し、appディレクトリと併存させることもでき、appディレクトリを追加しない選択肢もあります。
また、Next.js 13以降ではReactの最小バージョンは17.0.2から18.2.0に変更されました。
12.x.xがサポート終了になったため、Node.jsの最小バージョンは12.22.0から14.6.0に変更されます。
next.config.jsからtargetオプションが削除され、非推奨となりました。
swcMinifyの設定プロパティがfalseからtrueに変更されました。詳細については、こちらの Next.jsのコンパイラを参照してください。
Next 13のバージョンアップデートが皆さんにとって魅力的なものであることを願っています。
本日は以上となります。
最後まで読んで頂きありがとうございます。
この記事が役に立ったら、ブックマークと共有をしていただけると幸いです。
