Skip to content

Commit e2ffc96

Browse files
konjacbot: sync docs@581975d (#387)
* sync docs@581975d * chore: fix (#387) --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: ytori <[email protected]>
1 parent adb48eb commit e2ffc96

File tree

176 files changed

+1216
-1012
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

176 files changed

+1216
-1012
lines changed

docs/01-app/01-getting-started/01-installation.mdx

Lines changed: 90 additions & 98 deletions
Large diffs are not rendered by default.

docs/01-app/01-getting-started/02-project-structure.mdx

Lines changed: 111 additions & 51 deletions
Large diffs are not rendered by default.

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

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
---
22
title: 'レイアウトとページの作成方法'
33
nav_title: 'レイアウトとページ'
4-
description: '最初のページとレイアウトを作成し、それらをリンクします'
4+
description: '最初のページとレイアウトを作成し、それらをリンクする方法を学びます'
55
related:
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

116116
Next.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+
// ダミーインポート
135136
import { getPosts } from '@/lib/posts'
136137
import { 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+
// ダミーインポート
157159
import { getPosts } from '@/lib/posts'
158160
import { 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

Comments
 (0)