【Next.js13】Dynamic Routesで動的にパスを生成したい

概要

はじめまして！

最近Next.jsの学習をはじめましたが、個人開発において動的にパスを生成したくなったので、Dynamic Routesについて少しまとめてみました。

Dynamic Routes is 何？

Convention
A Dynamic Segment can be created by wrapping a folder's name in square brackets: [folderName]. For example, [id] or [slug].

Dynamic Segments can be accessed from useRouter.

Example
For example, a blog could include the following route pages/blog/[slug].js where [slug] is the Dynamic Segment for blog posts.

Next.js13系では、app/配下のディレクトリがルーティングと紐づいており、ディレクトリ名がそのままパス名になる仕組みになっています。

例えば、カラムとして保持してるslugをパスとして指定したい場合、ブラケット付きのディレクトリ名[slug]で作成することで　そのカラム名で動的にパスを作ることができます。

現在のディレクトリ構造

.
└── app
    ├── favicon.ico
    ├── globals.css
    ├── layout.tsx
    ├── page.tsx
    └── works
        └── page.tsx

やりたいこと

現状は/worksに遷移できます。
この/worksから、/works/trialや/works/basicのように単一ページでパスを作れるようにします。

app/works/page.tsx

import Link from 'next/link';

export default function () {
	return (
		<div>
			<h1 className="text-3xl font-bold">/worksだよ</h1>
		</div>
	);
}

検証

ドキュメント通り、works配下にブラケット付きの[slug]ディレクトリとpage.tsxを作成します。

tree
.
└── app
    ├── favicon.ico
    ├── globals.css
    ├── layout.tsx
    ├── page.tsx
    └── works
        ├── [slug]
        │   └── page.tsx
        └── page.tsx

works/page.tsxにリンクを追加します。

src/app/works/page.tsx

import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1 className="text-3xl font-bold">/worksだよ</h1>
	    <nav>
		  <ul>
		    <li>
			  <Link href="/">Home</Link>
			</li>
			<li>
			  <Link href="/works/trial">Trial</Link>
			</li>
			<li>
			  <Link href="/works/basic">Basic</Link>
		    </li>
			<li>
			  <Link href="/works/intermediate">Intermediate</Link>
		    </li>
	     </ul>
      </nav>
  </div>
  );
}

works/[slug]/page.tsxに受け取ったパスを表示できるようにします。

src/app/works/[slug]/page.tsx

'use client';

import { usePathname } from 'next/navigation';

export default function Page() {
	const Pathname = usePathname();
	return <h1 className="text-3xl font-bold">パス: {Pathname}</h1>;
}

表示を確認します。


無事に表示が確認できました！

まとめ

Next.jsを学んでいますが、レンダリングの選択肢や、コンポーネント設計、Hookの使い方など、たくさん勉強することがあるのでこれからも地道に勉強していきたいです！
最後まで読んでいただき、ありがとうございました！