【入門】Next.js 13.4の新機能”App Router”の使い方
2023.12.01
はじめに
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で新規プロジェクト作成
1 | npx create-next-app@latest |
上記のコマンド打つと、以下の質問が出てきますが、今回はApp Routerを使用するので、「Would you like to use App Router? (recommended)」は必ず「Yes」にしましょう。
1 2 3 4 5 6 7 8 | 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」に記述されているページの内容が表示されていれば導入自体は完了です。
1 | npm run dev |
※Pages RouterからApp Routerへの移行方法については、公式のこちらが参考になります。
ルーティングについて
従来のPages Routerは、pagesディレクトリ配下のファイル全てがルーティング対象でした。しかし、App Routerではappディレクトリ配下のpage.tsxのみがルーティング対象となります。まとめると以下の通りです。
| Pages Router | src/pages配下がルーティング対象 例：/pages/test/hoge.tsxが「https://ドメイン/test/hoge」に該当 |
| App Router | src/app配下のpage.tsxのみがルーティング対象 例：/app/test/hoge/page.tsxが「https://ドメイン/test/hoge」に該当 |
特別なディレクトリ/ファイル
Pages Routerからの大きな変更点の1つに、「特殊な意味をもつディレクトリとファイルができたこと」が挙げられます。いくつか例を紹介します。
page.tsx
先述した通り、page.tsxのみがルーティング対象、実際に表示されるページとなります。デフォルトではサーバーコンポーネントですが、クライアントコンポーネントに切り替えたい場合は、ファイル先頭に"use client"と記述するだけでOKです。※サーバーコンポーネントについては、こちらの記事が参考になります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 'use client' import { useState } from 'react' export default function Counter() { const [count, setCount] = useState(0) // 以下の「ボタンのクリック」などのようなブラウザ側の挙動を記述する際はクライアントコンポーネントに切り替えると良い。 return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ) } |
layout.tsx
layout.tsxは全ページ共通のレイアウト定義の為のファイルです。これまでは、ページ間の共通のレイアウトや設定は「_document.tsx」や「_app.tsx」に記述していたのですが、これらが廃止された代わりに新しく取り入れられたファイルです。Next.jsでは<html>タグと<body>タグが自動で生成されない為、ルートディレクトリのlayout.tsxにこれらを記述する必要があります。今回は割愛しますが、SEO関連のmetaタグはmetadataに記述して下さい。
また、以下のディレクトリ構成だと、親レイアウト（src/app/layout.tsx）が子レイアウト（src/app/dashboard/layout.tsx）をデフォルトでラップするようになっています。
1 2 3 4 5 6 7 8 | src/app ├── dashboard │ ├── layout.tsx // src/app/layout.tsxでラップされる。 │ ├── page.tsx │ └── setting │ └── page.tsx ├── layout.tsx └── page.tsx |
共有のレイアウトのラップから除外したい時は、以下のRoute Groupsが使えます。
Route Groups
ディレクトリ名を()で囲むと、そのディレクトリがルーティングパスに含まれないようにすることができます。つまり、括弧内のフォルダはURL から省略されます。
以下のディレクトリ構成だと、親レイアウト（src/app/layout.tsx）は、(marketing)内のlayout.tsxと、(shop)内のlayout.tsxをそれぞれラップしますが、各グループごとに異なるレイアウトを作成することが可能となります。
1 2 3 4 5 6 7 8 9 | src/app ├── (marketing) │ ├── layout.tsx │ └── page.tsx // src/app/(marketing)/layout.tsxが適用される。 ├── (shop) │ ├── layout.tsx │ └── page.tsx // src/app/(shop)/layout.tsxが適用される。 ├── layout.tsx └── page.tsx |
この時、(marketing)や(shop)がパスに影響されない為、ディレクトリの整理にも使えそうですね。
データの取得方法
Pages Routerで使っていたgetStaticPropsやgetServerSidePropsが廃止され、サーバーコンポーネント内でfetch関数を使用する時に、結果がキャッシュされるようになった点も大きな変更点です。以下は記述例です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | export const page = async () => { // <code>getStaticProps</code>と同じで、ビルド時にfetchされてキャッシュされる。（デフォルト設定）：SSG const staticData = await fetch('https://...', { cache: 'force-cache' }) // <code>getServerSideProps</code>と同じで、キャッシュはされず毎回fetchされる。：SSR const dynamicData = await fetch('https://...', { cache: 'no-store' }) // <code>getStaticProps</code>の<code>revalidate</code>オプションと同じで、有効期間を指定してキャッシュされるようにできる。（以下は10秒間キャッシュされる）：ISR const revalidatedData = await fetch('https://...', { next: { revalidate: 10 } }) return <div>Hello Next.js 13.4</div> } |
終わりに
今回は、Next.js 13.4の新機能App Routerで使用できる機能の一部しか紹介できませんでしたが、高パフォーマンスなWebサイトやWebアプリを開発したい方やPages RouterからApp Routerへの移行を検討している方のお役に立てると幸いです。尚、Reactをこれから学ぼうとしている初学者の方は、まずはこちらの記事でJavaScriptの学習から始めてみて下さい。次回は実際に既存プロジェクトからApp Routerへの移行手順についてまとめてみたいと考えています。ここまで読んで頂きありがとうございました。
書いた人はこんな人
- 小学校教諭、住宅設計等を経て、2021年よりWeb業界に携わっています。
主にWebのフロントエンドとマーケティング分野を経験してきました。
好きなプログラミング言語は、React/Next.jsです。
よろしくお願い致します。
IT技術10月 27, 2023【入門】Next.js 13.4の新機能”App Router”の使い方
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
