【入門】Next.js 13.4の新機能"App Router"の使い方

ジョージ（エンジニア）

2023.10.27

IT技術

Next.js

はじめに

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 use

2.プロジェクト実行

プロジェクトのルートディレクトリで以下コマンド実行後、ブラウザで「 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への移行手順についてまとめてみたいと考えています。ここまで読んで頂きありがとうございました。

ITフリーランスのエンジニア専門エージェント