konjacbot: sync docs@581975d

docs/01-app/01-getting-started/03-layouts-and-pages.mdx

@@ -1,21 +1,21 @@
 ---
 title: 'レイアウトとページの作成方法'
 nav_title: 'レイアウトとページ'
-description: '最初のページとレイアウトを作成し、それらをリンクします。'
+description: '最初のページとレイアウトを作成し、それらをリンクする方法を学びます。'
 related:
   title: 'APIリファレンス'
-  description: 'このページで紹介されている機能について詳しくは、APIリファレンスをお読みください。'
+  description: 'このページで言及されている機能について、APIリファレンスを読んでさらに学びましょう。'
   links:
-    - app/api-reference/file-conventions/layout
-    - app/api-reference/file-conventions/page
-    - app/api-reference/components/link
+    - 'app/api-reference/file-conventions/layout'
+    - 'app/api-reference/file-conventions/page'
+    - 'app/api-reference/components/link'
 ---
 
-Next.jsは**ファイルシステムベースのルーティング**を使用しており、フォルダとファイルを使用してルートを定義できます。このページでは、レイアウトとページの作成方法、およびそれらをリンクする方法を説明します。
+Next.jsは**ファイルシステムベースのルーティング**を使用しており、フォルダとファイルを使ってルートを定義できます。このページでは、レイアウトとページの作成方法、およびそれらをリンクする方法を案内します。
 
 ## ページの作成 {#creating-a-page}
 
-**ページ**は特定のルートでレンダリングされるUIです。ページを作成するには、`app`ディレクトリ内に[`page`ファイル](/docs/app/api-reference/file-conventions/page)を追加し、Reactコンポーネントをデフォルトエクスポートします。たとえば、インデックスページ（`/`）を作成するには：
+**ページ**は特定のルートでレンダリングされるUIです。ページを作成するには、`app`ディレクトリ内に[`page`ファイル](/docs/app/api-reference/file-conventions/page)を追加し、Reactコンポーネントをデフォルトエクスポートします。たとえば、インデックスページ（`/`）を作成するには以下のようにします：
 
 <Image
   alt="page.js 特殊ファイル"
@@ -48,9 +48,9 @@ export default function Page() {
 
 ## レイアウトの作成 {#creating-a-layout}
 
-レイアウトは、複数のページ間で**共有**されるUIです。ナビゲーション時にレイアウトは状態を保持し、インタラクティブなままで、再レンダリングされません。
+レイアウトは複数のページ間で**共有**されるUIです。ナビゲーション時にレイアウトは状態を保持し、インタラクティブなままで、再レンダリングされません。
 
-レイアウトを定義するには、[`layout`ファイル](/docs/app/api-reference/file-conventions/layout)からReactコンポーネントをデフォルトエクスポートします。コンポーネントは、ページまたは別の[レイアウト](#nesting-layouts)となる`children`プロップを受け入れる必要があります。
+レイアウトを定義するには、[`layout`ファイル](/docs/app/api-reference/file-conventions/layout)からReactコンポーネントをデフォルトエクスポートします。このコンポーネントは、ページまたは別の[レイアウト](#nesting-layouts)となる`children` propを受け取る必要があります。
 
 たとえば、インデックスページを子として受け入れるレイアウトを作成するには、`app`ディレクトリ内に`layout`ファイルを追加します：
 
@@ -103,7 +103,7 @@ export default function DashboardLayout({ children }) {
 </TabItem>
 </Tabs>
 
-上記のレイアウトは、`app`ディレクトリのルートに定義されているため、[root レイアウト](/docs/app/api-reference/file-conventions/layout#root-layouts)と呼ばれます。root レイアウトは**必須**であり、`html`および`body`タグを含める必要があります。
+上記のレイアウトは、`app`ディレクトリのrootに定義されているため、[root レイアウト](/docs/app/api-reference/file-conventions/layout#root-layouts)と呼ばれます。root レイアウトは**必須**であり、`html`および`body`タグを含める必要があります。
 
 ## ネストされたルートの作成 {#creating-a-nested-route}
 
@@ -115,10 +115,10 @@ export default function DashboardLayout({ children }) {
 
 Next.jsでは：
 
-- **フォルダ**は、URLセグメントにマッピングされるルートセグメントを定義するために使用されます。
+- **フォルダ**は、URLセグメントにマップされるルートセグメントを定義するために使用されます。
 - **ファイル**（`page`や`layout`など）は、セグメントに表示されるUIを作成するために使用されます。
 
-ネストされたルートを作成するには、フォルダを互いにネストできます。たとえば、`/blog`のルートを追加するには、`app`ディレクトリに`blog`というフォルダを作成します。次に、`/blog`を公開するには、`page`ファイルを追加します：
+ネストされたルートを作成するには、フォルダを互いにネストできます。たとえば、`/blog`のルートを追加するには、`app`ディレクトリに`blog`というフォルダを作成します。次に、`/blog`を公開アクセス可能にするために、`page.tsx`ファイルを追加します：
 
 <Image
   alt="blogフォルダとpage.jsファイルを示すファイル階層"
@@ -132,6 +132,7 @@ Next.jsでは：
 <TabItem value="tsx" label="TypeScript">
 
 ```tsx title="app/blog/page.tsx" switcher
+// ダミーインポート
 import { getPosts } from '@/lib/posts'
 import { Post } from '@/ui/post'
 
@@ -154,6 +155,7 @@ export default async function Page() {
 <TabItem value="jsx" label="JavaScript">
 
 ```jsx title="app/blog/[slug]/page.js" switcher
+// ダミーインポート
 import { getPosts } from '@/lib/posts'
 import { Post } from '@/ui/post'
 
@@ -173,10 +175,10 @@ export default async function Page() {
 </TabItem>
 </Tabs>
 
-フォルダをネストし続けて、ネストされたルートを作成できます。たとえば、特定のブログ投稿のルートを作成するには、`blog`内に新しい`[slug]`フォルダを作成し、`page`ファイルを追加します：
+フォルダをさらにネストして、ネストされたルートを作成し続けることができます。たとえば、特定のブログ投稿のルートを作成するには、`blog`内に新しい`[slug]`フォルダを作成し、`page`ファイルを追加します：
 
 <Image
-  alt="slugフォルダとpage.jsファイルをネストしたblogフォルダを示すファイル階層"
+  alt="blogフォルダにネストされたslugフォルダとpage.jsファイルを示すファイル階層"
   srcLight="/docs/light/blog-post-nested-route.png"
   srcDark="/docs/dark/blog-post-nested-route.png"
   width="1600"
@@ -208,16 +210,16 @@ export default function Page() {
 </TabItem>
 </Tabs>
 
-> **Good to know**: フォルダ名を角括弧で囲む（例：`[slug]`）と、データから複数のページを生成するための特別な[dynamic route segment](/docs/app/building-your-application/routing/dynamic-routes)が作成されます。これは、ブログ投稿や商品ページなどに便利です。
+フォルダ名を角括弧で囲む（例：`[slug]`）と、[dynamic route segment](/docs/app/building-your-application/routing/dynamic-routes)が作成され、データから複数のページを生成するために使用されます。例：ブログ投稿、商品ページなど。
 
 ## レイアウトのネスト {#nesting-layouts}
 
-デフォルトでは、フォルダ階層内のレイアウトもネストされており、`children`プロップを介して子レイアウトをラップします。特定のルートセグメント（フォルダ）内に`layout`を追加することで、レイアウトをネストできます。
+デフォルトでは、フォルダ階層内のレイアウトもネストされており、`children` propを介して子レイアウトをラップします。特定のルートセグメント（フォルダ）内に`layout`を追加することで、レイアウトをネストできます。
 
 たとえば、`/blog`ルートのレイアウトを作成するには、`blog`フォルダ内に新しい`layout`ファイルを追加します。
 
 <Image
-  alt="root レイアウトがblogレイアウトをラップしているファイル階層"
+  alt="rootレイアウトがblogレイアウトをラップしているファイル階層"
   srcLight="/docs/light/nested-layouts.png"
   srcDark="/docs/dark/nested-layouts.png"
   width="1600"
@@ -253,9 +255,9 @@ export default function BlogLayout({ children }) {
 
 ## ページ間のリンク {#linking-between-pages}
 
-ルート間をナビゲートするには、[`<Link>`コンポーネント](/docs/app/api-reference/components/link)を使用できます。`<Link>`は、HTMLの`<a>`タグを拡張してプリフェッチとクライアントサイドナビゲーションを提供する、Next.jsの組み込みコンポーネントです。
+ルート間をナビゲートするには、[`<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の組み込みコンポーネントです。
 
-たとえば、ブログ投稿のリストを生成するには、`next/link`から`<Link>`をインポートし、コンポーネントに`href`プロップを渡します：
+たとえば、ブログ投稿のリストを生成するには、`next/link`から`<Link>`をインポートし、コンポーネントに`href` propを渡します：
 
 <Tabs>
 <TabItem value="tsx" label="TypeScript">