ルートの定義

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

このページでは、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>
}