Skip to content

konjacbot: sync docs@8754ab0 #385

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

konjacbot: sync docs@8754ab0 #385

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
182 changes: 87 additions & 95 deletions docs/01-app/01-getting-started/01-installation.mdx
View file
Open in desktop

Large diffs are not rendered by default.

174 changes: 117 additions & 57 deletions docs/01-app/01-getting-started/02-project-structure.mdx
View file
Open in desktop

Large diffs are not rendered by default.

50 changes: 26 additions & 24 deletions docs/01-app/01-getting-started/03-layouts-and-pages.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@ title: 'レイアウトとページの作成方法'
nav_title: 'レイアウトとページ'
description: '最初のページとレイアウトを作成し、それらをリンクします。'
related:
title: 'APIリファレンス'
description: 'このページで紹介されている機能について詳しくは、APIリファレンスをお読みください。'
title: '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}

Expand Down Expand Up @@ -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`ファイルを追加します：

Expand All @@ -74,8 +74,8 @@ export default function DashboardLayout({
return (
<html lang="en">
<body>
{/* レイアウトUI */}
{/* ページまたはネストされたレイアウトをレンダリングしたい場所にchildrenを配置 */}
{/* レイアウト UI */}
{/* ページまたはネストされたレイアウトをレンダリングしたい場所に children を配置 */}
<main>{children}</main>
</body>
</html>
Expand All @@ -91,8 +91,8 @@ export default function DashboardLayout({ children }) {
return (
<html lang="en">
<body>
{/* レイアウトUI */}
{/* ページまたはネストされたレイアウトをレンダリングしたい場所にchildrenを配置 */}
{/* レイアウト UI */}
{/* ページまたはネストされたレイアウトをレンダリングしたい場所に children を配置 */}
<main>{children}</main>
</body>
</html>
Expand All @@ -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}

Expand All @@ -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ファイルを示すファイル階層"
Expand All @@ -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'

Expand All @@ -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'

Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -249,13 +251,13 @@ export default function BlogLayout({ children }) {
</TabItem>
</Tabs>

上記の2つのレイアウトを組み合わせると、root レイアウト（`app/layout.js`）がブログレイアウト（`app/blog/layout.js`）をラップし、ブログ（`app/blog/page.js`）およびブログ投稿ページ（`app/blog/[slug]/page.js`）をラップします。
上記の2つのレイアウトを組み合わせると、root レイアウト（`app/layout.js`）がブログレイアウト（`app/blog/layout.js`）をラップし、ブログ（`app/blog/page.js`）とブログ投稿ページ（`app/blog/[slug]/page.js`）をラップします。

## ページ間のリンク {#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">
Expand Down Expand Up @@ -302,4 +304,4 @@ export default async function Post({ post }) {
</TabItem>
</Tabs>

`<Link>`は、Next.jsアプリケーション内でルート間をナビゲートするための主要で推奨される方法です。ただし、より高度なナビゲーションには[`useRouter`フック](/docs/app/api-reference/functions/use-router)を使用することもできます。
`<Link>`は、Next.jsアプリケーション内でルート間をナビゲートするための主要で推奨される方法です。ただし、より高度なナビゲーションには、[`useRouter`フック](/docs/app/api-reference/functions/use-router)を使用することもできます。
Loading