Next.js App Router のリリースに伴い、多くの開発者が既存のプロジェクトの移行を熱望しています。この投稿では、主な課題、変更点、プロセスをよりスムーズにする方法など、プロジェクトを Next.js App Router に移行した私の経験を共有します。

これは段階的なアプローチであり、ページ ルーターとアプリ ルーターを同時に使用できます。

Next.js App Router に移行する理由

App Router にはいくつかの利点があります:

• ルーティングの改善: よりクリーンなファイル システム ベースのルーティング。
• サーバーサイド レンダリング (SSR) の機能強化: サーバーサイド データのより効率的な処理。
• メタ処理: SEO 管理の簡素化。
• パフォーマンスの向上: さまざまなコンポーネントの最適化が組み込まれています。

移行することで、アプリケーションを将来にわたって保証し、最新の Next.js 機能を活用できます。

App Router に移行する手順

• 依存関係を更新

最初のステップは、Next.js と関連する依存関係が最新であることを確認することです。次のコマンドを実行して、Next.js と React の最新バージョンをインストールします:

npm install next@latest react@latest react-dom@latest
npm install -D eslint-config-next@latest

• アプリフォルダーを構成する

App Router は、ルート、メタデータ、レイアウトを管理するために新しいアプリ ディレクトリに依存します。構造化する方法は次のとおりです:

アプリ フォルダー: ページをアプリ フォルダーに移動します。各ルートには、page.tsx ファイルを含む独自の専用フォルダーが存在します。

レイアウト: アプリの特定のセクションのレイアウトを定義するには、layout.tsx ファイルを追加します。これは、ナビゲーション バーやフッターなどの共有コンポーネントを処理する場合に特に便利です。

• ルーターの変更

最も重要な変更の 1 つは、ルーティングおよびナビゲーション機能の next/router が next/navigation に置き換えられたことです。

すべての next/router インポートを next/navigation に置き換えます。
useRouter などの関数を、必要に応じて usePathname、useSearchParams、useRouter() などの新しい同等の関数で更新します。

• サーバー側コードのリファクタリング

getServerSideProps と getStaticProps は App Router では非推奨になりました。
サーバー側ページでのデータ取得には、非同期サーバー コンポーネントまたはサーバー アクションを使用します。

export async function getData() {
  const res = await fetch('https://getData.com/data');
  return res.json();
}

• クライアント側コンポーネントの処理

クライアントコンポーネント:
React フック、ブラウザ API、またはユーザー インタラクションを使用するコンポーネントはすべて、「クライアントを使用」とマークする必要があります。これにより、Next.js にクライアント側でレンダリングするよう指示されます。

サーバーコンポーネント:
ブラウザとの対話を必要としないコンポーネントは、サーバー コンポーネントとして残すことができます。これらは、不要な JavaScript をクライアントに送信することを避けるため、より効率的です。

• 外部ライブラリの処理

React Query、AntDesign、フレーマーなどの外部ライブラリを使用している場合は、それらを更新し、必要に応じて変更を加える必要があります。このブログにすべての変更を含めることはできません。ただし、変更点はドキュメントに記載されています。

移行中の一般的な課題

• ルーターイベント処理:

next/router から next/navigation への変更に伴い、ルーター イベントの処理には異なるアプローチが必要になる可能性があります。
ルーターのイベント リスナーまたはフックを適宜更新してください。

• レイアウトシフトの問題:

複雑なレイアウト (特にアニメーションを含むページ) を移行する場合、レイアウトの変化に気づくことがあります。レイアウトのずれを防ぐために、プレースホルダーを追加するか、サーバー側自体で適切な配置を維持してください。

• 画像とリンクコンポーネントの更新:

App Router により、画像コンポーネントとリンク コンポーネントに変更が加えられます。
codemod を使用してコンポーネントを自動的に更新します。
画像コンポーネントの場合は、response.

• アニメーション

フレーマー、スワイパー、戦利品ファイルなどのアニメーション関連のコンポーネントはクライアント側に保持する必要があります。

結論

Next.js App Router への移行には課題もありますが、パフォーマンス、スケーラビリティ、柔軟性が大幅に向上します。移行を管理可能なセクション (アプリレベル、ページレベル、機能更新) に分割することで、各変更に体系的に取り組むことができました。

ご自身の移行に関する質問やヒントがあれば、ぜひお知らせください。