1. HOME
  2. ブログ
  3. IT技術
  4. 【入門】Next.js 13.4の新機能”App Router”の使い方

【入門】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の進化版のようなもので、新規アプリ開発時の導入が公式でも推奨されています。

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

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

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

App Routerの導入方法

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

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

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

2.プロジェクト実行

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

※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」に該当

特別なディレクトリ/ファイル

Pages Routerからの大きな変更点の1つに、「特殊な意味をもつディレクトリとファイルができたこと」が挙げられます。いくつか例を紹介します。

page.tsx

先述した通り、page.tsxのみがルーティング対象、実際に表示されるページとなります。デフォルトではサーバーコンポーネントですが、クライアントコンポーネントに切り替えたい場合は、ファイル先頭に"use client"と記述するだけでOKです。※サーバーコンポーネントについては、こちらの記事が参考になります。

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)をデフォルトでラップするようになっています。

共有のレイアウトのラップから除外したい時は、以下のRoute Groupsが使えます。

Route Groups

ディレクトリ名を()で囲むと、そのディレクトリがルーティングパスに含まれないようにすることができます。つまり、括弧内のフォルダはURL から省略されます。

以下のディレクトリ構成だと、親レイアウト(src/app/layout.tsx)は、(marketing)内のlayout.tsxと、(shop)内のlayout.tsxをそれぞれラップしますが、各グループごとに異なるレイアウトを作成することが可能となります。

この時、(marketing)や(shop)がパスに影響されない為、ディレクトリの整理にも使えそうですね。

データの取得方法

Pages Routerで使っていたgetStaticPropsやgetServerSidePropsが廃止され、サーバーコンポーネント内でfetch関数を使用する時に、結果がキャッシュされるようになった点も大きな変更点です。以下は記述例です。

終わりに

今回は、Next.js 13.4の新機能App Routerで使用できる機能の一部しか紹介できませんでしたが、高パフォーマンスなWebサイトやWebアプリを開発したい方やPages RouterからApp Routerへの移行を検討している方のお役に立てると幸いです。尚、Reactをこれから学ぼうとしている初学者の方は、まずはこちらの記事でJavaScriptの学習から始めてみて下さい。次回は実際に既存プロジェクトからApp Routerへの移行手順についてまとめてみたいと考えています。ここまで読んで頂きありがとうございました。

書いた人はこんな人

ジョージ(エンジニア)
ジョージ(エンジニア)
小学校教諭、住宅設計等を経て、2021年よりWeb業界に携わっています。
主にWebのフロントエンドとマーケティング分野を経験してきました。
好きなプログラミング言語は、React/Next.jsです。
よろしくお願い致します。

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア