Defining Routes

続ける前に、Routing Fundamentals ページを読むことをお勧めします。

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

Creating Routes

Next.js は、ファイルシステムベースの router を使用し、フォルダは routes を定義するために使用されます。

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

特別な page.jsファイルは、route セグメントを一般に公開するために使用されます。

この例では、/dashboard/analytics URL path は、対応するpage.jsファイルがないため、公開アクセス可能ではありません。このフォルダは、Component、スタイルシート、画像、または他の同位のファイルを保存するために使用できます。

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

Creating UI

特別なファイル規約は、各 route セグメントに対する UI を作成するために使用されます。最も一般的なものは、route 固有の UI を表示するための Page、および複数の routes に共有される UI を表示するための layoutsです。

例えば、最初のページを作成するには、app ディレクトリ内に page.js ファイルを追加し、React component を export します。

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

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