ルートの定義

続ける前にルーティングの基礎ページを読むことをお勧めします。

このページでは、Next.jsアプリケーションでルートを定義および整理する方法を説明します。

ルートの作成

Next.jsはファイルシステムベースのルーターを使用しており、フォルダを使ってルートを定義します。

各フォルダはルートセグメントを表し、URLセグメントにマッピングされます。ネストされたルートを作成するには、フォルダを互いに入れ子にします。

特別なpage.jsファイルを使用して、ルートセグメントを公開可能にします。

この例では、/dashboard/analytics URLパスは対応するpage.jsファイルがないため公開されません。このフォルダはコンポーネント、スタイルシート、画像、その他の関連ファイルを保存するために使用できます。

補足: 特別なファイルには.js、.jsx、または.tsxファイル拡張子を使用できます。

UIの作成

各ルートセグメントのUIを作成するために特別なファイル規約が使用されます。最も一般的なのは、ルート固有のUIを表示するページと、複数のルート間で共有されるUIを表示するレイアウトです。

例えば、最初のページを作成するには、appディレクトリ内にpage.jsファイルを追加し、Reactコンポーネントをエクスポートします:

export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

export default function Page() {
  return <h1>Hello, Next.js!</h1>
}