11---
22title : ' レイアウトとページの作成方法'
33nav_title : ' レイアウトとページ'
4- description : ' 最初のページとレイアウトを作成し、それらをリンクします 。'
4+ description : ' 最初のページとレイアウトを作成し、それらをリンクする方法を学びます 。'
55related :
66 title : ' APIリファレンス'
7- description : ' このページで紹介されている機能について詳しくは、APIリファレンスをお読みください 。'
7+ description : ' このページで言及されている機能について、APIリファレンスを読んでさらに学びましょう 。'
88 links :
9- - app/api-reference/file-conventions/layout
10- - app/api-reference/file-conventions/page
11- - app/api-reference/components/link
9+ - ' app/api-reference/file-conventions/layout'
10+ - ' app/api-reference/file-conventions/page'
11+ - ' app/api-reference/components/link'
1212---
1313
14- Next.jsは** ファイルシステムベースのルーティング** を使用しており、フォルダとファイルを使用してルートを定義できます 。このページでは、レイアウトとページの作成方法、およびそれらをリンクする方法を説明します 。
14+ Next.jsは** ファイルシステムベースのルーティング** を使用しており、フォルダとファイルを使ってルートを定義できます 。このページでは、レイアウトとページの作成方法、およびそれらをリンクする方法を案内します 。
1515
1616## ページの作成 { #creating - a - page }
1717
18- ** ページ** は特定のルートでレンダリングされるUIです。ページを作成するには、` app ` ディレクトリ内に[ ` page ` ファイル] ( /docs/app/api-reference/file-conventions/page ) を追加し、Reactコンポーネントをデフォルトエクスポートします。たとえば、インデックスページ(` / ` )を作成するには :
18+ ** ページ** は特定のルートでレンダリングされるUIです。ページを作成するには、` app ` ディレクトリ内に[ ` page ` ファイル] ( /docs/app/api-reference/file-conventions/page ) を追加し、Reactコンポーネントをデフォルトエクスポートします。たとえば、インデックスページ(` / ` )を作成するには以下のようにします :
1919
2020<Image
2121 alt = " page.js 特殊ファイル"
@@ -48,9 +48,9 @@ export default function Page() {
4848
4949## レイアウトの作成 { #creating - a - layout }
5050
51- レイアウトは、複数のページ間で ** 共有** されるUIです。ナビゲーション時にレイアウトは状態を保持し、インタラクティブなままで、再レンダリングされません。
51+ レイアウトは複数のページ間で ** 共有** されるUIです。ナビゲーション時にレイアウトは状態を保持し、インタラクティブなままで、再レンダリングされません。
5252
53- レイアウトを定義するには、[ ` layout ` ファイル] ( /docs/app/api-reference/file-conventions/layout ) からReactコンポーネントをデフォルトエクスポートします。コンポーネントは 、ページまたは別の[ レイアウト] ( #nesting-layouts ) となる` children ` プロップを受け入れる必要があります 。
53+ レイアウトを定義するには、[ ` layout ` ファイル] ( /docs/app/api-reference/file-conventions/layout ) からReactコンポーネントをデフォルトエクスポートします。このコンポーネントは 、ページまたは別の[ レイアウト] ( #nesting-layouts ) となる` children ` propを受け取る必要があります 。
5454
5555たとえば、インデックスページを子として受け入れるレイアウトを作成するには、` app ` ディレクトリ内に` layout ` ファイルを追加します:
5656
@@ -103,7 +103,7 @@ export default function DashboardLayout({ children }) {
103103</TabItem >
104104</Tabs >
105105
106- 上記のレイアウトは、` app ` ディレクトリのルートに定義されているため 、[ root レイアウト] ( /docs/app/api-reference/file-conventions/layout#root-layouts ) と呼ばれます。root レイアウトは** 必須** であり、` html ` および` body ` タグを含める必要があります。
106+ 上記のレイアウトは、` app ` ディレクトリのrootに定義されているため 、[ root レイアウト] ( /docs/app/api-reference/file-conventions/layout#root-layouts ) と呼ばれます。root レイアウトは** 必須** であり、` html ` および` body ` タグを含める必要があります。
107107
108108## ネストされたルートの作成 { #creating - a - nested - route }
109109
@@ -115,10 +115,10 @@ export default function DashboardLayout({ children }) {
115115
116116Next.jsでは:
117117
118- - ** フォルダ** は、URLセグメントにマッピングされるルートセグメントを定義するために使用されます 。
118+ - ** フォルダ** は、URLセグメントにマップされるルートセグメントを定義するために使用されます 。
119119- ** ファイル** (` page ` や` layout ` など)は、セグメントに表示されるUIを作成するために使用されます。
120120
121- ネストされたルートを作成するには、フォルダを互いにネストできます。たとえば、` /blog ` のルートを追加するには、` app ` ディレクトリに` blog ` というフォルダを作成します。次に、` /blog ` を公開するには 、` page ` ファイルを追加します:
121+ ネストされたルートを作成するには、フォルダを互いにネストできます。たとえば、` /blog ` のルートを追加するには、` app ` ディレクトリに` blog ` というフォルダを作成します。次に、` /blog ` を公開アクセス可能にするために 、` page.tsx ` ファイルを追加します:
122122
123123<Image
124124 alt = " blogフォルダとpage.jsファイルを示すファイル階層"
@@ -132,6 +132,7 @@ Next.jsでは:
132132<TabItem value = " tsx" label = " TypeScript" >
133133
134134``` tsx title="app/blog/page.tsx" switcher
135+ // ダミーインポート
135136import { getPosts } from ' @/lib/posts'
136137import { Post } from ' @/ui/post'
137138
@@ -154,6 +155,7 @@ export default async function Page() {
154155<TabItem value = " jsx" label = " JavaScript" >
155156
156157``` jsx title="app/blog/[slug]/page.js" switcher
158+ // ダミーインポート
157159import { getPosts } from ' @/lib/posts'
158160import { Post } from ' @/ui/post'
159161
@@ -173,10 +175,10 @@ export default async function Page() {
173175</TabItem >
174176</Tabs >
175177
176- フォルダをネストし続けて、ネストされたルートを作成できます 。たとえば、特定のブログ投稿のルートを作成するには、` blog ` 内に新しい` [slug] ` フォルダを作成し、` page ` ファイルを追加します:
178+ フォルダをさらにネストして、ネストされたルートを作成し続けることができます 。たとえば、特定のブログ投稿のルートを作成するには、` blog ` 内に新しい` [slug] ` フォルダを作成し、` page ` ファイルを追加します:
177179
178180<Image
179- alt = " slugフォルダとpage.jsファイルをネストしたblogフォルダを示すファイル階層 "
181+ alt = " blogフォルダにネストされたslugフォルダとpage.jsファイルを示すファイル階層 "
180182 srcLight = " /docs/light/blog-post-nested-route.png"
181183 srcDark = " /docs/dark/blog-post-nested-route.png"
182184 width = " 1600"
@@ -208,16 +210,16 @@ export default function Page() {
208210</TabItem >
209211</Tabs >
210212
211- > ** Good to know ** : フォルダ名を角括弧で囲む(例:` [slug] ` )と、データから複数のページを生成するための特別な [ dynamic route segment] ( /docs/app/building-your-application/routing/dynamic-routes ) が作成されます。これは、ブログ投稿や商品ページなどに便利です 。
213+ フォルダ名を角括弧で囲む(例:` [slug] ` )と、[ dynamic route segment] ( /docs/app/building-your-application/routing/dynamic-routes ) が作成され、データから複数のページを生成するために使用されます。例:ブログ投稿、商品ページなど 。
212214
213215## レイアウトのネスト { #nesting - layouts }
214216
215- デフォルトでは、フォルダ階層内のレイアウトもネストされており、` children ` プロップを介して子レイアウトをラップします 。特定のルートセグメント(フォルダ)内に` layout ` を追加することで、レイアウトをネストできます。
217+ デフォルトでは、フォルダ階層内のレイアウトもネストされており、` children ` propを介して子レイアウトをラップします 。特定のルートセグメント(フォルダ)内に` layout ` を追加することで、レイアウトをネストできます。
216218
217219たとえば、` /blog ` ルートのレイアウトを作成するには、` blog ` フォルダ内に新しい` layout ` ファイルを追加します。
218220
219221<Image
220- alt = " root レイアウトがblogレイアウトをラップしているファイル階層 "
222+ alt = " rootレイアウトがblogレイアウトをラップしているファイル階層 "
221223 srcLight = " /docs/light/nested-layouts.png"
222224 srcDark = " /docs/dark/nested-layouts.png"
223225 width = " 1600"
@@ -253,9 +255,9 @@ export default function BlogLayout({ children }) {
253255
254256## ページ間のリンク { #linking - between - pages }
255257
256- ルート間をナビゲートするには、[ ` <Link> ` コンポーネント] ( /docs/app/api-reference/components/link ) を使用できます。` <Link> ` は、HTMLの` <a> ` タグを拡張してプリフェッチとクライアントサイドナビゲーションを提供する 、Next.jsの組み込みコンポーネントです。
258+ ルート間をナビゲートするには、[ ` <Link> ` コンポーネント] ( /docs/app/api-reference/components/link ) を使用できます。` <Link> ` は、HTMLの` <a> ` タグを拡張して [ プリフェッチ ] ( /docs/app/building-your-application/routing/linking-and-navigating#2-prefetching ) と [ クライアントサイドナビゲーション ] ( /docs/app/building-your-application/routing/linking-and-navigating#5-soft-navigation ) を提供する 、Next.jsの組み込みコンポーネントです。
257259
258- たとえば、ブログ投稿のリストを生成するには、` next/link ` から` <Link> ` をインポートし、コンポーネントに` href ` プロップを渡します :
260+ たとえば、ブログ投稿のリストを生成するには、` next/link ` から` <Link> ` をインポートし、コンポーネントに` href ` propを渡します :
259261
260262<Tabs >
261263<TabItem value = " tsx" label = " TypeScript" >
0 commit comments