Next.jsの勉強会 vol.2 App Router

App Router

App Routerとは、Next.js のルーティング方式の1つであり、URLとページを作る仕組みのこと。appディレクトリで管理する。

src/app/services/page.tsx
↓
/services というURLになる

そのページへ遷移するためにLinkコンポーネントを使う。必要なページを事前に読み込む最適化もしてくれる。

import Link from "next/link";
 
<Link href="/services">Service</Link>

Dynamic Route

URLの一部を変数として受け取れるページのこと。

/works/ の後ろの文字を動的にしたいときは、[slug] ディレクトリを挟む。

src/app/works/[slug]/page.tsx
↓
/works/sakura-dental
/works/north-table
/works/anything

params

paramsとは、Next.js が渡してくれるルート情報の入れ物のこと。必ずオブジェクトで返ってくる。

Next.jsからページコンポーネントに渡されるpropsの型を定義するには、下記のように書く。

type WorkDetailPageProps = {
  params: Promise<{
    slug: string;
  }>;
};

TypeScriptの<> ジェネリクス は「中身の型」を指定する書き方。下記は、Promiseという箱の中には { slug: string } という形の値が入っていますの意。

Promise<{ slug: string }>

値を取り出す時は、awaitして取り出す。Next.js16ではparamsはPromiseとして渡されるため。

const { slug } = await params;

Dynamic Routeに関する注意点

は便利だけど、何でも受け取れてしまう。
存在しないslugはnotFound()というNext.jsが用意している関数で404にする必要がある。→ここは後ほどデータ設計のところで学習する。

metadata

そのページのタイトルや説明文を設定する仕組み。 App Routerでは、各ページファイルにmetadataをexportすると、そのページの<title>や<meta name="description">に反映されます。「Metadata」はNext.jsが用意しているTypeScriptの型で、metadataに書ける項目を安全に扱うために使う。

下記のように書いて使う。import typeとは、「型だけを読み込む」の意味。

src/app/works/page.tsx

import type { Metadata } from "next";
 
export const metadata: Metadata = {
  title: "制作実績 | Studio Cloud",
  description: "Studio Cloudの制作実績を紹介します。",
};

ファイルごとのmetadata使い分けは下記。

layout.tsx サイト全体の基本metadata
各page.tsx ページごとのtitle/description

例: /worksのmetadata => src/app/works/page.tsxに書く