ルートの定義

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

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

ルートの作成

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

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

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

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

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

UIの作成

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

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

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