Next.jsのルーティング完全ガイド
Next.jsのルーティングは、ファイルシステムベースで動作します。これは、特定のディレクトリにファイルを置くだけで、自動的にルーティングが構成されるシンプルかつ強力な仕組みです。本ガイドでは、静的ルートから動的ルート、ネストしたルートまで、Next.jsのルーティングシステムを詳しく解説します。
基本的なルーティング
Next.jsでは、pagesまたはappフォルダ内に配置されたファイルが、そのままURLルートとして機能します。例えば、pages/index.jsは/（ホームページ）、pages/about.jsは/aboutというURLになります。appフォルダを使用する場合は、同様にapp/page.tsxが/に対応します。
ルートの作成手順
- ホームページルート:
app/page.tsxファイルを作成し、<h1>Home</h1>のようなコンテンツを追加することで、/に対応するページが作成されます。
- その他のページルート:
- 例えば
app/about/page.tsxを作成すると、/aboutというURLが自動的に生成されます。
- 例えば
動的ルート
動的ルートは、ページURLが動的なパラメータ（例：/posts/123）に基づく場合に必要です。Next.jsでは、フォルダ名やファイル名に角括弧を使用して動的ルートを作成します。たとえば、pages/[id].jsというファイルを作成することで、/posts/123のようなURLに対応するページが実装できます。
動的ルートの例
// app/posts/[id]/page.tsx
export default function Post({ params }) {
return <div>Post ID: {params.id}</div>;
}
この例では、/posts/123のようなURLにアクセスした際に、そのIDに基づいたコンテンツを表示します。
ネストされたルート
ネストされたルートでは、フォルダを階層的に配置することで複雑なURL構造を実現できます。例えば、/blog/firstのようなURLは、app/blog/first/page.tsxファイルを作成することで実装できます。
ネストされたルートの例
// app/blog/first/page.tsx
export default function FirstBlog() {
return <h1>First Blog Post</h1>;
}
この構造により、/blog/firstにアクセスした際に対応するコンテンツが表示されます。
その他の特殊なルート
Next.jsでは、404ページやエラーハンドリングのルートも簡単に設定できます。たとえば、app/not-found.tsxファイルを作成することで、存在しないページへのアクセス時にカスタムの404エラーページを表示できます。
まとめ
Next.jsのルーティングシステムは非常に柔軟で、シンプルな静的ルートから、複雑な動的・ネストルートまで対応可能です。ファイルシステムに基づくルーティングは、開発者が直感的にルートを構築できる強力な機能であり、複雑なWebアプリケーションの開発にも十分な柔軟性を提供します。