ルートの定義

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

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

ルートの作成

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

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

特別なpage.jsファイルを使用して、ルートセグメントを外部からアクセス可能にします。

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

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

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

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

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

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