Pages

ページとは、ルートに対してユニークなUIのことです。page.jsファイルからコンポーネントをデフォルトでエクスポートすることでページを定義できます。

たとえば、indexページを作成するには、appディレクトリ内にpage.jsファイルを追加します。

TypeScript

app/page.tsx

// `app/page.tsx` は `/` URL のUIです
export default function Page() {
  return <h1>Hello, Home page!</h1>
}

JavaScript

app/page.js

// `app/page.js` は `/` URL のUIです
export default function Page() {
  return <h1>Hello, Home page!</h1>
}

次に、さらにページを作成するには、新しいフォルダを作成し、その中にpage.jsファイルを追加します。たとえば、/dashboardルート用のページを作成するには、dashboardという新しいフォルダを作成し、その中にpage.jsファイルを追加します。

TypeScript

app/dashboard/page.tsx

// `app/dashboard/page.tsx` は `/dashboard` URL のUIです
export default function Page() {
  return <h1>Hello, Dashboard Page!</h1>
}

JavaScript

app/dashboard/page.js

// `app/dashboard/page.js` は `/dashboard` URL のUIです
export default function Page() {
  return <h1>Hello, Dashboard Page!</h1>
}

Good to know:

• Pagesには.js、.jsx、.tsxのファイル拡張子を使用できます
• ページは常にルートsubtreeのleafです
• ルートセグメントを公開アクセス可能にするには、page.jsファイルが必要です
• デフォルトでページはServer Componentですが、Client Componentに設定することもできます
• ページはデータを取得できます。詳細については、データフェッチングセクションを参照してください