ルートの定義

ルーティングの基本のページを先に読むことをおすすめします。

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

ルートの作成

Next.js では、フォルダを使ってルートを定義する、ファイルシステムベースの Router を使います。

各フォルダは、URL Segment にマッピングされるルート セグメントを表します。入れ子になったルートを作成するには、フォルダ同士を入れ子にします。

特殊なpage.jsファイルはルート Segment を一般公開するために使われます。

この例では、/dashboard/analyticsの URL パスは、対応するpage.jsファイルを持っていないため、一般にはアクセスできません。このフォルダは、コンポーネント、スタイルシート、画像、またはその他の配置されたファイルを保存するために使用できます。

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

UI の作成

特別なファイル規約は、各ルート Segment の UI を作成するために使用されます。もっとも一般的なものは、ルートに固有の UI を表示するpagesと、複数のルートで共有される UI を表示するlayoutsです。

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

app/page.tsx

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