Next.js 16 App Router 入門ガイド

Next.js 16では、App Routerがデフォルトのルーティングシステムとして採用されています。この記事では、App Routerの基本的な使い方を解説します。

App Routerとは

App Routerは、ファイルシステムベースのルーティングを提供するNext.jsの新しいルーティングシステムです。app/ディレクトリ内にファイルを配置するだけで、自動的にルートが生成されます。

基本的なページの作成

まず、app/ディレクトリ内にpage.tsxファイルを作成します：

```tsx export default function HomePage() { return ( ようこそ Next.js へ ); } ```

このファイルは/ルートに対応するページになります。

動的ルーティング

動的なルートを作成するには、[slug]のようなフォルダ名を使用します：

```tsx // app/blog/[slug]/page.tsx export default function BlogPost({ params }: { params: { slug: string } }) { return 記事: {params.slug}; } ```

サーバーコンポーネントとクライアントコンポーネント

App Routerでは、デフォルトでサーバーコンポーネントが使用されます。インタラクティブな機能が必要な場合のみ、'use client'ディレクティブを使用してクライアントコンポーネントにします。

まとめ

App Routerを使うことで、よりシンプルで強力なルーティングシステムを実現できます。次の記事では、データフェッチングやメタデータの設定について詳しく見ていきましょう。