ジョージ（エンジニア）【入門】Next.js 13.4の新機能"App Router"の使い方
ジョージ（エンジニア）IT技術
はじめに
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で新規プロジェクト作成
1npx create-next-app@latest上記のコマンド打つと、以下の質問が出てきますが、今回はApp Routerを使用するので、「Would you like to use App Router? (recommended)」は必ず「Yes」にしましょう。
1What is your project named? my-app // プロジェクトの名前（何でもOK）
2Would you like to use TypeScript? No / Yes // TypeScriptの使用について
3Would you like to use ESLint? No / Yes // ESLintの使用について
4Would you like to use Tailwind CSS? No / Yes // Tailwind CSSの使用について
5Would you like to use2.プロジェクト実行
プロジェクトのルートディレクトリで以下コマンド実行後、ブラウザで「 http://localhost:3000 」にアクセスして、「src/app/page.tsx」に記述されているページの内容が表示されていれば導入自体は完了です。
1npm 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'use client'
2
3import { useState } from 'react'
4
5export default function Counter() {
6 const [count, setCount] = useState(0)
7
8// 以下の「ボタンのクリック」などのようなブラウザ側の挙動を記述する際はクライアントコンポーネントに切り替えると良い。
9 return (
10 <div>
11 <p>You clicked {count} times</p>
12 <button onClick={() => setCount(count + 1)}>Click me</button>
13 </div>
14 )
15}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）をデフォルトでラップするようになっています。
1src/app
2├── dashboard
3│ ├── layout.tsx // src/app/layout.tsxでラップされる。
4│ ├── page.tsx
5│ └── setting
6│ └── page.tsx
7├── layout.tsx
8└── page.tsx共有のレイアウトのラップから除外したい時は、以下のRoute Groupsが使えます。
Route Groups
ディレクトリ名を()で囲むと、そのディレクトリがルーティングパスに含まれないようにすることができます。つまり、括弧内のフォルダはURL から省略されます。
以下のディレクトリ構成だと、親レイアウト（src/app/layout.tsx）は、(marketing)内のlayout.tsxと、(shop)内のlayout.tsxをそれぞれラップしますが、各グループごとに異なるレイアウトを作成することが可能となります。
1src/app
2├── (marketing)
3│ ├── layout.tsx
4│ └── page.tsx // src/app/(marketing)/layout.tsxが適用される。
5├── (shop)
6│ ├── layout.tsx
7│ └── page.tsx // src/app/(shop)/layout.tsxが適用される。
8├── layout.tsx
9└── page.tsxこの時、(marketing)や(shop)がパスに影響されない為、ディレクトリの整理にも使えそうですね。
データの取得方法
Pages Routerで使っていたgetStaticPropsやgetServerSidePropsが廃止され、サーバーコンポーネント内でfetch関数を使用する時に、結果がキャッシュされるようになった点も大きな変更点です。以下は記述例です。
1export const page = async () => {
2 //終わりに
今回は、Next.js 13.4の新機能App Routerで使用できる機能の一部しか紹介できませんでしたが、高パフォーマンスなWebサイトやWebアプリを開発したい方やPages RouterからApp Routerへの移行を検討している方のお役に立てると幸いです。尚、Reactをこれから学ぼうとしている初学者の方は、まずはこちらの記事でJavaScriptの学習から始めてみて下さい。次回は実際に既存プロジェクトからApp Routerへの移行手順についてまとめてみたいと考えています。ここまで読んで頂きありがとうございました。
ライトコードでは、エンジニアを積極採用中！
ライトコードでは、エンジニアを積極採用しています！社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。
採用情報へ
ジョージ（エンジニア）
小学校教諭、住宅設計等を経て、2021年よりWeb業界に携わっています。 主にWebのフロントエンドとマーケティング分野を経験してきました。 好きなプログラミング言語は、React/Next.jsです。 よろしくお願い致します。
おすすめ記事
ライトコードの営業マンって何してるの？〜高橋さん編〜
広告メディア事業部
2024.05.08
日常
移転したライトコード大阪オフィスを調査せよ！
広告メディア事業部
2024.04.03
日常
【GCP】BIG QUERYを触り程度に理解してみる
かねまさ（エンジニア）
2024.04.02
IT技術
【Android】Github ActionsでFirebase Test Labの実行を分散する
笹川（エンジニア）
2024.04.02
IT技術
【Next.js】App Router で使用できるキャッシュまとめ
モーリー（エンジニア）
2024.03.29
IT技術
