【入門】Next.js 13.4の新機能”App Router”の使い方【株式会社ライトコード】

※弊社エンジニアの記事になります。

はじめに

Next.js13.4から安定版として新しく追加された機能、App Routerを実務で使うに当たって便利そうな機能の一部など調べたことをまとめました。

React/Next.jsを既に実務で使用している方、App Routerへの移行を考えている方、Reactの学習を終えてNext.jsでWebアプリをつくりたい方などのお役に立てれば幸いです。

App Routerとは

App Routerは、従来のPages Routerの進化版のようなもので、新規アプリ開発時の導入が公式でも推奨されています。

以下のような特徴があります。

コンポーネントレベルでSSR/CSRを組み合わせられる。
全てのReactコンポーネントをサーバーサイドでレンダリングする(RSC)。
特別な意味をもつディレクトリ/ファイル構成

導入するメリットとしては、パフォーマンスの優れたサイトやアプリを構築することが可能となる点などが挙げられます。

App Routerの導入方法

App Routerの導入方法を簡単に解説します。基本は公式のInstallationの通りに進めて頂ければOKです。

1.create-next-appで新規プロジェクト作成

npx create-next-app@latest

上記のコマンド打つと、以下の質問が出てきますが、今回はApp Routerを使用するので、「Would you like to use App Router? (recommended)」は必ず「Yes」にしましょう。

What is your project named? my-app　　// プロジェクトの名前（何でもOK）
Would you like to use TypeScript? No / Yes　　// TypeScriptの使用について
Would you like to use ESLint? No / Yes　　// ESLintの使用について
Would you like to use Tailwind CSS? No / Yes　　// Tailwind CSSの使用について
Would you like to use <code>src/</code> directory? No / Yes　　// srcディレクトリの使用について（本記事ではYesで進めてます）
Would you like to use App Router? (recommended) No / Yes　　　　　// App Routerの使用について（必ずYes）
Would you like to customize the default import alias (@/*)? No / Yes　　// エイリアスについて
What import alias would you like configured? @/*　　// エイリアスのインポートの仕方について

2.プロジェクト実行

プロジェクトのルートディレクトリで以下コマンド実行後、ブラウザで「 http://localhost:3000 」にアクセスして、「src/app/page.tsx」に記述されているページの内容が表示されていれば導入自体は完了です。

npm run dev

※Pages RouterからApp Routerへの移行方法については、公式のこちらが参考になります。

ルーティングについて

従来のPages Routerは、pagesディレクトリ配下のファイル全てがルーティング対象でした。しかし、App Routerではappディレクトリ配下のpage.tsxのみがルーティング対象となります。まとめると以下の通りです。

Pages Routersrc/pages配下がルーティング対象
例：/pages/test/hoge.tsxが「https://ドメイン/test/hoge」に該当App Routersrc/app配下のpage.tsxのみがルーティング対象
例：/app/test/hoge/page.tsxが「https://ドメイン/test/hoge」に該当

…