diff --git a/docs/01-app/01-getting-started/01-installation.mdx b/docs/01-app/01-getting-started/01-installation.mdx
index c977dbf1..c2ee32ef 100644
--- a/docs/01-app/01-getting-started/01-installation.mdx
+++ b/docs/01-app/01-getting-started/01-installation.mdx
@@ -1,25 +1,27 @@
---
-title: '新しい Next.js プロジェクトをセットアップする方法'
+title: '新しい Next.js プロジェクトのセットアップ方法'
nav_title: 'インストール'
-description: '`create-next-app` CLIを使用して新しい Next.js アプリケーションを作成し、TypeScript、ESLint、およびモジュールパスエイリアスを設定します。'
+description: '`create-next-app` CLIを使用して新しい Next.js アプリケーションを作成し、TypeScript、ESLint、モジュールパスエイリアスを設定します。'
---
{/* このドキュメントの内容は、app router と pages router の間で共有されています。Pages Router に特有のコンテンツを追加するには、`Content` コンポーネントを使用できます。共有コンテンツはコンポーネントでラップしないでください。 */}
## システム要件 {#system-requirements}
+始める前に、システムが次の要件を満たしていることを確認してください:
+
- [Node.js 18.18](https://nodejs.org/) 以降
-- macOS、Windows（WSLを含む）、Linuxがサポートされています
+- macOS、Windows（WSLを含む）、またはLinux
## 自動インストール {#automatic-installation}
-新しい Next.js アプリを始めるには、すべてを自動的にセットアップする [`create-next-app`](/docs/app/api-reference/cli/create-next-app) を使用することをお勧めします。プロジェクトを作成するには、次のコマンドを実行します：
+新しい Next.js アプリを作成する最も簡単な方法は、すべてを自動的にセットアップしてくれる [`create-next-app`](/docs/app/api-reference/cli/create-next-app) を使用することです。プロジェクトを作成するには、次のコマンドを実行します:
```bash title="Terminal"
npx create-next-app@latest
```
-インストール時に、次のプロンプトが表示されます：
+インストール時に、次のプロンプトが表示されます:
```txt title="Terminal"
What is your project named? my-app
@@ -33,17 +35,17 @@ Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*
```
-プロンプトの後、[`create-next-app`](/docs/app/api-reference/cli/create-next-app) はプロジェクト名のフォルダーを作成し、必要な依存関係をインストールします。
+プロンプトの後、[`create-next-app`](/docs/app/api-reference/cli/create-next-app) はプロジェクト名のフォルダを作成し、必要な依存関係をインストールします。
## 手動インストール {#manual-installation}
-新しい Next.js アプリを手動で作成するには、必要なパッケージをインストールします：
+新しい Next.js アプリを手動で作成するには、必要なパッケージをインストールします:
```bash title="Terminal"
npm install next@latest react@latest react-dom@latest
```
-`package.json` ファイルを開き、次の `scripts` を追加します：
+次に、以下のスクリプトを `package.json` ファイルに追加します:
```json title="package.json"
{
@@ -56,30 +58,20 @@ npm install next@latest react@latest react-dom@latest
}
```
-これらのスクリプトは、アプリケーション開発のさまざまな段階を指します：
+これらのスクリプトは、アプリケーション開発のさまざまな段階を指します:
-- `dev`: Next.js を開発モードで開始するために [`next dev`](/docs/app/api-reference/cli/next#next-dev-options) を実行します
-- `build`: 本番使用のためにアプリケーションをビルドするために [`next build`](/docs/app/api-reference/cli/next#next-build-options) を実行します
-- `start`: Next.js の本番サーバーを開始するために [`next start`](/docs/app/api-reference/cli/next#next-start-options) を実行します
-- `lint`: Next.js の組み込み ESLint 設定をセットアップするために [`next lint`](/docs/app/api-reference/cli/next#next-lint-options) を実行します
+- `next dev`: 開発サーバーを起動します。
+- `next build`: アプリケーションを本番用にビルドします。
+- `next start`: 本番サーバーを起動します。
+- `next lint`: ESLint を実行します。
-### `app` ディレクトリを作成する {#create-the-app-directory}
+### `app` ディレクトリの作成 {#create-the-app-directory}
Next.js はファイルシステムルーティングを使用しているため、アプリケーション内のルートはファイルの構造によって決まります。
-`app` フォルダーを作成し、`layout.tsx` と `page.tsx` ファイルを追加します。これらはユーザーがアプリケーションの root (`/`) を訪れたときにレンダリングされます。
-
-
-
-`app/layout.tsx` 内に必要な `` と `` タグを含む [root レイアウト](/docs/app/building-your-application/routing/layouts-and-templates#root-layout-required) を作成します：
+`app` フォルダを作成します。次に、`app` 内に `layout.tsx` ファイルを作成します。このファイルは [root レイアウト](/docs/app/api-reference/file-conventions/layout#root-layouts) です。これは必須であり、`` と `` タグを含める必要があります。
@@ -114,7 +106,7 @@ export default function RootLayout({ children }) {
-最後に、初期コンテンツを含むホームページ `app/page.tsx` を作成します：
+初期コンテンツを含むホームページ `app/page.tsx` を作成します:
@@ -137,20 +129,30 @@ export default function Page() {
+`layout.tsx` と `page.tsx` の両方が、ユーザーがアプリケーションの root (`/`) を訪れたときにレンダリングされます。
+
+
+
> **Good to know**:
>
-> - `layout.tsx` を作成するのを忘れた場合、`next dev` で開発サーバーを実行するときに Next.js が自動的にこのファイルを作成します。
-> - プロジェクトの root に [`src` ディレクトリ](/docs/app/building-your-application/configuring/src-directory) を使用して、アプリケーションのコードを設定ファイルから分離することができます。
+> - root レイアウトの作成を忘れた場合、`next dev` で開発サーバーを実行すると、Next.js が自動的にこのファイルを作成します。
+> - プロジェクトの root に [`src` ディレクトリ](/docs/app/building-your-application/configuring/src-directory) を使用して、アプリケーションのコードを設定ファイルから分離することもできます。
-### `pages` ディレクトリを作成する {#create-the-pages-directory}
+### `pages` ディレクトリの作成 {#create-the-pages-directory}
Next.js はファイルシステムルーティングを使用しているため、アプリケーション内のルートはファイルの構造によって決まります。
-プロジェクトの root に `pages` ディレクトリを作成します。次に、`pages` フォルダー内に `index.tsx` ファイルを追加します。これがホームページ (`/`) になります：
+プロジェクトの root に `pages` ディレクトリを作成します。次に、`pages` フォルダ内に `index.tsx` ファイルを追加します。これがホームページ (`/`) になります:
@@ -173,7 +175,7 @@ export default function Page() {
-次に、`pages/` 内に `_app.tsx` ファイルを追加して、グローバルレイアウトを定義します。 [カスタム App ファイル](https://nextjs.org/docs/canary/pages/building-your-application/routing/custom-app) について詳しく学びましょう。
+次に、グローバルレイアウトを定義するために `pages/` 内に `_app.tsx` ファイルを追加します。[カスタム App ファイル](https://nextjs.org/docs/canary/pages/building-your-application/routing/custom-app)について詳しく学びましょう。
@@ -198,7 +200,7 @@ export default function App({ Component, pageProps }) {
-最後に、`pages/` 内に `_document.tsx` ファイルを追加して、サーバーからの初期応答を制御します。 [カスタム Document ファイル](https://nextjs.org/docs/canary/pages/building-your-application/routing/custom-document) について詳しく学びましょう。
+最後に、サーバーからの初期応答を制御するために `pages/` 内に `_document.tsx` ファイルを追加します。[カスタム Document ファイル](https://nextjs.org/docs/canary/pages/building-your-application/routing/custom-document)について詳しく学びましょう。
@@ -243,53 +245,78 @@ export default function Document() {
-### `public` フォルダーを作成する（オプション） {#create-the-public-folder-optional}
+### `public` フォルダの作成（オプション） {#create-the-public-folder-optional}
+
+プロジェクトの root に [`public` フォルダ](/docs/app/building-your-application/optimizing/static-assets) を作成して、画像やフォントなどの静的アセットを保存します。`public` 内のファイルは、ベースURL (`/`) から始まるコードで参照できます。
+
+これらのアセットは root パス (`/`) を使用して参照できます。たとえば、`public/profile.png` は `/profile.png` として参照できます:
+
+
+
+
+```tsx title="app/page.tsx" highlight={4} switcher
+import Image from 'next/image'
+
+export default function Page() {
+ return
+}
+```
+
+
+
+
+```jsx title="app/page.js" highlight={4} switcher
+import Image from 'next/image'
+
+export default function Page() {
+ return
+}
+```
-プロジェクトの root に [`public` フォルダー](/docs/app/building-your-application/optimizing/static-assets) を作成して、画像やフォントなどの静的アセットを保存することができます。`public` 内のファイルは、ベースURL (`/`) から始めてコードで参照できます。
+
+
-## 開発サーバーを実行する {#run-the-development-server}
+## 開発サーバーの実行 {#run-the-development-server}
-1. `npm run dev` を実行して開発サーバーを開始します。
+1. `npm run dev` を実行して開発サーバーを起動します。
2. `http://localhost:3000` にアクセスしてアプリケーションを表示します。
3. `app/page.tsx` `pages/index.tsx` ファイルを編集して保存し、ブラウザで更新された結果を確認します。
-## TypeScript をセットアップする {#set-up-typescript}
+## TypeScript のセットアップ {#set-up-typescript}
-> 最低 TypeScript バージョン: `v4.5.2`
+> 最小 TypeScript バージョン: `v4.5.2`
-Next.js には組み込みの TypeScript サポートがあります。プロジェクトに TypeScript を追加するには、ファイルを `.ts` / `.tsx` にリネームします。`next dev` を実行すると、Next.js は必要な依存関係を自動的にインストールし、推奨される設定オプションを含む `tsconfig.json` ファイルを追加します。
+Next.js には組み込みの TypeScript サポートがあります。プロジェクトに TypeScript を追加するには、ファイルを `.ts` / `.tsx` にリネームして `next dev` を実行します。Next.js は必要な依存関係を自動的にインストールし、推奨される設定オプションを含む `tsconfig.json` ファイルを追加します。
### IDE プラグイン {#ide-plugin}
-Next.js にはカスタム TypeScript プラグインと型チェッカーが含まれており、VSCode や他のコードエディターで高度な型チェックと自動補完を利用できます。
+Next.js にはカスタム TypeScript プラグインと型チェッカーが含まれており、VSCode や他のコードエディタで高度な型チェックや自動補完を利用できます。
-VS Code でプラグインを有効にするには：
+VS Code でプラグインを有効にするには:
1. コマンドパレットを開く（`Ctrl/⌘` + `Shift` + `P`）
2. 「TypeScript: Select TypeScript Version」を検索
3. 「Use Workspace Version」を選択
-これで、ファイルを編集するときにカスタムプラグインが有効になります。`next build` を実行すると、カスタム型チェッカーが使用されます。
-
-プロジェクトで TypeScript を使用する方法については、[TypeScript 設定](/docs/app/api-reference/config/next-config-js/typescript) ページを参照してください。
+詳細は [TypeScript リファレンス](/docs/app/api-reference/config/next-config-js/typescript) ページを参照してください。
-## ESLint をセットアップする {#set-up-eslint}
+## ESLint のセットアップ {#set-up-eslint}
-Next.js には組み込みの ESLint があり、新しいプロジェクトを `create-next-app` で作成するときに必要なパッケージを自動的にインストールし、適切な設定を行います。
+Next.js には組み込みの ESLint が含まれています。`create-next-app` で新しいプロジェクトを作成すると、必要なパッケージが自動的にインストールされ、適切な設定が行われます。
-既存のプロジェクトに ESLint を追加するには、`package.json` に `next lint` をスクリプトとして追加します：
+既存のプロジェクトに ESLint を手動で追加するには、`package.json` に `next lint` をスクリプトとして追加します:
```json title="package.json"
{
@@ -299,13 +326,13 @@ Next.js には組み込みの ESLint があり、新しいプロジェクトを
}
```
-次に、`npm run lint` を実行すると、インストールと設定プロセスが案内されます。
+次に、`npm run lint` を実行すると、インストールと設定のプロセスが案内されます。
```bash title="Terminal"
npm run lint
```
-次のようなプロンプトが表示されます：
+次のようなプロンプトが表示されます:
> ? How would you like to configure ESLint?
>
@@ -313,29 +340,31 @@ npm run lint
> Base
> Cancel
-- **Strict**: Next.js の基本 ESLint 設定に加えて、より厳しい Core Web Vitals ルールセットを含みます。ESLint を初めて設定する開発者に推奨される設定です。
-- **Base**: Next.js の基本 ESLint 設定を含みます。
-- **Cancel**: ESLint 設定を含みません。独自のカスタム ESLint 設定を設定する予定がある場合にのみ、このオプションを選択してください。
+- **Strict**: Next.js の基本的な ESLint 設定に加え、より厳格な Core Web Vitals ルールセットを含みます。初めて ESLint を設定する開発者に推奨される設定です。
+- **Base**: Next.js の基本的な ESLint 設定を含みます。
+- **Cancel**: 設定をスキップします。独自のカスタム ESLint 設定を行う予定の場合、このオプションを選択します。
-2つの設定オプションのいずれかが選択されると、Next.js は自動的に `eslint` と `eslint-config-next` をアプリケーションの依存関係としてインストールし、選択した設定を含む `.eslintrc.json` ファイルをプロジェクトの root に作成します。
+`Strict` または `Base` が選択されると、Next.js は自動的に `eslint` と `eslint-config-next` をアプリケーションの依存関係としてインストールし、選択した設定を含む `.eslintrc.json` ファイルをプロジェクトの root に作成します。
ESLint を実行してエラーをキャッチしたいときは、`next lint` を実行できます。ESLint が設定されると、ビルド（`next build`）のたびに自動的に実行されます。エラーはビルドを失敗させますが、警告は失敗しません。
-プロジェクトで ESLint を設定する方法については、[ESLint プラグイン](/docs/app/api-reference/config/next-config-js/eslint) ページを参照してください。
+詳細は [ESLint プラグイン](/docs/app/api-reference/config/next-config-js/eslint) ページを参照してください。
-## 絶対インポートとモジュールパスエイリアスを設定する {#set-up-absolute-imports-and-module-path-aliases}
+## 絶対インポートとモジュールパスエイリアスの設定 {#set-up-absolute-imports-and-module-path-aliases}
-Next.js には、`tsconfig.json` および `jsconfig.json` ファイルの `"paths"` および `"baseUrl"` オプションのサポートが組み込まれています。これらのオプションを使用すると、プロジェクトディレクトリを絶対パスにエイリアス化し、モジュールのインポートを簡単にします。例えば：
+Next.js には `tsconfig.json` および `jsconfig.json` ファイルの `"paths"` および `"baseUrl"` オプションのサポートが組み込まれています。
+
+これらのオプションを使用すると、プロジェクトディレクトリを絶対パスにエイリアス化でき、モジュールのインポートがより簡単でクリーンになります。たとえば:
```jsx
-// 以前
+// Before
import { Button } from '../../../components/button'
-// 以降
+// After
import { Button } from '@/components/button'
```
-絶対インポートを設定するには、`tsconfig.json` または `jsconfig.json` ファイルに `baseUrl` 設定オプションを追加します。例えば：
+絶対インポートを設定するには、`tsconfig.json` または `jsconfig.json` ファイルに `baseUrl` 設定オプションを追加します。たとえば:
```json title="tsconfig.json or jsconfig.json"
{
@@ -347,7 +376,7 @@ import { Button } from '@/components/button'
`baseUrl` パスの設定に加えて、`"paths"` オプションを使用してモジュールパスを `"alias"` することができます。
-例えば、次の設定は `@/components/*` を `components/*` にマッピングします：
+たとえば、次の設定は `@/components/*` を `components/*` にマップします:
```json title="tsconfig.json or jsconfig.json"
{
@@ -361,41 +390,4 @@ import { Button } from '@/components/button'
}
```
-各 `"paths"` は `baseUrl` の場所に対して相対的です。例えば：
-
-
-
-
-```tsx title="src/app/page.tsx" switcher
-import Button from '@/components/button'
-import '@/styles/styles.css'
-
-export default function HomePage() {
- return (
-
-
Hello World
-
-
- )
-}
-```
-
-
-
-
-```jsx title="src/app/page.js" switcher
-import Button from '@/components/button'
-import '@/styles/styles.css'
-
-export default function HomePage() {
- return (
-
-
Hello World
-
-
- )
-}
-```
-
-
-
+各 `"paths"` は `baseUrl` の場所に対して相対的です。
diff --git a/docs/01-app/01-getting-started/02-project-structure.mdx b/docs/01-app/01-getting-started/02-project-structure.mdx
index 513f00ba..a178d387 100644
--- a/docs/01-app/01-getting-started/02-project-structure.mdx
+++ b/docs/01-app/01-getting-started/02-project-structure.mdx
@@ -4,7 +4,7 @@ nav_title: 'プロジェクト構造'
description: 'Next.jsにおけるフォルダとファイルの規約の概要と、プロジェクトの組織化方法について。'
---
-このページでは、Next.jsにおけるフォルダとファイルの規約の概要と、プロジェクトを組織化するためのヒントを提供します。
+このページでは、Next.jsにおける**すべての**フォルダとファイルの規約の概要と、プロジェクトを組織化するための推奨事項を提供します。
## フォルダとファイルの規約 {#folder-and-file-conventions}
@@ -44,7 +44,7 @@ description: 'Next.jsにおけるフォルダとファイルの規約の概要
| [`.env.development`](/docs/app/building-your-application/configuring/environment-variables) | 開発環境変数 |
| [`.eslintrc.json`](/docs/app/api-reference/config/eslint) | ESLintの設定ファイル |
| `.gitignore` | 無視するGitファイルとフォルダ |
-| `next-env.d.ts` | Next.jsのTypeScript宣言ファイル |
+| `next-env.d.ts` | Next.js用のTypeScript宣言ファイル |
| `tsconfig.json` | TypeScriptの設定ファイル |
| `jsconfig.json` | JavaScriptの設定ファイル |
@@ -81,10 +81,10 @@ description: 'Next.jsにおけるフォルダとファイルの規約の概要
### ルートグループとプライベートフォルダ {#route-groups-and-private-folders}
-| | |
-| --------------------------------------------------------------------------------- | -------------------------------------------------------- |
-| [`(folder)`](/docs/app/building-your-application/routing/route-groups#convention) | ルーティングに影響を与えずにルートをグループ化 |
-| [`_folder`](#private-folders) | フォルダとそのすべての子セグメントをルーティングから除外 |
+| | |
+| --------------------------------------------------------------------------------- | ---------------------------------------------------- |
+| [`(folder)`](/docs/app/building-your-application/routing/route-groups#convention) | ルーティングに影響を与えずにルートをグループ化 |
+| [`_folder`](#private-folders) | フォルダとすべての子セグメントをルーティングから除外 |
### パラレルルートとインターセプトルート {#parallel-and-intercepted-routes}
@@ -168,9 +168,13 @@ description: 'Next.jsにおけるフォルダとファイルの規約の概要
-## コンポーネントの階層 {#component-hierarchy}
+## プロジェクトの組織化 {#organizing-your-project}
+
+Next.jsは、プロジェクトファイルの整理や配置について特に意見を持ちませんが、プロジェクトを整理するためのいくつかの機能を提供しています。
+
+### コンポーネント階層 {#component-hierarchy}
-ルートセグメントの特別なファイルで定義されたReactコンポーネントは、特定の階層でレンダリングされます：
+特別なファイルで定義されたコンポーネントは、特定の階層でレンダリングされます：
- `layout.js`
- `template.js`
@@ -187,7 +191,7 @@ description: 'Next.jsにおけるフォルダとファイルの規約の概要
height="643"
/>
-ネストされたルートでは、セグメントのコンポーネントは親セグメントのコンポーネントの**内側**にネストされます。
+コンポーネントはネストされたルートで再帰的にレンダリングされ、ルートセグメントのコンポーネントは親セグメントのコンポーネントの**内側**にネストされます。
-## プロジェクトの組織化 {#organizing-your-project}
-
-[フォルダとファイルの規約](/docs/app/getting-started/project-structure)とは別に、Next.jsはプロジェクトファイルの組織化や配置について特に意見を持っていません。しかし、プロジェクトを組織化するためのいくつかの機能を提供しています。
-
### コロケーション {#colocation}
`app`ディレクトリでは、ネストされたフォルダがルート構造を定義します。各フォルダは、URLパスの対応するセグメントにマッピングされるルートセグメントを表します。
-しかし、ルート構造がフォルダを通じて定義されているにもかかわらず、`page.js`または`route.js`ファイルがルートセグメントに追加されるまで、ルートは**公開されません**。
+ただし、ルート構造はフォルダを通じて定義されますが、`page.js`または`route.js`ファイルがルートセグメントに追加されるまで、ルートは**公開されません**。
-そして、ルートが公開されるときでも、クライアントに送信されるのは`page.js`または`route.js`によって返される**コンテンツのみ**です。
+そして、ルートが公開されると、`page.js`または`route.js`によって返される**コンテンツのみ**がクライアントに送信されます。
-これは、`app`ディレクトリ内のルートセグメント内に**安全にプロジェクトファイルを配置**でき、誤ってルーティングされることがないことを意味します。
+これは、`app`ディレクトリ内の**プロジェクトファイル**が、誤ってルート化されることなく、ルートセグメント内に**安全にコロケーション**できることを意味します。
-> **Good to know**:
->
-> - プロジェクトファイルを`app`に配置することはできますが、必ずしもそうする必要はありません。必要に応じて、[それらを`app`ディレクトリの外に保持する](#store-project-files-outside-of-app)こともできます。
+> **Good to know**: `app`内にプロジェクトファイルをコロケーションすることは**可能**ですが、必ずしもそうする必要はありません。必要に応じて、[それらを`app`ディレクトリの外に保管する](#store-project-files-outside-of-app)こともできます。
### プライベートフォルダ {#private-folders}
@@ -253,24 +251,24 @@ description: 'Next.jsにおけるフォルダとファイルの規約の概要
height="849"
/>
-`app`ディレクトリ内のファイルは[デフォルトで安全に配置できる](#colocation)ため、コロケーションにはプライベートフォルダは必要ありません。しかし、以下のような場合に役立ちます：
+`app`ディレクトリ内のファイルは[デフォルトで安全にコロケーションできる](#colocation)ため、コロケーションにはプライベートフォルダは必要ありません。ただし、以下の目的で役立つことがあります：
- UIロジックをルーティングロジックから分離する
-- プロジェクト全体とNext.jsエコシステム内で内部ファイルを一貫して整理する
-- コードエディタでファイルをソートおよびグループ化する
-- 将来のNext.jsファイル規約との潜在的な命名の競合を回避する
+- プロジェクト全体およびNext.jsエコシステム内で内部ファイルを一貫して整理する
+- コードエディタでファイルを整理およびグループ化する
+- 将来のNext.jsファイル規約との潜在的な命名競合を回避する
> **Good to know**:
>
> - フレームワークの規約ではありませんが、プライベートフォルダの外のファイルを同じアンダースコアパターンを使用して「プライベート」としてマークすることも検討できます。
> - フォルダ名の前に`%5F`（アンダースコアのURLエンコード形式）を付けることで、アンダースコアで始まるURLセグメントを作成できます：`%5FfolderName`。
-> - プライベートフォルダを使用しない場合は、Next.jsの[特別なファイル規約](/docs/app/getting-started/project-structure#routing-files)を知っておくと、予期しない命名の競合を防ぐのに役立ちます。
+> - プライベートフォルダを使用しない場合は、Next.jsの[特別なファイル規約](/docs/app/getting-started/project-structure#routing-files)を知っておくと、予期しない命名競合を防ぐのに役立ちます。
### ルートグループ {#route-groups}
ルートグループは、フォルダを括弧で囲むことで作成できます：`(folderName)`
-これは、フォルダが組織的な目的であり、ルートのURLパスに**含まれるべきではない**ことを示します。
+これは、フォルダが組織化の目的であり、ルートのURLパスに**含まれるべきではない**ことを示します。
-ルートグループは以下のような場合に役立ちます：
+ルートグループは以下の目的で役立ちます：
-- [URLパスに影響を与えずにルートをグループ化する](/docs/app/building-your-application/routing/route-groups#organize-routes-without-affecting-the-url-path) 例：サイトセクション、意図、チームごとに
+- サイトのセクション、意図、またはチームごとにルートを整理する。例：マーケティングページ、管理ページなど
- 同じルートセグメントレベルでネストされたレイアウトを有効にする：
- - [複数のroot レイアウトを含む、同じセグメントで複数のネストされたレイアウトを作成する](/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts)
- - [共通セグメント内のルートのサブセットにレイアウトを追加する](/docs/app/building-your-application/routing/route-groups#opting-specific-segments-into-a-layout)
+ - [同じセグメントで複数のネストされたレイアウトを作成し、複数のrootレイアウトを含む](#creating-multiple-root-layouts)
+ - [共通セグメント内のルートのサブセットにレイアウトを追加する](#opting-specific-segments-into-a-layout)
### `src`ディレクトリ {#src-directory}
-Next.jsは、アプリケーションコード（`app`を含む）をオプションの[`src`ディレクトリ](/docs/app/building-your-application/configuring/src-directory)内に保存することをサポートしています。これにより、アプリケーションコードをプロジェクトの設定ファイルから分離できます。設定ファイルは主にプロジェクトのrootに存在します。
+Next.jsは、アプリケーションコード（`app`を含む）をオプションの[`src`ディレクトリ](/docs/app/building-your-application/configuring/src-directory)内に保存することをサポートしています。これにより、アプリケーションコードがプロジェクトの設定ファイルから分離されます。設定ファイルは主にプロジェクトのrootに存在します。
-### 一般的な戦略 {#common-strategies}
+### 例 {#examples}
-次のセクションでは、一般的な戦略の非常に高レベルな概要を示します。最も簡単な結論は、自分とチームに合った戦略を選び、プロジェクト全体で一貫性を保つことです。
+以下のセクションでは、一般的な戦略の非常に高レベルな概要を示します。最も簡単な結論は、自分やチームに合った戦略を選び、プロジェクト全体で一貫性を保つことです。
> **Good to know**: 以下の例では、`components`と`lib`フォルダを一般的なプレースホルダーとして使用しています。これらの名前には特別なフレームワークの意味はなく、プロジェクトによっては`ui`、`utils`、`hooks`、`styles`などの他のフォルダを使用することがあります。
-#### プロジェクトファイルを`app`の外に保存する {#store-project-files-outside-of-app}
+#### プロジェクトファイルを`app`の外に保管する {#store-project-files-outside-of-app}
この戦略では、すべてのアプリケーションコードをプロジェクトの**root**にある共有フォルダに保存し、`app`ディレクトリを純粋にルーティングの目的で使用します。
-#### プロジェクトファイルを`app`内のトップレベルフォルダに保存する {#store-project-files-in-top-level-folders-inside-of-app}
+#### プロジェクトファイルを`app`内のトップレベルフォルダに保管する {#store-project-files-in-top-level-folders-inside-of-app}
この戦略では、すべてのアプリケーションコードを`app`ディレクトリの**root**にある共有フォルダに保存します。
-#### プロジェクトファイルを機能またはルートごとに分割する {#split-project-files-by-feature-or-route}
+#### 機能またはルートごとにプロジェクトファイルを分割する {#split-project-files-by-feature-or-route}
この戦略では、グローバルに共有されるアプリケーションコードをrootの`app`ディレクトリに保存し、より特定のアプリケーションコードをそれを使用するルートセグメントに**分割**します。
+### URLパスに影響を与えずにルートを整理する {#organize-routes-without-affecting-the-url-path}
+
+URLに影響を与えずにルートを整理するには、関連するルートをまとめて保持するためのグループを作成します。括弧内のフォルダはURLから省略されます（例：`(marketing)`または`(shop)`）。
+
+
+
+`(marketing)`と`(shop)`内のルートは同じURL階層を共有していますが、それぞれのグループ内に`layout.js`ファイルを追加することで、異なるレイアウトを作成できます。
+
+
+
+### 特定のセグメントをレイアウトにオプトインする {#opting-specific-segments-into-a-layout}
+
+特定のルートをレイアウトにオプトインするには、新しいルートグループ（例：`(shop)`）を作成し、同じレイアウトを共有するルート（例：`account`と`cart`）をグループに移動します。グループ外のルート（例：`checkout`）はレイアウトを共有しません。
+
+
+
+### 特定のルートでローディングスケルトンを選択する {#opting-for-loading-skeletons-on-a-specific-route}
+
+特定のルートに`loading.js`ファイルを介して[ローディングスケルトン](/docs/app/building-your-application/routing/loading-ui-and-streaming)を適用するには、新しいルートグループ（例：`/(overview)`）を作成し、そのルートグループ内に`loading.tsx`を移動します。
+
+
+
+これで、`loading.tsx`ファイルはダッシュボード→概要ページにのみ適用され、URLパス構造に影響を与えることなく、他のダッシュボードページには適用されません。
+
+### 複数のrootレイアウトを作成する {#creating-multiple-root-layouts}
+
+複数の[rootレイアウト](/docs/app/api-reference/file-conventions/layout#root-layouts)を作成するには、トップレベルの`layout.js`ファイルを削除し、各ルートグループ内に`layout.js`ファイルを追加します。これは、完全に異なるUIや体験を持つセクションにアプリケーションを分割するのに役立ちます。``と``タグは各rootレイアウトに追加する必要があります。
+
+
+
+上記の例では、`(marketing)`と`(shop)`の両方が独自のrootレイアウトを持っています。
+
diff --git a/docs/01-app/01-getting-started/03-layouts-and-pages.mdx b/docs/01-app/01-getting-started/03-layouts-and-pages.mdx
index b7a6ebb0..885661cd 100644
--- a/docs/01-app/01-getting-started/03-layouts-and-pages.mdx
+++ b/docs/01-app/01-getting-started/03-layouts-and-pages.mdx
@@ -4,14 +4,14 @@ nav_title: 'レイアウトとページ'
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}
@@ -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 }) {
-上記のレイアウトは、`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`ファイルを追加します：
```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() {
```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() {
-フォルダをネストし続けて、ネストされたルートを作成できます。たとえば、特定のブログ投稿のルートを作成するには、`blog`内に新しい`[slug]`フォルダを作成し、`page`ファイルを追加します：
+フォルダをさらにネストして、ネストされたルートを作成し続けることができます。たとえば、特定のブログ投稿のルートを作成するには、`blog`内に新しい`[slug]`フォルダを作成し、`page`ファイルを追加します：
-> **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`ファイルを追加します。
-上記の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}
-ルート間をナビゲートするには、[``コンポーネント](/docs/app/api-reference/components/link)を使用できます。``は、HTMLの``タグを拡張してプリフェッチとクライアントサイドナビゲーションを提供する、Next.jsの組み込みコンポーネントです。
+ルート間をナビゲートするには、[``コンポーネント](/docs/app/api-reference/components/link)を使用できます。``は、HTMLの``タグを拡張して[プリフェッチ](/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`から``をインポートし、コンポーネントに`href`プロップを渡します：
+たとえば、ブログ投稿のリストを生成するには、`next/link`から``をインポートし、コンポーネントに`href` propを渡します：
diff --git a/docs/01-app/01-getting-started/04-images-and-fonts.mdx b/docs/01-app/01-getting-started/04-images-and-fonts.mdx
index 512e5149..01d5ba53 100644
--- a/docs/01-app/01-getting-started/04-images-and-fonts.mdx
+++ b/docs/01-app/01-getting-started/04-images-and-fonts.mdx
@@ -4,34 +4,22 @@ nav_title: '画像とフォント'
description: '画像とフォントの最適化方法を学びましょう。'
related:
title: 'APIリファレンス'
- description: 'このページで言及されている機能について詳しくは、APIリファレンスをお読みください。'
+ description: 'このページで言及されている機能について詳しく知るには、APIリファレンスを参照してください。'
links:
- - app/api-reference/components/font
- - app/api-reference/components/image
+ - 'app/api-reference/components/font'
+ - 'app/api-reference/components/image'
---
-Next.jsには、パフォーマンスとユーザーエクスペリエンスを向上させるための自動画像およびフォント最適化機能が備わっています。このページでは、それらの使い方を説明します。
-
-## 静的アセットの取り扱い {#handling-static-assets}
-
-画像やフォントなどの静的ファイルは、ルートディレクトリ内の`public`というフォルダに保存できます。`public`内のファイルは、ベースURL（`/`）から始まるコードで参照できます。
-
-
+Next.jsには自動的な画像とフォントの最適化機能が備わっています。このページでは、それらの使い方について説明します。
## 画像の最適化 {#optimizing-images}
-Next.jsの[``](/docs/app/building-your-application/optimizing/images)コンポーネントは、HTMLの`![]()
`要素を拡張して以下を提供します：
+Next.jsの[``](/docs/app/building-your-application/optimizing/images)コンポーネントは、HTMLの`![]()
`要素を拡張して以下の機能を提供します：
-- **サイズの最適化：** WebPなどの最新の画像フォーマットを使用して、各デバイスに適したサイズの画像を自動的に提供します
+- **サイズの最適化：** 各デバイスに適したサイズの画像を自動的に提供し、WebPのような最新の画像フォーマットを使用します
- **視覚的安定性：** 画像の読み込み時に[レイアウトシフト](https://web.dev/articles/cls)を自動的に防ぎます
-- **高速なページ読み込み：** ネイティブブラウザの遅延読み込みを使用して、画像がビューポートに入ったときにのみ画像を読み込み、オプションでぼかしプレースホルダーを使用します
-- **アセットの柔軟性：** リモートサーバーに保存されている画像でも、オンデマンドで画像をリサイズします
+- **ページの高速読み込み：** ネイティブブラウザの遅延読み込みを使用して、画像がビューポートに入ったときにのみ読み込み、オプションでぼかしプレースホルダーを使用します
+- **アセットの柔軟性：** リモートサーバーに保存された画像であっても、オンデマンドで画像をリサイズします
``を使用するには、`next/image`からインポートし、コンポーネント内でレンダリングします。
@@ -60,11 +48,19 @@ export default function Page() {
-`src`プロパティは、[ローカル](#local-images)または[リモート](#remote-images)の画像にすることができます。
+`src`プロパティは[ローカル](#local-images)または[リモート](#remote-images)の画像を指定できます。
### ローカル画像 {#local-images}
-ローカル画像を使用するには、[`public`フォルダ](#handling-static-assets)から`.jpg`、`.png`、または`.webp`画像ファイルを`import`します。
+静的ファイル（画像やフォントなど）は、ルートディレクトリの`public`というフォルダに保存できます。`public`内のファイルは、ベースURL（`/`）から始めてコードで参照できます。
+
+
@@ -81,7 +77,7 @@ export default function Page() {
// width={500} 自動的に提供されます
// height={500} 自動的に提供されます
// blurDataURL="data:..." 自動的に提供されます
- // placeholder="blur" // 読み込み中のオプションのぼかし
+ // placeholder="blur" // 読み込み中のぼかしをオプションで表示
/>
)
}
@@ -102,7 +98,7 @@ export default function Page() {
// width={500} 自動的に提供されます
// height={500} 自動的に提供されます
// blurDataURL="data:..." 自動的に提供されます
- // placeholder="blur" // 読み込み中のオプションのぼかし
+ // placeholder="blur" // 読み込み中のぼかしをオプションで表示
/>
)
}
@@ -115,7 +111,7 @@ Next.jsは、インポートされたファイルに基づいて画像の固有
### リモート画像 {#remote-images}
-リモート画像を使用するには、`src`プロパティにURL文字列を指定できます。
+リモート画像を使用するには、`src`プロパティにURL文字列を指定します。
@@ -156,9 +152,9 @@ export default function Page() {
-Next.jsはビルドプロセス中にリモートファイルにアクセスできないため、[`width`](/docs/app/api-reference/components/image#width)、[`height`](/docs/app/api-reference/components/image#height)、およびオプションの[`blurDataURL`](/docs/app/api-reference/components/image#blurdataurl) propsを手動で指定する必要があります。`width`と`height`属性は、画像の正しいアスペクト比を推測し、画像の読み込みによるレイアウトシフトを回避するために使用されます。
+Next.jsはビルドプロセス中にリモートファイルにアクセスできないため、[`width`](/docs/app/api-reference/components/image#width)、[`height`](/docs/app/api-reference/components/image#height)、およびオプションの[`blurDataURL`](/docs/app/api-reference/components/image#blurdataurl)のpropsを手動で指定する必要があります。`width`と`height`は、画像の正しいアスペクト比を推測し、画像の読み込みによるレイアウトシフトを防ぐために使用されます。
-次に、リモートサーバーからの画像を安全に許可するために、[`next.config.js`](/docs/app/api-reference/config/next-config-js)でサポートされるURLパターンのリストを定義する必要があります。悪意のある使用を防ぐために、できるだけ具体的にしてください。たとえば、次の設定では、特定のAWS S3バケットからの画像のみが許可されます：
+リモートサーバーからの画像を安全に許可するには、[`next.config.js`](/docs/app/api-reference/config/next-config-js)でサポートされるURLパターンのリストを定義する必要があります。悪意のある使用を防ぐために、できるだけ具体的にしてください。たとえば、次の設定では、特定のAWS S3バケットからの画像のみを許可します：
@@ -209,7 +205,7 @@ module.exports = {
[`next/font`](/docs/app/api-reference/components/font)モジュールは、フォントを自動的に最適化し、外部ネットワークリクエストを削除してプライバシーとパフォーマンスを向上させます。
-これは、*任意の*フォントファイルに対する**組み込みの自動セルフホスティング**を含んでいます。これにより、レイアウトシフトなしでWebフォントを最適に読み込むことができます。
+これは、任意のフォントファイルに対して**組み込みのセルフホスティング**を含んでいます。これにより、レイアウトシフトなしでWebフォントを最適に読み込むことができます。
`next/font`を使用するには、[`next/font/local`](#local-fonts)または[`next/font/google`](#google-fonts)からインポートし、適切なオプションで関数として呼び出し、フォントを適用したい要素の`className`を設定します。例えば：
@@ -305,12 +301,12 @@ export default function RootLayout({ children }) {
-最高のパフォーマンスと柔軟性を得るために、[可変フォント](https://fonts.google.com/variablefonts)を使用することをお勧めします。しかし、可変フォントを使用できない場合は、**ウェイトを指定する必要があります**：
+最高のパフォーマンスと柔軟性を得るために、[可変フォント](https://fonts.google.com/variablefonts)を使用することをお勧めします。しかし、可変フォントを使用できない場合は、ウェイトを指定する必要があります：
-```tsx title="app/layout.tsx" switcher
+```tsx title="app/layout.tsx" highlight={4} switcher
import { Roboto } from 'next/font/google'
const roboto = Roboto({
@@ -334,7 +330,7 @@ export default function RootLayout({
-```jsx title="app/layout.js" highlight={1,3-5,9} switcher
+```jsx title="app/layout.js" highlight={4} switcher
import { Roboto } from 'next/font/google'
const roboto = Roboto({
@@ -356,7 +352,7 @@ export default function RootLayout({ children }) {
### ローカルフォント {#local-fonts}
-ローカルフォントを使用するには、`next/font/local`からフォントをインポートし、[`public`フォルダ](#handling-static-assets)内のローカルフォントファイルの`src`を指定します。
+ローカルフォントを使用するには、`next/font/local`からフォントをインポートし、ローカルフォントファイルの[`src`](/docs/app/api-reference/components/font#src)を指定します。
diff --git a/docs/01-app/01-getting-started/05-css.mdx b/docs/01-app/01-getting-started/05-css.mdx
index 49ca35c7..f8cf229a 100644
--- a/docs/01-app/01-getting-started/05-css.mdx
+++ b/docs/01-app/01-getting-started/05-css.mdx
@@ -23,7 +23,7 @@ Next.jsは、アプリケーションでCSSを使用するためのいくつか
## CSS Modules {#css-modules}
-CSS Modulesは、ユニークなクラス名を生成することでCSSをローカルにスコープします。これにより、異なるファイルで同じクラスを使用しても衝突を心配する必要がなくなります。
+CSS Modulesは、ユニークなクラス名を生成することでCSSをローカルにスコープします。これにより、異なるファイルで同じクラスを使用しても、名前の衝突を心配する必要がなくなります。
CSS Modulesを使用し始めるには、拡張子が`.module.css`の新しいファイルを作成し、`app`ディレクトリ内の任意のコンポーネントにインポートします：
@@ -62,7 +62,7 @@ export default function Page({ children }) {
グローバルCSSを使用して、アプリケーション全体にスタイルを適用できます。
-グローバルスタイルを使用するには、新しいCSSファイルを作成します。例えば、`app/global.css`：
+グローバルスタイルを使用するには、`app/global.css`ファイルを作成し、root レイアウトにインポートして、アプリケーション内の**すべてのルート**にスタイルを適用します：
```css title="app/global.css"
body {
@@ -72,8 +72,6 @@ body {
}
```
-ファイルをroot レイアウト（`app/layout.js`）にインポートして、アプリケーション内の**すべてのルート**にスタイルを適用します：
-
@@ -113,7 +111,7 @@ export default function RootLayout({ children }) {
-> **Good to know:** グローバルスタイルは、`app`ディレクトリ内の任意のレイアウト、ページ、またはコンポーネントにインポートできます。ただし、Next.jsはReactの組み込みのスタイルシートサポートを使用してSuspenseと統合します。この組み込みサポートは、ルート間を移動する際にスタイルシートを削除しません。そのため、*本当に*グローバルなCSSにはグローバルスタイルを使用し、スコープされたCSSには[CSS Modules](#css-modules)を使用することをお勧めします。
+> **Good to know:** グローバルスタイルは、`app`ディレクトリ内の任意のレイアウト、ページ、またはコンポーネントにインポートできます。ただし、Next.jsはReactの組み込みのスタイルシートサポートを使用してSuspenseと統合するため、現在のところ、ルート間を移動する際にスタイルシートが削除されず、競合が発生する可能性があります。*本当に*グローバルなCSSにはグローバルスタイルを使用し、スコープされたCSSには[CSS Modules](#css-modules)を使用することをお勧めします。
## Tailwind CSS {#tailwind-css}
@@ -124,7 +122,7 @@ export default function RootLayout({ children }) {
Tailwindを使用し始めるには、必要なTailwind CSSパッケージをインストールします：
```bash title="Terminal"
-npm install -D tailwindcss @tailwindcss/postcss postcss
+npm install tailwindcss @tailwindcss/postcss postcss
```
### Tailwindの設定 {#configuring-tailwind}
@@ -148,14 +146,13 @@ export default {
@import 'tailwindcss';
```
-次に、スタイルを[ルートレイアウト](/docs/app/api-reference/file-conventions/layout#root-layouts)にインポートします：
+その後、スタイルを[ルートレイアウト](/docs/app/api-reference/file-conventions/layout#root-layouts)にインポートします：
```tsx title="app/layout.tsx" switcher
import type { Metadata } from 'next'
-
// これらのスタイルはアプリケーション内のすべてのルートに適用されます
import './globals.css'
@@ -201,7 +198,7 @@ export default function RootLayout({ children }) {
-最後に、アプリケーション内でTailwindのユーティリティクラスを書き始めることができます。
+その後、アプリケーション内でTailwindのユーティリティクラスを書き始めることができます。
@@ -277,9 +274,9 @@ export default nextConfig
## CSS-in-JS {#css-in-js}
-> **Warning:** ランタイムJavaScriptを必要とするCSS-in-JSライブラリは、現在React Server Componentsではサポートされていません。CSS-in-JSをServer ComponentsやStreamingなどの新しいReact機能と共に使用するには、ライブラリの作者が最新のReactバージョンをサポートする必要があります。
+> **Warning:** ランタイムJavaScriptを必要とするCSS-in-JSライブラリは、現在React Server Componentsではサポートされていません。Server ComponentsやStreamingなどの新しいReact機能とCSS-in-JSを使用するには、ライブラリの作者が最新のReactバージョンをサポートする必要があります。
-次のライブラリは、`app`ディレクトリ内の**Client Components**でサポートされています（アルファベット順）：
+以下のライブラリは、`app`ディレクトリ内の**Client Components**でサポートされています（アルファベット順）：
- [`ant-design`](https://ant.design/docs/react/use-with-next#using-app-router)
- [`chakra-ui`](https://chakra-ui.com/docs/get-started/frameworks/next-app)
@@ -299,7 +296,7 @@ export default nextConfig
- [`emotion`](https://github.com/emotion-js/emotion/issues/2928)
-Server Componentsをスタイルする場合は、[CSS Modules](#css-modules)や、[Tailwind CSS](#tailwind-css)のようにCSSファイルを出力する他のソリューションを使用することをお勧めします。
+Server Componentsをスタイル設定したい場合は、[CSS Modules](#css-modules)や、[Tailwind CSS](#tailwind-css)のようにCSSファイルを出力する他のソリューションを使用することをお勧めします。
### CSS-in-JSの設定 {#configuring-css-in-js}
@@ -328,7 +325,7 @@ export default function StyledJsxRegistry({
}: {
children: React.ReactNode
}) {
- // 遅延初期状態でスタイルシートを一度だけ作成
+ // 遅延初期状態でスタイルシートを一度だけ作成します
// x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
const [jsxStyleRegistry] = useState(() => createStyleRegistry())
@@ -353,7 +350,7 @@ import { useServerInsertedHTML } from 'next/navigation'
import { StyleRegistry, createStyleRegistry } from 'styled-jsx'
export default function StyledJsxRegistry({ children }) {
- // 遅延初期状態でスタイルシートを一度だけ作成
+ // 遅延初期状態でスタイルシートを一度だけ作成します
// x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
const [jsxStyleRegistry] = useState(() => createStyleRegistry())
@@ -370,7 +367,7 @@ export default function StyledJsxRegistry({ children }) {
-次に、[root レイアウト](/docs/app/api-reference/file-conventions/layout#root-layouts)をレジストリでラップします：
+次に、レジストリで[ルートレイアウト](/docs/app/api-reference/file-conventions/layout#root-layouts)をラップします：
@@ -450,7 +447,7 @@ export default nextConfig
-次に、`styled-components` APIを使用して、レンダリング中に生成されたすべてのCSSスタイルルールを収集するグローバルレジストリコンポーネントを作成し、それらのルールを返す関数を作成します。次に、`useServerInsertedHTML`フックを使用して、レジストリに収集されたスタイルをroot レイアウトの`` HTMLタグに挿入します。
+次に、`styled-components` APIを使用して、レンダリング中に生成されたすべてのCSSスタイルルールを収集するグローバルレジストリコンポーネントを作成し、それらのルールを返す関数を作成します。その後、`useServerInsertedHTML`フックを使用して、レジストリに収集されたスタイルをルートレイアウトの`` HTMLタグに挿入します。
@@ -467,7 +464,7 @@ export default function StyledComponentsRegistry({
}: {
children: React.ReactNode
}) {
- // 遅延初期状態でスタイルシートを一度だけ作成
+ // 遅延初期状態でスタイルシートを一度だけ作成します
// x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
@@ -498,7 +495,7 @@ import { useServerInsertedHTML } from 'next/navigation'
import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
export default function StyledComponentsRegistry({ children }) {
- // 遅延初期状態でスタイルシートを一度だけ作成
+ // 遅延初期状態でスタイルシートを一度だけ作成します
// x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
@@ -521,7 +518,7 @@ export default function StyledComponentsRegistry({ children }) {
-root レイアウトの`children`をスタイルレジストリコンポーネントでラップします：
+ルートレイアウトの`children`をスタイルレジストリコンポーネントでラップします：
diff --git a/docs/01-app/01-getting-started/06-fetching-data.mdx b/docs/01-app/01-getting-started/06-fetching-data.mdx
index 93a59270..4076e1d2 100644
--- a/docs/01-app/01-getting-started/06-fetching-data.mdx
+++ b/docs/01-app/01-getting-started/06-fetching-data.mdx
@@ -1,5 +1,5 @@
---
-title: 'データの取得とストリーミングの方法'
+title: 'データの取得とストリーミング方法'
nav_title: 'データの取得'
description: 'アプリケーションでデータを取得し、コンテンツをストリーミングする方法を始めましょう。'
related:
@@ -64,7 +64,7 @@ export default async function Page() {
#### ORM またはデータベースを使用する {#with-an-orm-or-database}
-ORM またはデータベースを使用してデータを取得するには、コンポーネントを非同期関数に変換し、呼び出しを待機します：
+Server component はサーバー上でレンダリングされるため、ORM やデータベースクライアントを使用して安全にデータベースクエリを実行できます。コンポーネントを非同期関数に変換し、呼び出しを待機します：
@@ -210,7 +210,7 @@ export default function Posts({ posts }) {
#### コミュニティライブラリ {#community-libraries}
-[SWR](https://swr.vercel.app/)や[React Query](https://tanstack.com/query/latest)のようなコミュニティライブラリを使用して、client component でデータを取得できます。これらのライブラリは、キャッシング、ストリーミング、その他の機能に独自のセマンティクスを持っています。例えば、SWR を使用する場合：
+[SWR](https://swr.vercel.app/)や[React Query](https://tanstack.com/query/latest)のようなコミュニティライブラリを使用して、client component でデータを取得できます。これらのライブラリは、キャッシュ、ストリーミング、その他の機能に独自のセマンティクスを持っています。例えば、SWR を使用する場合：
@@ -275,7 +275,7 @@ export default function BlogPage() {
> **警告：** 以下の内容は、アプリケーションで[`dynamicIO` config option](/docs/app/api-reference/config/next-config-js/dynamicIO)が有効になっていることを前提としています。このフラグは Next.js 15 canary で導入されました。
-Server component で `async/await` を使用すると、Next.js は**動的レンダリング**を選択します。これは、データがユーザーのリクエストごとにサーバーで取得され、レンダリングされることを意味します。遅いデータリクエストがある場合、ルート全体がレンダリングをブロックされます。
+Server component で `async/await` を使用すると、Next.js は**動的レンダリング**を選択します。これは、データがユーザーのリクエストごとにサーバーで取得され、レンダリングされることを意味します。データリクエストが遅い場合、ルート全体がレンダリングをブロックされます。
初期ロード時間とユーザーエクスペリエンスを向上させるために、ページの HTML を小さなチャンクに分割し、それらのチャンクをサーバーからクライアントに段階的に送信するストリーミングを使用できます。
@@ -289,7 +289,7 @@ Server component で `async/await` を使用すると、Next.js は**動的レ
アプリケーションでストリーミングを実装する方法は2つあります：
-1. [`loading.js` ファイル](#with-loading-js)を使用する
+1. [`loading.js` ファイル](#with-loadingjs)を使用する
2. React の[`` コンポーネント](#with-suspense)を使用する
### `loading.js` を使用する {#with-loading-js}
@@ -309,7 +309,7 @@ Server component で `async/await` を使用すると、Next.js は**動的レ
```tsx title="app/blog/loading.tsx" switcher
export default function Loading() {
- // ここで読み込み中の UI を定義します
+ // ここでローディング UI を定義します
return Loading...
}
```
@@ -319,7 +319,7 @@ export default function Loading() {
```jsx title="app/blog/loading.js" switcher
export default function Loading() {
- // ここで読み込み中の UI を定義します
+ // ここでローディング UI を定義します
return Loading...
}
```
@@ -327,17 +327,17 @@ export default function Loading() {
-ナビゲーション時に、ユーザーはページがレンダリングされている間にレイアウトと[読み込み状態](#creating-meaningful-loading-states)をすぐに見ることができます。レンダリングが完了すると、新しいコンテンツが自動的に入れ替わります。
+ナビゲーション時に、ユーザーはページがレンダリングされている間にレイアウトと[ローディング状態](#creating-meaningful-loading-states)をすぐに見ることができます。レンダリングが完了すると、新しいコンテンツが自動的に入れ替わります。
-舞台裏では、`loading.js` は `layout.js` 内にネストされ、`page.js` ファイルとその下のすべての子を自動的に `` boundary でラップします。
+裏側では、`loading.js` は `layout.js` 内にネストされ、`page.js` ファイルとその下のすべての子を自動的に `` boundary でラップします。
-### 意味のある読み込み状態の作成 {#creating-meaningful-loading-states}
+### 意味のあるローディング状態を作成する {#creating-meaningful-loading-states}
-インスタント読み込み状態は、ナビゲーション後にユーザーにすぐに表示されるフォールバック UI です。最良のユーザーエクスペリエンスを提供するために、意味のある読み込み状態を設計し、アプリが応答していることをユーザーに理解させることをお勧めします。例えば、スケルトンやスピナー、またはカバーフォトやタイトルなどの将来の画面の小さくても意味のある部分を使用できます。
+インスタントローディング状態は、ナビゲーション後にユーザーにすぐに表示されるフォールバック UI です。最良のユーザーエクスペリエンスを提供するために、意味のあるローディング状態を設計し、アプリが応答していることをユーザーに理解させることをお勧めします。例えば、スケルトンやスピナー、またはカバーフォトやタイトルなどの将来の画面の小さくても意味のある部分を使用できます。
-開発中は、[React Devtools](https://react.dev/learn/react-developer-tools)を使用してコンポーネントの読み込み状態をプレビューおよび検査できます。
+開発中は、[React Devtools](https://react.dev/learn/react-developer-tools)を使用してコンポーネントのローディング状態をプレビューおよび検査できます。
diff --git a/docs/01-app/01-getting-started/07-updating-data.mdx b/docs/01-app/01-getting-started/07-updating-data.mdx
index 17f369cd..857c40d7 100644
--- a/docs/01-app/01-getting-started/07-updating-data.mdx
+++ b/docs/01-app/01-getting-started/07-updating-data.mdx
@@ -15,28 +15,50 @@ Next.jsでは、Reactの[Server Functions](https://react.dev/reference/rsc/serve
## Server Functionsの作成 {#creating-server-functions}
-Server Functionは、[`use server`](https://react.dev/reference/rsc/use-server)ディレクティブを使用して定義できます。このディレクティブを**非同期**関数の先頭に置くことで、その関数をServer Functionとしてマークするか、別のファイルの先頭に置いてそのファイルのすべてのエクスポートをマークします。ほとんどの場合、別のファイルを使用することをお勧めします。
+Server Functionは、[`use server`](https://react.dev/reference/rsc/use-server)ディレクティブを使用して定義できます。このディレクティブを**非同期**関数の先頭に置くことで、その関数をServer Functionとしてマークするか、別のファイルの先頭に置いてそのファイルのすべてのエクスポートをマークします。
```ts title="app/lib/actions.ts" switcher
-'use server'
+export async function createPost(formData: FormData) {
+ 'use server'
+ const title = formData.get('title')
+ const content = formData.get('content')
+
+ // データを更新
+ // キャッシュを再検証
+}
-export async function createPost(formData: FormData) {}
+export async function deletePost(formData: FormData) {
+ 'use server'
+ const id = formData.get('id')
-export async function deletePost(formData: FormData) {}
+ // データを更新
+ // キャッシュを再検証
+}
```
```js title="app/lib/actions.js" switcher
-'use server'
+export async function createPost(formData) {
+ 'use server'
+ const title = formData.get('title')
+ const content = formData.get('content')
-export async function createPost(formData) {}
+ // データを更新
+ // キャッシュを再検証
+}
-export async function deletePost(formData) {}
+export async function deletePost(formData) {
+ 'use server'
+ const id = formData.get('id')
+
+ // データを更新
+ // キャッシュを再検証
+}
```
@@ -52,9 +74,8 @@ Server Functionsは、関数本体の先頭に`"use server"`ディレクティ
```tsx title="app/page.tsx" switcher
export default function Page() {
// Server Action
- async function createPost() {
+ async function createPost(formData: FormData) {
'use server'
- // データを更新
// ...
}
@@ -68,9 +89,8 @@ export default function Page() {
```jsx title="app/page.js" switcher
export default function Page() {
// Server Action
- async function createPost() {
+ async function createPost(formData: FormData) {
'use server'
- // データを更新
// ...
}
@@ -83,7 +103,7 @@ export default function Page() {
### Client Components {#client-components}
-Client ComponentsでServer Functionsを定義することはできません。ただし、`"use server"`ディレクティブが先頭にあるファイルからインポートすることで、Client Componentsで呼び出すことができます：
+Client ComponentsでServer Functionsを定義することはできません。ただし、`"use server"`ディレクティブがファイルの先頭にあるファイルからインポートすることで、Client Componentsで呼び出すことができます：
@@ -139,8 +159,8 @@ export function Button() {
Server Functionを呼び出す主な方法は2つあります：
-1. ServerおよびClient Components内の[フォーム](#forms)
-2. Client Components内の[イベントハンドラ](#event-handlers)
+1. ServerおよびClient Componentsでの[フォーム](#forms)
+2. Client Componentsでの[イベントハンドラ](#event-handlers)
### フォーム {#forms}
@@ -222,7 +242,7 @@ export async function createPost(formData) {
### イベントハンドラ {#event-handlers}
-Client Component内で`onClick`などのイベントハンドラを使用してServer Functionを呼び出すことができます。
+Client Componentで`onClick`などのイベントハンドラを使用してServer Functionを呼び出すことができます。
@@ -283,9 +303,11 @@ export default function LikeButton({ initialLikes }) {
+## 例 {#examples}
+
### 保留状態の表示 {#showing-a-pending-state}
-Server Functionを実行している間、Reactの[`useActionState`](https://react.dev/reference/react/useActionState)フックを使用してローディングインジケーターを表示できます。このフックは`pending`ブール値を返します：
+Server Functionを実行中に、Reactの[`useActionState`](https://react.dev/reference/react/useActionState)フックを使用してローディングインジケーターを表示できます。このフックは`pending`ブール値を返します：
@@ -340,11 +362,10 @@ export function Button() {
```ts title="app/lib/actions.ts" switcher
-'use server'
-
import { revalidatePath } from 'next/cache'
export async function createPost(formData: FormData) {
+ 'use server'
// データを更新
// ...
@@ -358,11 +379,10 @@ export async function createPost(formData: FormData) {
```js title="app/actions.js" switcher
-'use server'
-
import { revalidatePath } from 'next/cache'
export async function createPost(formData) {
+ 'use server'
// データを更新
// ...
revalidatePath('/posts')
diff --git a/docs/01-app/01-getting-started/08-error-handling.mdx b/docs/01-app/01-getting-started/08-error-handling.mdx
index bd34e23f..70b06f0c 100644
--- a/docs/01-app/01-getting-started/08-error-handling.mdx
+++ b/docs/01-app/01-getting-started/08-error-handling.mdx
@@ -3,24 +3,26 @@ title: 'エラーの処理方法'
nav_title: 'エラー処理'
description: '予期されたエラーの表示方法とキャッチされない例外の処理方法を学びます。'
related:
- title: 'APIリファレンス'
- description: 'このページで言及されている機能について詳しくは、APIリファレンスを参照してください。'
+ title: 'API リファレンス'
+ description: 'このページで言及されている機能について詳しくは、API リファレンスを参照してください。'
links:
- - app/api-reference/functions/redirect
- - app/api-reference/file-conventions/error
- - app/api-reference/functions/not-found
- - app/api-reference/file-conventions/not-found
+ - 'app/api-reference/functions/redirect'
+ - 'app/api-reference/file-conventions/error'
+ - 'app/api-reference/functions/not-found'
+ - 'app/api-reference/file-conventions/not-found'
---
エラーは、[予期されたエラー](#handling-expected-errors)と[キャッチされない例外](#handling-uncaught-exceptions)の2つのカテゴリに分けられます。このページでは、Next.jsアプリケーションでこれらのエラーをどのように処理するかを説明します。
## 予期されたエラーの処理 {#handling-expected-errors}
-予期されたエラーとは、[サーバーサイドのフォームバリデーション](/docs/app/building-your-application/data-fetching/server-actions-and-mutations#server-side-form-validation)や失敗したリクエストなど、アプリケーションの通常の操作中に発生する可能性のあるエラーです。これらのエラーは明示的に処理し、クライアントに返す必要があります。
+予期されたエラーは、[サーバーサイドのフォームバリデーション](/docs/app/building-your-application/data-fetching/server-actions-and-mutations#server-side-form-validation)や失敗したリクエストなど、アプリケーションの通常の操作中に発生する可能性のあるエラーです。これらのエラーは明示的に処理し、クライアントに返す必要があります。
-### Server Actions {#server-actions}
+### サーバー関数 {#server-functions}
-[`useActionState`](https://react.dev/reference/react/useActionState)フックを使用して、[Server Functions](https://react.dev/reference/rsc/server-functions)の状態を管理し、予期されたエラーを処理できます。予期されたエラーに対しては`try`/`catch`ブロックを使用しないでください。代わりに、予期されたエラーを例外としてスローするのではなく、戻り値としてモデル化することができます。
+[`useActionState`](https://react.dev/reference/react/useActionState)フックを使用して、[Server Functions](https://react.dev/reference/rsc/server-functions)で予期されたエラーを処理できます。
+
+これらのエラーに対しては、`try`/`catch`ブロックを使用してエラーをスローするのではなく、予期されたエラーを戻り値としてモデル化します。
@@ -69,7 +71,7 @@ export async function createPost(prevState, formData) {
-次に、`useActionState`フックにアクションを渡し、返された`state`を使用してエラーメッセージを表示します。
+`useActionState`フックにアクションを渡し、返された`state`を使用してエラーメッセージを表示できます。
@@ -132,9 +134,9 @@ export function Form() {
-### Server Components {#server-components}
+### サーバーコンポーネント {#server-components}
-Server Component内でデータを取得する際、レスポンスを使用してエラーメッセージを条件付きでレンダリングしたり、[`redirect`](/docs/app/api-reference/functions/redirect)を使用したりできます。
+Server Component内でデータをフェッチする際、レスポンスを使用してエラーメッセージを条件付きでレンダリングしたり、[`redirect`](/docs/app/api-reference/functions/redirect)を行ったりできます。
@@ -237,13 +239,13 @@ export default function NotFound() {
## キャッチされない例外の処理 {#handling-uncaught-exceptions}
-キャッチされない例外は、アプリケーションの通常のフロー中に発生すべきでないバグや問題を示す予期しないエラーです。これらはエラーをスローすることで処理され、その後error boundaryによってキャッチされます。
+キャッチされない例外は、アプリケーションの通常のフロー中に発生すべきでないバグや問題を示す予期しないエラーです。これらはエラーをスローすることで処理され、その後、error boundaryによってキャッチされます。
### ネストされたerror boundary {#nested-error-boundaries}
-Next.jsはキャッチされない例外を処理するためにerror boundaryを使用します。error boundaryは子コンポーネント内のエラーをキャッチし、クラッシュしたコンポーネントツリーの代わりにフォールバックUIを表示します。
+Next.jsは、キャッチされない例外を処理するためにerror boundaryを使用します。error boundaryは、その子コンポーネント内のエラーをキャッチし、クラッシュしたコンポーネントツリーの代わりにフォールバックUIを表示します。
-ルートセグメント内に[`error.js`](/docs/app/api-reference/file-conventions/error)ファイルを追加し、Reactコンポーネントをエクスポートすることでerror boundaryを作成します。
+ルートセグメント内に[`error.js`](/docs/app/api-reference/file-conventions/error)ファイルを追加し、Reactコンポーネントをエクスポートすることで、error boundaryを作成します。
@@ -314,7 +316,7 @@ export default function Error({ error, reset }) {
-エラーは最も近い親のerror boundaryまでバブルアップします。これにより、[ルート階層](/docs/app/getting-started/project-structure#component-hierarchy)の異なるレベルに`error.tsx`ファイルを配置することで、細かいエラー処理が可能になります。
+エラーは最も近い親のerror boundaryにバブルアップします。これにより、[ルート階層](/docs/app/getting-started/project-structure#component-hierarchy)の異なるレベルに`error.tsx`ファイルを配置することで、細かいエラー処理が可能になります。
@@ -138,11 +138,11 @@ Next.jsは、メタデータをUIとは別にストリームし、解決され
-```tsx title="app/lib/data.ts" highlight={4} switcher
+```tsx title="app/lib/data.ts" highlight={5} switcher
import { cache } from 'react'
import { db } from '@/app/lib/db'
-// getPostは2回使用されますが、1回だけ実行されます
+// getPostは2回使用されますが、実行は1回のみです
export const getPost = cache(async (slug: string) => {
const res = await db.query.posts.findFirst({ where: eq(posts.slug, slug) })
return res
@@ -152,11 +152,11 @@ export const getPost = cache(async (slug: string) => {
-```jsx title="app/lib/data.js" highlight={4} switcher
+```jsx title="app/lib/data.js" highlight={5} switcher
import { cache } from 'react'
import { db } from '@/app/lib/db'
-// getPostは2回使用されますが、1回だけ実行されます
+// getPostは2回使用されますが、実行は1回のみです
export const getPost = cache(async (slug) => {
const res = await db.query.posts.findFirst({ where: eq(posts.slug, slug) })
return res
@@ -215,7 +215,7 @@ export default async function Page({ params }) {
## Favicons {#favicons}
-Faviconsは、ブックマークや検索結果でサイトを表す小さなアイコンです。アプリケーションにfaviconを追加するには、`favicon.ico`を作成し、アプリフォルダのrootに追加します。
+Faviconは、ブックマークや検索結果でサイトを表す小さなアイコンです。アプリケーションにfaviconを追加するには、`favicon.ico`を作成し、アプリフォルダのrootに追加します。
-`ImageResponse`は、flexboxや絶対位置指定、カスタムフォント、テキストの折り返し、中央揃え、ネストされた画像など、一般的なCSSプロパティをサポートしています。[サポートされているCSSプロパティの完全なリストを参照してください](/docs/app/api-reference/functions/image-response)。
+`ImageResponse`は、flexboxや絶対位置指定、カスタムフォント、テキストの折り返し、センタリング、ネストされた画像などの一般的なCSSプロパティをサポートしています。[サポートされているCSSプロパティの完全なリストを参照してください](/docs/app/api-reference/functions/image-response)。
> **Good to know**:
>
> - [Vercel OG Playground](https://og-playground.vercel.app/)で例を確認できます。
-> - `ImageResponse`は、[@vercel/og](https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation)、[Satori](https://github.com/vercel/satori)、およびResvgを使用してHTMLとCSSをPNGに変換します。
+> - `ImageResponse`は、HTMLとCSSをPNGに変換するために[@vercel/og](https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation)、[Satori](https://github.com/vercel/satori)、Resvgを使用しています。
> - flexboxとCSSプロパティのサブセットのみがサポートされています。高度なレイアウト（例：`display: grid`）は機能しません。
diff --git a/docs/01-app/01-getting-started/12-upgrading.mdx b/docs/01-app/01-getting-started/12-upgrading.mdx
index 4df85bc0..ddad0bb9 100644
--- a/docs/01-app/01-getting-started/12-upgrading.mdx
+++ b/docs/01-app/01-getting-started/12-upgrading.mdx
@@ -1,24 +1,23 @@
---
title: 'アップグレード'
-description: 'Next.jsアプリケーションを最新バージョンにアップグレードする方法を学びます。'
+description: 'Next.jsアプリケーションを最新バージョンにアップグレードする方法を学びましょう。'
related:
title: 'バージョンガイド'
description: '詳細なアップグレード手順については、バージョンガイドをご覧ください。'
links:
- - 'app/building-your-application/upgrading/canary'
- 'app/building-your-application/upgrading/version-15'
- 'app/building-your-application/upgrading/version-14'
---
## 最新バージョン {#latest-version}
-Next.jsを最新バージョンに更新するには、`upgrade` codemodを使用します：
+Next.jsを最新バージョンに更新するには、`upgrade` codemodを使用できます：
```bash title="Terminal"
npx @next/codemod@canary upgrade latest
```
-手動でアップグレードしたい場合は、最新のNext.jsとReactのバージョンをインストールします：
+手動でアップグレードしたい場合は、最新のNext.jsとReactのバージョンをインストールしてください：
```bash title="Terminal"
npm i next@latest react@latest react-dom@latest eslint-config-next@latest
@@ -26,7 +25,7 @@ npm i next@latest react@latest react-dom@latest eslint-config-next@latest
## Canaryバージョン {#canary-version}
-最新のcanaryに更新するには、まずNext.jsの最新バージョンを使用しており、すべてが期待通りに動作していることを確認します。その後、次のコマンドを実行します：
+最新のcanaryに更新するには、まずNext.jsの最新バージョンを使用しており、すべてが期待通りに動作していることを確認してください。その後、次のコマンドを実行します：
```bash title="Terminal"
npm i next@canary
diff --git a/docs/01-app/03-building-your-application/01-routing/03-layouts-and-templates.mdx b/docs/01-app/03-building-your-application/01-routing/03-layouts-and-templates.mdx
index 2ed8c55d..7d53a6b7 100644
--- a/docs/01-app/03-building-your-application/01-routing/03-layouts-and-templates.mdx
+++ b/docs/01-app/03-building-your-application/01-routing/03-layouts-and-templates.mdx
@@ -1,15 +1,15 @@
---
-title: 'Layouts and Templates'
-description: 'Next.jsで最初の共有レイアウトを作成します。'
+title: 'Layouts と Templates'
+description: 'Next.js で最初の共有レイアウトを作成します。'
---
-特別なファイルである[layout.js](#layouts)と[template.js](#templates)を使用すると、ルート間で共有されるUIを作成できます。このページでは、これらの特別なファイルをどのように、そしていつ使用するかを案内します。
+特別なファイルである[layout.js](#layouts)と[template.js](#templates)を使用すると、ルート間で共有されるUIを作成できます。このページでは、これらの特別なファイルをどのように、そしていつ使用するかについて説明します。
## Layouts {#layouts}
レイアウトは、複数のルート間で**共有**されるUIです。ナビゲーション時に、レイアウトは状態を保持し、インタラクティブなままで、再レンダリングされません。レイアウトは[ネスト](#nesting-layouts)することもできます。
-`layout.js`ファイルからReactコンポーネントをデフォルトエクスポートすることで、レイアウトを定義できます。コンポーネントは、レンダリング中に子レイアウト（存在する場合）またはページで埋められる`children`プロップを受け入れる必要があります。
+`layout.js`ファイルからReactコンポーネントをデフォルトエクスポートすることで、レイアウトを定義できます。このコンポーネントは、レンダリング中に子レイアウト（存在する場合）またはページで埋められる`children` propを受け入れる必要があります。
たとえば、レイアウトは`/dashboard`および`/dashboard/settings`ページと共有されます：
@@ -62,7 +62,7 @@ export default function DashboardLayout({
-### Root Layout (必須) {#root-layout-required}
+### Root Layout（必須） {#root-layout-required}
root レイアウトは`app`ディレクトリのトップレベルで定義され、すべてのルートに適用されます。このレイアウトは**必須**であり、`html`および`body`タグを含める必要があります。これにより、サーバーから返される初期HTMLを変更できます。
@@ -105,11 +105,11 @@ export default function RootLayout({ children }) {
-### ネストされたレイアウト {#nesting-layouts}
+### レイアウトのネスト {#nesting-layouts}
-デフォルトでは、フォルダ階層内のレイアウトは**ネスト**されており、`children`プロップを介して子レイアウトをラップします。特定のルートセグメント（フォルダ）内に`layout.js`を追加することで、レイアウトをネストできます。
+デフォルトでは、フォルダ階層内のレイアウトは**ネスト**されており、`children` propを介して子レイアウトをラップします。特定のルートセグメント（フォルダ）内に`layout.js`を追加することで、レイアウトをネストできます。
-たとえば、`/dashboard`ルートのレイアウトを作成するには、`dashboard`フォルダ内に新しい`layout.js`ファイルを追加します：
+たとえば、`/dashboard`ルート用のレイアウトを作成するには、`dashboard`フォルダ内に新しい`layout.js`ファイルを追加します：
- レイアウトには`.js`、`.jsx`、または`.tsx`ファイル拡張子を使用できます。
> - ``および``タグを含めることができるのはroot レイアウトのみです。
> - 同じフォルダに`layout.js`と`page.js`ファイルが定義されている場合、レイアウトはページをラップします。
-> - レイアウトはデフォルトで[Server Components](/docs/app/building-your-application/rendering/server-components)ですが、[Client Component](/docs/app/building-your-application/rendering/client-components)に設定できます。
+> - レイアウトはデフォルトで[Server Components](/docs/app/building-your-application/rendering/server-components)ですが、[Client Component](/docs/app/building-your-application/rendering/client-components)に設定することもできます。
> - レイアウトはデータを取得できます。詳細は[データ取得](/docs/app/building-your-application/data-fetching)セクションを参照してください。
> - 親レイアウトとその子の間でデータを渡すことはできません。ただし、ルートで同じデータを複数回取得することができ、Reactはパフォーマンスに影響を与えることなく[リクエストを自動的に重複排除](/docs/app/building-your-application/caching#request-memoization)します。
-> - レイアウトは`pathname`にアクセスできません（[詳細はこちら](/docs/app/api-reference/file-conventions/layout)）。ただし、インポートされたClient Componentsは[`usePathname`](/docs/app/api-reference/functions/use-pathname)フックを使用してパス名にアクセスできます。
+> - レイアウトは`pathname`にアクセスできません（[詳細はこちら](/docs/app/api-reference/file-conventions/layout)）。ただし、インポートされたClient Componentsは[`usePathname`](/docs/app/api-reference/functions/use-pathname)フックを使用して`pathname`にアクセスできます。
> - レイアウトは自分自身の下のルートセグメントにアクセスできません。すべてのルートセグメントにアクセスするには、Client Componentで[`useSelectedLayoutSegment`](/docs/app/api-reference/functions/use-selected-layout-segment)または[`useSelectedLayoutSegments`](/docs/app/api-reference/functions/use-selected-layout-segments)を使用できます。
> - [Route Groups](/docs/app/building-your-application/routing/route-groups)を使用して、特定のルートセグメントを共有レイアウトに含めたり除外したりできます。
-> - [Route Groups](/docs/app/building-your-application/routing/route-groups)を使用して、複数のroot レイアウトを作成できます。[こちらの例](/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts)を参照してください。
-> - **`pages`ディレクトリからの移行：** root レイアウトは[`_app.js`](https://nextjs.org/docs/canary/pages/building-your-application/routing/custom-app)および[`_document.js`](https://nextjs.org/docs/canary/pages/building-your-application/routing/custom-document)ファイルを置き換えます。[移行ガイドを参照](/docs/app/building-your-application/upgrading/app-router-migration#migrating-_documentjs-and-_appjs)。
+> - [Route Groups](/docs/app/building-your-application/routing/route-groups)を使用して、複数のroot レイアウトを作成できます。[こちらの例](/docs/app/getting-started/project-structure#creating-multiple-root-layouts)を参照してください。
+> - **`pages`ディレクトリからの移行**：root レイアウトは[`_app.js`](https://nextjs.org/docs/canary/pages/building-your-application/routing/custom-app)および[`_document.js`](https://nextjs.org/docs/canary/pages/building-your-application/routing/custom-document)ファイルを置き換えます。[移行ガイドを参照](/docs/app/building-your-application/upgrading/app-router-migration#migrating-_documentjs-and-_appjs)。
## Templates {#templates}
-テンプレートは、レイアウトと同様に子レイアウトやページをラップします。ルート間で持続し、状態を保持するレイアウトとは異なり、テンプレートはナビゲーション時にその子の新しいインスタンスを作成します。つまり、ユーザーがテンプレートを共有するルート間をナビゲートすると、子の新しいインスタンスがマウントされ、DOM要素が再作成され、Client Componentsの状態は**保持されず**、エフェクトが再同期されます。
+Templatesは、子レイアウトまたはページをラップする点でレイアウトに似ています。ルート間で持続し、状態を保持するレイアウトとは異なり、Templatesはナビゲーション時にその子の新しいインスタンスを作成します。つまり、ユーザーがTemplatesを共有するルート間をナビゲートすると、子の新しいインスタンスがマウントされ、DOM要素が再作成され、Client Componentsの状態は**保持されず**、エフェクトが再同期されます。
-これらの特定の動作が必要な場合があり、テンプレートはレイアウトよりも適したオプションとなるでしょう。たとえば：
+これらの特定の動作が必要な場合があり、その場合はレイアウトよりもTemplatesの方が適していることがあります。たとえば：
-- ナビゲーション時に`useEffect`を再同期するため。
-- ナビゲーション時に子Client Componentsの状態をリセットするため。
+- ナビゲーション時に`useEffect`を再同期するため
+- ナビゲーション時に子Client Componentsの状態をリセットするため
-テンプレートは、`template.js`ファイルからデフォルトのReactコンポーネントをエクスポートすることで定義できます。コンポーネントは`children`プロップを受け入れる必要があります。
+Templateは、`template.js`ファイルからデフォルトのReactコンポーネントをエクスポートすることで定義できます。このコンポーネントは`children` propを受け入れる必要があります。
` HTML要素を変更できます。
+[Metadata API](/docs/app/building-your-application/optimizing/metadata)を使用して、`title`や`meta`などの`` HTML要素を変更できます。
メタデータは、[`layout.js`](/docs/app/api-reference/file-conventions/layout)または[`page.js`](/docs/app/api-reference/file-conventions/page)ファイルで[`metadata`オブジェクト](/docs/app/api-reference/functions/generate-metadata#the-metadata-object)または[`generateMetadata`関数](/docs/app/api-reference/functions/generate-metadata#generatemetadata-function)をエクスポートすることで定義できます。
@@ -258,15 +258,15 @@ export default function Page() {
-> **Good to know**: root レイアウトに``や`<meta>`などの`<head>`タグを手動で追加するべきではありません。代わりに、[Metadata API](/docs/app/api-reference/functions/generate-metadata)を使用してください。これにより、ストリーミングや`<head>`要素の重複排除などの高度な要件が自動的に処理されます。
+> **Good to know**: `<title>`や`<meta>`などの`<head>`タグをroot レイアウトに手動で追加するべきではありません。代わりに、[Metadata API](/docs/app/api-reference/functions/generate-metadata)を使用してください。これにより、ストリーミングや`<head>`要素の重複排除などの高度な要件が自動的に処理されます。
-利用可能なメタデータオプションについては、[APIリファレンス](/docs/app/api-reference/functions/generate-metadata)で詳細を確認してください。
+利用可能なメタデータオプションの詳細は、[APIリファレンス](/docs/app/api-reference/functions/generate-metadata)で確認できます。
### アクティブなナビゲーションリンク {#active-nav-links}
[usePathname()](/docs/app/api-reference/functions/use-pathname)フックを使用して、ナビゲーションリンクがアクティブかどうかを判断できます。
-`usePathname()`はクライアントフックであるため、ナビゲーションリンクをClient Componentに抽出し、レイアウトやテンプレートにインポートする必要があります：
+`usePathname()`はクライアントフックであるため、ナビゲーションリンクをClient Componentに抽出し、レイアウトまたはテンプレートにインポートする必要があります：
<Tabs>
<TabItem value="tsx" label="TypeScript">
diff --git a/docs/01-app/03-building-your-application/01-routing/08-route-groups.mdx b/docs/01-app/03-building-your-application/01-routing/08-route-groups.mdx
index 6959daee..076d3905 100644
--- a/docs/01-app/03-building-your-application/01-routing/08-route-groups.mdx
+++ b/docs/01-app/03-building-your-application/01-routing/08-route-groups.mdx
@@ -1,93 +1,27 @@
---
title: 'Route Groups'
-description: 'Route Groups を使用して、Next.js アプリケーションを異なるセクションに分割することができます。'
+description: 'Route Groupsは、Next.jsアプリケーションを異なるセクションに分割するために使用できます。'
---
-`app` ディレクトリ内では、通常入れ子構造のフォルダが URL パスにマッピングされます。しかし、フォルダを **Route Group** としてマークすることで、そのフォルダがルートの URL パスに含まれないようにできます。
+`app`ディレクトリ内では、ネストされたフォルダは通常、URLパスにマッピングされます。しかし、フォルダを**Route Group**としてマークすることで、そのフォルダがルートのURLパスに含まれないようにすることができます。
-これにより、URL パスの構造に影響を与えずに、ルートセグメントとプロジェクトファイルを論理的なグループに整理することができます。
+これにより、URLパスの構造に影響を与えることなく、ルートセグメントやプロジェクトファイルを論理的なグループに整理することができます。
-Route groups は以下の用途に役立ちます：
+Route Groupsは以下の用途に役立ちます：
-- URL パスに影響を与えずにルートをグループ化する例として、サイトのセクションごと、意図ごと、チームごとなどにグループ化する [ルートをグループ化する](#organize-routes-without-affecting-the-url-path)
-- 同じルートセグメントレベルで [ネストされたレイアウト](/docs/app/building-your-application/routing/layouts-and-templates) を有効にする：
- - [複数の root レイアウトを含む、同一セグメント内で複数のネストされたレイアウトを作成する](#creating-multiple-root-layouts)
- - [共通セグメント内のルートのサブセットにレイアウトを追加する](#opting-specific-segments-into-a-layout)
-- [共通セグメント内の特定ルートにローディングスケルトンを追加する](#opting-for-loading-skeletons-on-a-specific-route)
+- サイトのセクション、意図、チームごとにルートをグループ化する
+- 同じルートセグメントレベルでネストされたレイアウトを有効にする：
+ - 同じセグメント内で複数のネストされたレイアウトを作成する（複数のroot レイアウトを含む）
+ - 特定のセグメントをレイアウトに選択する
+- 特定のルートでローディングスケルトンを選択する
## 規約 {#convention}
-Route group は、フォルダ名を括弧で囲むことで作成できます：`(folderName)`
-
-## 例 {#examples}
-
-### URL パスに影響を与えずにルートを管理する {#organize-routes-without-affecting-the-url-path}
-
-URL に影響を与えずにルートを管理するには、関連しているルートをまとめておくためのグループを作成します。括弧内のフォルダは URL から省略されます（例えば、`(marketing)` や `(shop)` など）。
-
-<Image
- alt="Route Group を使ったルートの整理"
- srcLight="/docs/light/route-group-organisation.png"
- srcDark="/docs/dark/route-group-organisation.png"
- width="1600"
- height="930"
-/>
-
-`(marketing)` や `(shop)` 内のルートが同じ URL 階層を共有しているとしても、それぞれのグループ内に `layout.js` ファイルを追加することで異なるレイアウトを作成できます。
-
-<Image
- alt="複数のレイアウトを持つ Route Group"
- srcLight="/docs/light/route-group-multiple-layouts.png"
- srcDark="/docs/dark/route-group-multiple-layouts.png"
- width="1600"
- height="768"
-/>
-
-### 特定のセグメントをレイアウトに選択する {#opting-specific-segments-into-a-layout}
-
-特定のルートをレイアウトに選択するには、新しい Route Group（例：`(shop)`）を作成し、同じレイアウトを共有するルートをそのグループに移動します（例：`account` と `cart`）。グループ外のルートはレイアウトを共有しません（例：`checkout`）。
-
-<Image
- alt="オプトインレイアウトを持つ Route Group"
- srcLight="/docs/light/route-group-opt-in-layouts.png"
- srcDark="/docs/dark/route-group-opt-in-layouts.png"
- width="1600"
- height="930"
-/>
-
-### 特定ルートにローディングスケルトンを選択する {#opting-for-loading-skeletons-on-a-specific-route}
-
-`loading.js` ファイルを使って特定のルートに [ローディングスケルトン](/docs/app/building-your-application/routing/loading-ui-and-streaming) を適用するには、新しい Route Group（例：`/(overview)`）を作成し、そのグループ内に `loading.tsx` を移動します。
-
-<Image
- alt="Route グループ内に loading.tsx と page.tsx が含まれるフォルダ構造"
- srcLight="/docs/light/route-group-loading.png"
- srcDark="/docs/dark/route-group-loading.png"
- width="1600"
- height="444"
-/>
-
-これで、`loading.tsx` ファイルはダッシュボード → 概要ページにのみ適用され、他のダッシュボードページには影響を与えずに URL パスの構造も影響しません。
-
-### 複数の root レイアウトを作成する {#creating-multiple-root-layouts}
-
-複数の [root レイアウト](/docs/app/building-your-application/routing/layouts-and-templates#root-layout-required) を作成するには、トップレベルの `layout.js` ファイルを削除し、各 Route Group 内に `layout.js` ファイルを追加します。これは、UI や体験が完全に異なるセクションにアプリケーションを分割するのに便利です。それぞれの root レイアウトに `<html>` と `<body>` タグを追加する必要があります。
-
-<Image
- alt="複数の root レイアウトを持つ Route Group"
- srcLight="/docs/light/route-group-multiple-root-layouts.png"
- srcDark="/docs/dark/route-group-multiple-root-layouts.png"
- width="1600"
- height="687"
-/>
-
-上記の例では、`(marketing)` と `(shop)` はそれぞれ自身の root レイアウトを持っています。
-
----
+Route Groupは、フォルダ名を括弧で囲むことで作成できます：`(folderName)`
> **Good to know**:
>
-> - Route Groups の命名は、組織のためのものであり、それ自体に特別な意味はありません。URL パスには影響を与えません。
-> - Route Group を含むルートは、他のルートと同じ URL パスに解決 **されないようにする必要があります。** 例えば、Route Groups は URL 構造に影響を与えないため、`(marketing)/about/page.js` と `(shop)/about/page.js` はどちらも `/about` に解決してエラーを引き起こします。
-> - 複数の root レイアウトをトップレベルの `layout.js` ファイルなしで使用する場合、ホームの `page.js` ファイルは Route Groups のひとつに定義する必要があります。例えば：`app/(marketing)/page.js`。
-> - **複数の root レイアウト間**をナビゲートすることは、（クライアントサイドのナビゲーションとは対照的に）**完全なページロード** を引き起こします。例えば、`app/(shop)/layout.js` を使用している `/cart` から、`app/(marketing)/layout.js` を使用している `/blog` へナビゲートすると完全なページロードが発生します。これは **複数の root レイアウトにのみ** 適用されます。
+> - Route Groupの命名は、組織化以外に特別な意味を持ちません。URLパスには影響を与えません。
+> - Route Groupを含むルートは、他のルートと同じURLパスに解決される**べきではありません**。たとえば、Route GroupはURL構造に影響を与えないため、`(marketing)/about/page.js`と`(shop)/about/page.js`はどちらも`/about`に解決され、エラーが発生します。
+> - トップレベルの`layout.js`ファイルなしで複数のroot レイアウトを使用する場合、ホームの`page.js`ファイルはRoute Groupの1つに定義する必要があります。例：`app/(marketing)/page.js`。
+> - **複数のroot レイアウトをまたいで**ナビゲートすると、**フルページロード**が発生します（クライアントサイドのナビゲーションとは異なります）。たとえば、`app/(shop)/layout.js`を使用する`/cart`から`app/(marketing)/layout.js`を使用する`/blog`にナビゲートすると、フルページロードが発生します。これは**複数のroot レイアウト**にのみ適用されます。
diff --git a/docs/01-app/03-building-your-application/06-optimizing/14-local-development.mdx b/docs/01-app/03-building-your-application/06-optimizing/14-local-development.mdx
index b2949d98..2795dc10 100644
--- a/docs/01-app/03-building-your-application/06-optimizing/14-local-development.mdx
+++ b/docs/01-app/03-building-your-application/06-optimizing/14-local-development.mdx
@@ -23,14 +23,14 @@ Next.jsは、優れた開発者体験を提供するように設計されてい
Next.jsの最新バージョンを使用していることを確認してください。新しいバージョンには、パフォーマンスの向上が含まれていることがよくあります。
-Turbopackは、Next.jsに統合された新しいバンドラーで、ローカルパフォーマンスを向上させることができます。
+Turbopackは、Next.jsに統合された新しいバンドラーで、ローカルのパフォーマンスを向上させることができます。
```bash
npm install next@latest
npm run dev --turbopack
```
-[Turbopackについて詳しく学ぶ](https://nextjs.org/blog/turbopack-for-development-stable)。詳細については、[アップグレードガイド](/docs/app/building-your-application/upgrading)とコードモッドをご覧ください。
+[Turbopackについて詳しくはこちら](https://nextjs.org/blog/turbopack-for-development-stable)。詳細については、[アップグレードガイド](/docs/app/building-your-application/upgrading)とコードモッドをご覧ください。
### 3. インポートを確認する {#3-check-your-imports}
@@ -62,9 +62,9 @@ import Icon2 from 'react-icons/md/Icon2'
### バレルファイル {#barrel-files}
-「バレルファイル」は、他のファイルから多くのアイテムをエクスポートするファイルです。これらは、モジュールスコープ内で副作用があるかどうかをインポートを使用して解析する必要があるため、ビルドを遅くする可能性があります。
+"バレルファイル"は、他のファイルから多くのアイテムをエクスポートするファイルです。これらは、モジュールスコープ内で副作用があるかどうかをインポートを使用してコンパイラが解析する必要があるため、ビルドを遅くする可能性があります。
-可能であれば、特定のファイルから直接インポートするようにしてください。[バレルファイルについて詳しく学ぶ](https://vercel.com/blog/how-we-optimized-package-imports-in-next-js)と、Next.jsにおける組み込みの最適化について学びましょう。
+可能であれば、特定のファイルから直接インポートするようにしてください。[バレルファイルについて詳しくはこちら](https://vercel.com/blog/how-we-optimized-package-imports-in-next-js)とNext.jsの組み込み最適化について学びましょう。
### パッケージインポートの最適化 {#optimize-package-imports}
@@ -84,7 +84,7 @@ Tailwind CSSを使用している場合は、正しく設定されているこ
一般的な間違いは、`content`配列を`node_modules`やスキャンすべきでない他の大きなディレクトリを含むように設定することです。
-Tailwind CSSバージョン3.4.8以降では、ビルドを遅くする可能性のある設定について警告します。
+Tailwind CSSバージョン3.4.8以降では、ビルドを遅くする可能性のある設定について警告が表示されます。
1. `tailwind.config.js`で、スキャンするファイルを具体的に指定します：
@@ -99,12 +99,12 @@ Tailwind CSSバージョン3.4.8以降では、ビルドを遅くする可能性
}
```
-2. 不要なファイルのスキャンを避けます：
+2. 不要なファイルのスキャンを避ける：
```jsx
module.exports = {
content: [
- // より良い例 - 'src'フォルダのみをスキャン
+ // より良い - 'src'フォルダのみをスキャン
'../../packages/ui/src/**/*.{js,ts,jsx,tsx}',
],
}
@@ -114,27 +114,27 @@ Tailwind CSSバージョン3.4.8以降では、ビルドを遅くする可能性
カスタムwebpack設定を追加した場合、それがコンパイルを遅くしている可能性があります。
-ローカル開発に本当に必要かどうかを検討してください。特定のツールを本番ビルドのみに含めるか、Turbopackに移行して[loaders](/docs/app/api-reference/config/next-config-js/turbo#supported-loaders)を使用することを検討してください。
+ローカル開発に本当に必要かどうかを検討してください。特定のツールを本番ビルドのみに含めるか、Turbopackに移行して[loaders](/docs/app/api-reference/config/next-config-js/turbopack#supported-loaders)を使用することを検討してください。
### 6. メモリ使用量の最適化 {#6-optimize-memory-usage}
アプリが非常に大きい場合、より多くのメモリが必要になるかもしれません。
-[メモリ使用量の最適化について詳しく学ぶ](/docs/app/building-your-application/optimizing/memory-usage)。
+[メモリ使用量の最適化について詳しくはこちら](/docs/app/building-your-application/optimizing/memory-usage)。
### 7. Server Componentsとデータフェッチ {#7-server-components-and-data-fetching}
-Server Componentsへの変更は、ページ全体を再レンダリングし、新しいデータをコンポーネントに表示するためにローカルで再レンダリングを引き起こします。
+Server Componentsへの変更は、新しい変更を表示するためにページ全体を再レンダリングする必要があり、コンポーネントの新しいデータをフェッチすることを含みます。
実験的な`serverComponentsHmrCache`オプションを使用すると、ローカル開発中のホットモジュールリプレースメント（HMR）リフレッシュ間でServer Components内の`fetch`レスポンスをキャッシュできます。これにより、応答が高速化され、課金されるAPIコールのコストが削減されます。
-[実験的オプションについて詳しく学ぶ](/docs/app/api-reference/config/next-config-js/serverComponentsHmrCache)。
+[実験的オプションについて詳しくはこちら](/docs/app/api-reference/config/next-config-js/serverComponentsHmrCache)。
## 問題を見つけるためのツール {#tools-for-finding-problems}
-### 詳細なfetchログ {#detailed-fetch-logging}
+### 詳細なフェッチログ {#detailed-fetch-logging}
-開発中に何が起こっているのかをより詳細に知るために、このコマンドを使用してください：
+開発中に何が起こっているのかをより詳細に確認するには、このコマンドを使用してください：
```bash
next dev --verbose
@@ -145,7 +145,7 @@ next dev --verbose
すべて試しても問題が解決しない場合：
1. 問題を示すアプリの簡単なバージョンを作成します。
-2. 何が起こっているのかを示す特別なファイルを生成します：
+2. 何が起こっているかを示す特別なファイルを生成します：
```bash
NEXT_CPU_PROF=1 npm run dev
diff --git a/docs/01-app/03-building-your-application/07-configuring/05-mdx.mdx b/docs/01-app/03-building-your-application/07-configuring/05-mdx.mdx
index 1535570f..72125baf 100644
--- a/docs/01-app/03-building-your-application/07-configuring/05-mdx.mdx
+++ b/docs/01-app/03-building-your-application/07-configuring/05-mdx.mdx
@@ -1,10 +1,10 @@
---
title: 'MarkdownとMDX'
nav_title: 'MDX'
-description: 'MDXを設定し、Next.jsアプリでの使用方法を学びましょう。'
+description: 'MDXを設定し、Next.jsアプリで使用する方法を学びます。'
---
-{/* このドキュメントの内容はapp routerとpages routerの間で共有されています。Pages Routerに特化した内容を追加するには、`<PagesOnly>Content</PagesOnly>`コンポーネントを使用できます。共有されるコンテンツはコンポーネントでラップしないでください。 */}
+{/* このドキュメントの内容はapp routerとpages routerの間で共有されています。Pages Routerに特有のコンテンツを追加するには、`<PagesOnly>Content</PagesOnly>`コンポーネントを使用できます。共有コンテンツはコンポーネントでラップしないでください。 */}
[Markdown](https://daringfireball.net/projects/markdown/syntax)は、テキストをフォーマットするための軽量マークアップ言語です。プレーンテキストの構文を使用して書き、それを構造的に有効なHTMLに変換することができます。ウェブサイトやブログのコンテンツを書く際によく使用されます。
@@ -20,7 +20,7 @@ I **love** using [Next.js](https://nextjs.org/)
<p>I <strong>love</strong> using <a href="https://nextjs.org/">Next.js</a></p>
```
-[MDX](https://mdxjs.com/)は、Markdownのスーパーセットであり、Markdownファイル内で直接[JSX](https://react.dev/learn/writing-markup-with-jsx)を書くことができます。これは、動的なインタラクティビティを追加し、Reactコンポーネントをコンテンツ内に埋め込む強力な方法です。
+[MDX](https://mdxjs.com/)は、Markdownのスーパーセットであり、[JSX](https://react.dev/learn/writing-markup-with-jsx)をMarkdownファイル内で直接書くことができます。これは、動的なインタラクティビティを追加し、Reactコンポーネントをコンテンツ内に埋め込む強力な方法です。
Next.jsは、アプリケーション内のローカルMDXコンテンツと、サーバー上で動的にフェッチされるリモートMDXファイルの両方をサポートできます。Next.jsプラグインは、MarkdownとReactコンポーネントをHTMLに変換する処理を行い、Server Components（App Routerでのデフォルト）での使用もサポートしています。
@@ -38,7 +38,7 @@ npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx
## `next.config.mjs`の設定 {#configure-next-config-mjs}
-プロジェクトのルートにある`next.config.mjs`ファイルを更新して、MDXを使用するように設定します:
+プロジェクトのrootにある`next.config.mjs`ファイルを更新して、MDXを使用するように設定します:
```js title="next.config.mjs"
import createMDX from '@next/mdx'
@@ -47,22 +47,22 @@ import createMDX from '@next/mdx'
const nextConfig = {
// `pageExtensions`を設定して、MarkdownとMDXファイルを含める
pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
- // 必要に応じて、他のNext.jsの設定を追加
+ // 必要に応じて、他のNext.jsの設定を以下に追加
}
const withMDX = createMDX({
- // 必要に応じてMarkdownプラグインを追加
+ // 必要に応じてMarkdownプラグインをここに追加
})
// MDX設定とNext.js設定をマージ
export default withMDX(nextConfig)
```
-これにより、`.md`および`.mdx`ファイルをアプリケーション内のページ、ルート、またはインポートとして使用できるようになります。
+これにより、`.md`および`.mdx`ファイルがアプリケーション内でページ、ルート、またはインポートとして機能するようになります。
## `mdx-components.tsx`ファイルの追加 {#add-an-mdx-components-tsx-file}
-プロジェクトのルートに`mdx-components.tsx`（または`.js`）ファイルを作成して、グローバルなMDXコンポーネントを定義します。例えば、`pages`や`app`と同じレベル、または該当する場合は`src`内に配置します。
+プロジェクトのrootに`mdx-components.tsx`（または`.js`）ファイルを作成して、グローバルなMDXコンポーネントを定義します。たとえば、`pages`や`app`と同じレベル、または該当する場合は`src`内に配置します。
<Tabs>
<TabItem value="tsx" label="TypeScript">
@@ -95,7 +95,7 @@ export function useMDXComponents(components) {
>
> - `mdx-components.tsx`は、App Routerで`@next/mdx`を使用するために**必須**であり、これがないと動作しません。
> - [`mdx-components.tsx`ファイルの規約](/docs/app/api-reference/file-conventions/mdx-components)について詳しく学びましょう。
-> - [カスタムスタイルとコンポーネントの使用](#using-custom-styles-and-components)方法を学びましょう。
+> - [カスタムスタイルとコンポーネントの使用](#using-custom-styles-and-components)について学びましょう。
## MDXのレンダリング {#rendering-mdx}
@@ -136,7 +136,7 @@ App Routerアプリでは、[メタデータ](/docs/app/building-your-applicatio
</PagesOnly>
-これらのファイル内でMDXを使用し、MDXページ内で直接Reactコンポーネントをインポートすることもできます:
+これらのファイル内でMDXを使用し、MDXページ内でReactコンポーネントを直接インポートすることもできます:
```mdx
import { MyComponent } from 'my-component'
@@ -165,13 +165,13 @@ Checkout my React component:
`/app`ディレクトリ内に新しいページを作成し、任意の場所にMDXファイルを作成します:
```txt
- my-project
- ├── app
- │ └── mdx-page
+ .
+ ├── app/
+ │ └── mdx-page/
│ └── page.(tsx/js)
- ├── markdown
+ ├── markdown/
│ └── welcome.(mdx/md)
- |── mdx-components.(tsx/js)
+ ├── mdx-components.(tsx/js)
└── package.json
```
@@ -182,18 +182,18 @@ Checkout my React component:
`/pages`ディレクトリ内に新しいページを作成し、任意の場所にMDXファイルを作成します:
```txt
- my-project
- ├── pages
- │ └── mdx-page.(tsx/js)
- ├── markdown
+ .
+ ├── markdown/
│ └── welcome.(mdx/md)
- |── mdx-components.(tsx/js)
+ ├── pages/
+ │ └── mdx-page.(tsx/js)
+ ├── mdx-components.(tsx/js)
└── package.json
```
</PagesOnly>
-これらのファイル内でMDXを使用し、MDXページ内で直接Reactコンポーネントをインポートすることもできます:
+これらのファイル内でMDXを使用し、MDXページ内でReactコンポーネントを直接インポートすることもできます:
<Tabs>
<TabItem value="mdx" label="mdx">
@@ -219,7 +219,7 @@ Checkout my React component:
</TabItem>
</Tabs>
-ページ内でMDXファイルをインポートしてコンテンツを表示します:
+ページ内でMDXファイルをインポートして、コンテンツを表示します:
<AppOnly>
@@ -285,9 +285,9 @@ export default function Page() {
### 動的インポートを使用する {#using-dynamic-imports}
-ファイルシステムルーティングを使用せずに、動的なMDXコンポーネントをインポートできます。
+ファイルシステムルーティングを使用する代わりに、動的MDXコンポーネントをインポートできます。
-例えば、別のディレクトリからMDXコンポーネントをロードする動的ルートセグメントを持つことができます:
+たとえば、別のディレクトリからMDXコンポーネントをロードする動的ルートセグメントを持つことができます:
<Image
alt="動的MDXコンポーネントのルートセグメント"
@@ -297,7 +297,7 @@ export default function Page() {
height="849"
/>
-[`generateStaticParams`](/docs/app/api-reference/functions/generate-static-params)を使用して、提供されたルートを事前レンダリングできます。`dynamicParams`を`false`に設定すると、`generateStaticParams`で定義されていないルートにアクセスすると404になります。
+[`generateStaticParams`](/docs/app/api-reference/functions/generate-static-params)を使用して、提供されたルートをプリレンダリングできます。`dynamicParams`を`false`に設定すると、`generateStaticParams`で定義されていないルートにアクセスすると404になります。
<Tabs>
<TabItem value="tsx" label="TypeScript">
@@ -342,13 +342,13 @@ export const dynamicParams = false
</TabItem>
</Tabs>
-> **Good to know**: インポート時に`.mdx`ファイル拡張子を指定してください。[モジュールパスエイリアス](/docs/app/getting-started/installation#set-up-absolute-imports-and-module-path-aliases)（例: `@/content`）を使用する必要はありませんが、インポートパスを簡素化します。
+> **Good to know**: インポート時に`.mdx`ファイル拡張子を指定することを確認してください。[モジュールパスエイリアス](/docs/app/getting-started/installation#set-up-absolute-imports-and-module-path-aliases)（例: `@/content`）を使用する必要はありませんが、インポートパスを簡素化します。
</AppOnly>
## カスタムスタイルとコンポーネントの使用 {#using-custom-styles-and-components}
-MarkdownはレンダリングされるとネイティブのHTML要素にマッピングされます。例えば、次のMarkdownを書くと:
+Markdownはレンダリングされると、ネイティブのHTML要素にマッピングされます。たとえば、次のMarkdownを書くと:
```md
## This is a heading {#this-is-a-heading}
@@ -440,7 +440,7 @@ export function useMDXComponents(components) {
### ローカルスタイルとコンポーネント {#local-styles-and-components}
-インポートしたMDXコンポーネントに渡すことで、特定のページにローカルスタイルとコンポーネントを適用できます。これらは[グローバルスタイルとコンポーネント](#global-styles-and-components)とマージされ、上書きされます。
+インポートしたMDXコンポーネントにスタイルとコンポーネントを渡すことで、特定のページにローカルスタイルとコンポーネントを適用できます。これらは[グローバルスタイルとコンポーネント](#global-styles-and-components)とマージされ、上書きされます。
<AppOnly>
@@ -590,7 +590,7 @@ export default function MdxLayout({ children }) {
</TabItem>
</Tabs>
-次に、MDXページにレイアウトコンポーネントをインポートし、MDXコンテンツをレイアウトでラップしてエクスポートします:
+次に、レイアウトコンポーネントをMDXページにインポートし、MDXコンテンツをレイアウトでラップしてエクスポートします:
```mdx
import MdxLayout from '../components/mdx-layout'
@@ -611,7 +611,7 @@ export default function MDXPage({ children }) {
このプラグインは、Markdownのようなソースからのコンテンツブロックにタイポグラフィスタイルを追加するための`prose`クラスを追加します。
-[Tailwind typographyのインストール](https://github.com/tailwindlabs/tailwindcss-typography?tab=readme-ov-file#installation)を行い、[共有レイアウト](#shared-layouts)で使用して、必要な`prose`を追加します。
+[Tailwind typographyのインストール](https://github.com/tailwindlabs/tailwindcss-typography?tab=readme-ov-file#installation)と[共有レイアウト](#shared-layouts)を使用して、必要な`prose`を追加します。
<AppOnly>
@@ -683,7 +683,7 @@ export default function MdxLayout({ children }) {
</TabItem>
</Tabs>
-次に、MDXページにレイアウトコンポーネントをインポートし、MDXコンテンツをレイアウトでラップしてエクスポートします:
+次に、レイアウトコンポーネントをMDXページにインポートし、MDXコンテンツをレイアウトでラップしてエクスポートします:
```mdx
import MdxLayout from '../components/mdx-layout'
@@ -700,13 +700,13 @@ export default function MDXPage({ children }) {
## Frontmatter {#frontmatter}
-Frontmatterは、ページに関するデータを保存するために使用できるYAMLのようなキー/値のペアリングです。`@next/mdx`はデフォルトではFrontmatterをサポートしていませんが、MDXコンテンツにFrontmatterを追加するための多くのソリューションがあります。例えば:
+Frontmatterは、ページに関するデータを保存するために使用できるYAMLのようなキー/値のペアリングです。`@next/mdx`はデフォルトではfrontmatterをサポートしていませんが、MDXコンテンツにfrontmatterを追加するための多くのソリューションがあります。例えば:
- [remark-frontmatter](https://github.com/remarkjs/remark-frontmatter)
- [remark-mdx-frontmatter](https://github.com/remcohaszing/remark-mdx-frontmatter)
- [gray-matter](https://github.com/jonschlinkert/gray-matter)
-`@next/mdx`は、他のJavaScriptコンポーネントと同様にエクスポートを使用することを許可しています:
+`@next/mdx`は、他のJavaScriptコンポーネントと同様にエクスポートを使用することを許可します:
<Tabs>
<TabItem value="mdx" label="mdx">
@@ -790,18 +790,18 @@ export default function Page() {
</PagesOnly>
-これの一般的な使用例は、MDXのコレクションを反復処理してデータを抽出したい場合です。例えば、すべてのブログ投稿からブログインデックスページを作成することです。Nodeの[`fs`モジュール](https://nodejs.org/api/fs.html)や[globby](https://www.npmjs.com/package/globby)などのパッケージを使用して、投稿のディレクトリを読み取り、メタデータを抽出できます。
+これの一般的な使用例は、MDXのコレクションを反復処理してデータを抽出したい場合です。たとえば、すべてのブログ投稿からブログインデックスページを作成することです。[Nodeの`fs`モジュール](https://nodejs.org/api/fs.html)や[globby](https://www.npmjs.com/package/globby)などのパッケージを使用して、投稿のディレクトリを読み取り、メタデータを抽出できます。
> **Good to know**:
>
-> - `fs`、`globby`などはサーバーサイドでのみ使用できます。
+> - `fs`、`globby`などの使用はサーバーサイドでのみ可能です。
> - 完全な動作例については、[Portfolio Starter Kit](https://vercel.com/templates/next.js/portfolio-starter-kit)テンプレートを参照してください。
## remarkとrehypeプラグイン {#remark-and-rehype-plugins}
MDXコンテンツを変換するために、remarkとrehypeプラグインをオプションで提供できます。
-例えば、[`remark-gfm`](https://github.com/remarkjs/remark-gfm)を使用してGitHub Flavored Markdownをサポートできます。
+たとえば、[`remark-gfm`](https://github.com/remarkjs/remark-gfm)を使用してGitHub Flavored Markdownをサポートできます。
remarkとrehypeのエコシステムはESMのみであるため、設定ファイルとして`next.config.mjs`または`next.config.ts`を使用する必要があります。
@@ -811,13 +811,13 @@ import createMDX from '@next/mdx'
/** @type {import('next').NextConfig} */
const nextConfig = {
- // ファイルの.md拡張子を許可
+ // ファイルの.mdおよび.mdx拡張子を許可
pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
- // 必要に応じて、他のNext.jsの設定を追加
+ // 必要に応じて、他のNext.jsの設定を以下に追加
}
const withMDX = createMDX({
- // 必要に応じてMarkdownプラグインを追加
+ // 必要に応じてMarkdownプラグインをここに追加
options: {
remarkPlugins: [remarkGfm],
rehypePlugins: [],
@@ -852,7 +852,7 @@ export default withMDX(nextConfig)
> **Good to know**:
>
-> シリアライズ可能なオプションを持たないremarkとrehypeプラグインは、[Turbopack](/docs/app/api-reference/turbopack)ではまだ使用できません。これは、[JavaScript関数をRustに渡すことができないため](https://github.com/vercel/next.js/issues/71819#issuecomment-2461802968)です。
+> シリアライズ可能なオプションを持たないremarkとrehypeプラグインは、[JavaScript関数をRustに渡すことができないため](https://github.com/vercel/next.js/issues/71819#issuecomment-2461802968)、まだ[Turbopack](/docs/app/api-reference/turbopack)で使用できません。
## リモートMDX {#remote-mdx}
@@ -860,7 +860,7 @@ MDXファイルやコンテンツが*他の場所*にある場合、サーバー
> **Good to know**: 注意して進めてください。MDXはJavaScriptにコンパイルされ、サーバー上で実行されます。信頼できるソースからのみMDXコンテンツをフェッチする必要があります。そうしないと、リモートコード実行（RCE）につながる可能性があります。
-次の例では`next-mdx-remote`を使用しています:
+次の例では、`next-mdx-remote`を使用しています:
<AppOnly>
@@ -952,9 +952,9 @@ export async function getStaticProps() {
## 深掘り: MarkdownをHTMLに変換する方法 {#deep-dive-how-do-you-transform-markdown-into-html}
-ReactはMarkdownをネイティブに理解しません。Markdownのプレーンテキストは、まずHTMLに変換する必要があります。これは`remark`と`rehype`で実現できます。
+ReactはネイティブにMarkdownを理解しません。Markdownのプレーンテキストは、まずHTMLに変換する必要があります。これは`remark`と`rehype`で実現できます。
-`remark`はMarkdownに関するツールのエコシステムです。`rehype`はHTMLに関する同様のものです。例えば、次のコードスニペットはMarkdownをHTMLに変換します:
+`remark`はMarkdownに関するツールのエコシステムです。`rehype`はHTMLに関する同様のものです。たとえば、次のコードスニペットはMarkdownをHTMLに変換します:
```js
import { unified } from 'unified'
@@ -979,11 +979,11 @@ async function main() {
`remark`と`rehype`のエコシステムには、[シンタックスハイライト](https://github.com/atomiks/rehype-pretty-code)、[見出しのリンク](https://github.com/rehypejs/rehype-autolink-headings)、[目次の生成](https://github.com/remarkjs/remark-toc)などのプラグインがあります。
-上記のように`@next/mdx`を使用する場合、`remark`や`rehype`を直接使用する必要はありません。これらは自動的に処理されます。ここでは、`@next/mdx`パッケージが内部で行っていることをより深く理解するために説明しています。
+上記のように`@next/mdx`を使用する場合、`remark`や`rehype`を直接使用する必要はありません。これは自動的に処理されます。ここでは、`@next/mdx`パッケージが内部で行っていることをより深く理解するために説明しています。
## RustベースのMDXコンパイラの使用（実験的） {#using-the-rust-based-mdx-compiler-experimental}
-Next.jsはRustで書かれた新しいMDXコンパイラをサポートしています。このコンパイラはまだ実験的であり、本番環境での使用は推奨されません。新しいコンパイラを使用するには、`next.config.js`を`withMDX`に渡すときに設定する必要があります:
+Next.jsはRustで書かれた新しいMDXコンパイラをサポートしています。このコンパイラはまだ実験的であり、本番環境での使用は推奨されません。新しいコンパイラを使用するには、`withMDX`に渡すときに`next.config.js`を設定する必要があります:
```js title="next.config.js"
module.exports = withMDX({
diff --git a/docs/01-app/03-building-your-application/11-upgrading/06-from-create-react-app.mdx b/docs/01-app/03-building-your-application/11-upgrading/06-from-create-react-app.mdx
index 411dbf5c..7df2b099 100644
--- a/docs/01-app/03-building-your-application/11-upgrading/06-from-create-react-app.mdx
+++ b/docs/01-app/03-building-your-application/11-upgrading/06-from-create-react-app.mdx
@@ -1,89 +1,87 @@
---
-title: 'Create React Appからの移行'
-nav_title: 'CRAからの移行'
-description: '既存のReactアプリケーションをCreate React AppからNext.jsに移行する方法を学びます。'
+title: 'Create React App からの移行'
+nav_title: 'CRA からの移行'
+description: '既存の React アプリケーションを Create React App から Next.js に移行する方法を学びます。'
---
-このガイドは、既存のCreate React App（CRA）サイトをNext.jsに移行するのに役立ちます。
+このガイドでは、既存の Create React App (CRA) サイトを Next.js に移行する方法を説明します。
-## なぜ切り替えるのか？ {#why-switch}
+## なぜ移行するのか？ {#why-switch}
-Create React AppからNext.jsに切り替えたい理由はいくつかあります。
+Create React App から Next.js に移行したい理由はいくつかあります：
### 初期ページの読み込み時間が遅い {#slow-initial-page-loading-time}
-Create React Appは純粋にクライアントサイドのReactを使用しています。クライアントサイドのみのアプリケーション、別名[シングルページアプリケーション（SPA）](/docs/app/building-your-application/upgrading/single-page-applications)は、初期ページの読み込み時間が遅くなることがよくあります。これはいくつかの理由で発生します。
+Create React App は純粋にクライアントサイドの React を使用しています。クライアントサイドのみのアプリケーション、別名 [シングルページアプリケーション (SPA)](/docs/app/building-your-application/upgrading/single-page-applications) は、初期ページの読み込み時間が遅くなることがよくあります。これにはいくつかの理由があります：
-1. ブラウザは、Reactコードとアプリケーション全体のバンドルがダウンロードされて実行されるのを待つ必要があり、その後にコードがデータをロードするためのリクエストを送信できるようになります。
+1. ブラウザは、React コードとアプリケーション全体のバンドルがダウンロードされて実行されるのを待つ必要があります。
2. 新しい機能や依存関係を追加するたびに、アプリケーションコードが増加します。
### 自動コード分割がない {#no-automatic-code-splitting}
-前述の読み込み時間の遅さの問題は、コード分割によってある程度緩和できます。しかし、手動でコード分割を試みると、ネットワークウォーターフォールを誤って導入する可能性があります。Next.jsは、自動コード分割とtree-shakingをルーターとビルドパイプラインに組み込んでいます。
+前述の読み込み時間の遅さの問題は、コード分割である程度緩和できます。しかし、手動でコード分割を試みると、ネットワークのウォーターフォールを引き起こす可能性があります。Next.js は、自動コード分割と tree-shaking をルーターとビルドパイプラインに組み込んでいます。
### ネットワークウォーターフォール {#network-waterfalls}
-パフォーマンスが悪化する一般的な原因は、アプリケーションがデータを取得するためにクライアントとサーバー間で順次リクエストを行うことです。[SPA](/docs/app/building-your-application/upgrading/single-page-applications)でのデータ取得のパターンの1つは、プレースホルダーをレンダリングし、コンポーネントがマウントされた後にデータを取得することです。残念ながら、子コンポーネントは親が自身のデータを読み込むのを完了した後にのみデータを取得し始めることができ、リクエストの「ウォーターフォール」を引き起こします。
+パフォーマンスが悪化する一般的な原因は、アプリケーションがデータを取得するためにクライアントとサーバー間で順次リクエストを行うことです。[SPA](/docs/app/building-your-application/upgrading/single-page-applications) でのデータ取得のパターンの1つは、プレースホルダーをレンダリングし、コンポーネントがマウントされた後にデータを取得することです。残念ながら、子コンポーネントは親が自身のデータを読み込むのを完了した後でしかデータを取得できず、リクエストの「ウォーターフォール」を引き起こします。
-Next.jsではクライアントサイドのデータ取得がサポートされていますが、Next.jsではデータ取得をサーバーに移動することもできます。これにより、クライアントとサーバー間のウォーターフォールが完全に排除されることがよくあります。
+Next.js ではクライアントサイドのデータ取得もサポートされていますが、データ取得をサーバーに移動することもできます。これにより、クライアントとサーバー間のウォーターフォールが完全に排除されることがよくあります。
### 高速で意図的な読み込み状態 {#fast-and-intentional-loading-states}
-[React Suspenseを通じたストリーミング](/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense)の組み込みサポートにより、ネットワークウォーターフォールを作成せずに、UIのどの部分を最初にどの順序で読み込むかを定義できます。
-
-これにより、読み込みが速く、[レイアウトシフト](https://vercel.com/blog/how-core-web-vitals-affect-seo)を排除するページを構築できます。
+[React Suspense を通じたストリーミング](/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense) の組み込みサポートにより、UI のどの部分を最初に、どの順序で読み込むかを定義できます。これにより、ネットワークウォーターフォールを作成せずにページを高速に読み込むことができ、[レイアウトシフト](https://vercel.com/blog/how-core-web-vitals-affect-seo)を排除できます。
### データ取得戦略の選択 {#choose-the-data-fetching-strategy}
-ニーズに応じて、Next.jsではページまたはコンポーネントレベルでデータ取得戦略を選択できます。たとえば、CMSからデータを取得し、ブログ投稿をビルド時（SSG）にレンダリングして高速な読み込み速度を実現したり、必要に応じてリクエスト時（SSR）にデータを取得したりできます。
+必要に応じて、Next.js ではページまたはコンポーネントレベルでデータ取得戦略を選択できます。たとえば、CMS からデータを取得し、ビルド時（SSG）にブログ投稿をレンダリングして高速な読み込み速度を実現したり、必要に応じてリクエスト時（SSR）にデータを取得したりできます。
### ミドルウェア {#middleware}
-[Next.js Middleware](/docs/app/building-your-application/routing/middleware)を使用すると、リクエストが完了する前にサーバー上でコードを実行できます。たとえば、認証が必要なページのミドルウェアでユーザーをログインページにリダイレクトすることで、認証されていないコンテンツのフラッシュを回避できます。また、A/Bテスト、実験、[国際化](/docs/app/building-your-application/routing/internationalization)などの機能にも使用できます。
+[Next.js ミドルウェア](/docs/app/building-your-application/routing/middleware) を使用すると、リクエストが完了する前にサーバー上でコードを実行できます。たとえば、認証が必要なページのミドルウェアでユーザーをログインページにリダイレクトすることで、未認証コンテンツのフラッシュを回避できます。また、A/B テスト、実験、[国際化](/docs/app/building-your-application/routing/internationalization) などの機能にも使用できます。
### 組み込みの最適化 {#built-in-optimizations}
-[画像](/docs/app/building-your-application/optimizing/images)、[フォント](/docs/app/building-your-application/optimizing/fonts)、および[サードパーティのスクリプト](/docs/app/building-your-application/optimizing/scripts)は、アプリケーションのパフォーマンスに大きな影響を与えることがよくあります。Next.jsには、これらを自動的に最適化するための専門のコンポーネントとAPIが含まれています。
+[画像](/docs/app/building-your-application/optimizing/images)、[フォント](/docs/app/building-your-application/optimizing/fonts)、および[サードパーティスクリプト](/docs/app/building-your-application/optimizing/scripts) は、アプリケーションのパフォーマンスに大きな影響を与えることがよくあります。Next.js には、これらを自動的に最適化するための専用コンポーネントと API が含まれています。
## 移行手順 {#migration-steps}
-私たちの目標は、できるだけ早く動作するNext.jsアプリケーションを作成し、その後、Next.jsの機能を段階的に採用できるようにすることです。まず、既存のルーターをすぐに置き換えることなく、アプリケーションを純粋なクライアントサイドアプリケーション（[SPA](/docs/app/building-your-application/upgrading/single-page-applications)）として扱います。これにより、複雑さとマージの競合が軽減されます。
+私たちの目標は、できるだけ早く動作する Next.js アプリケーションを作成し、その後で Next.js の機能を段階的に採用できるようにすることです。まず、アプリケーションを純粋なクライアントサイドアプリケーション（[SPA](/docs/app/building-your-application/upgrading/single-page-applications)）として扱い、既存のルーターをすぐに置き換えないようにします。これにより、複雑さとマージの競合が軽減されます。
-> **注意**: `package.json`のカスタム`homepage`フィールド、カスタムサービスワーカー、特定のBabel/webpackの調整など、CRAの高度な設定を使用している場合は、Next.jsでこれらの機能を再現または適応するためのヒントについて、このガイドの最後の**追加の考慮事項**セクションを参照してください。
+> **Note**: `package.json` のカスタム `homepage` フィールド、カスタムサービスワーカー、特定の Babel/webpack 調整など、CRA の高度な設定を使用している場合は、このガイドの最後にある **追加の考慮事項** セクションを参照して、これらの機能を Next.js で再現または適応するためのヒントを確認してください。
-### ステップ1: Next.jsの依存関係をインストールする {#step-1-install-the-next-js-dependency}
+### ステップ 1: Next.js の依存関係をインストールする {#step-1-install-the-next-js-dependency}
-既存のプロジェクトにNext.jsをインストールします。
+既存のプロジェクトに Next.js をインストールします：
```bash title="Terminal"
npm install next@latest
```
-### ステップ2: Next.jsの設定ファイルを作成する {#step-2-create-the-next-js-configuration-file}
+### ステップ 2: Next.js の設定ファイルを作成する {#step-2-create-the-next-js-configuration-file}
-プロジェクトのルート（`package.json`と同じレベル）に`next.config.ts`を作成します。このファイルには、[Next.jsの設定オプション](/docs/app/api-reference/config/next-config-js)が含まれます。
+プロジェクトの root（`package.json` と同じレベル）に `next.config.ts` を作成します。このファイルには [Next.js の設定オプション](/docs/app/api-reference/config/next-config-js) が含まれます。
```js title="next.config.ts"
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
- output: 'export', // シングルページアプリケーション（SPA）を出力します
- distDir: 'build', // ビルド出力ディレクトリを`build`に変更します
+ output: 'export', // シングルページアプリケーション (SPA) を出力します
+ distDir: 'build', // ビルド出力ディレクトリを `build` に変更します
}
export default nextConfig
```
-> **注意**: `output: 'export'`を使用すると、静的エクスポートを行っていることを意味します。サーバーサイドの機能（SSRやAPIなど）にはアクセスできません。この行を削除して、Next.jsのサーバー機能を活用できます。
+> **Note**: `output: 'export'` を使用すると、静的エクスポートを行っていることを意味します。サーバーサイドの機能（SSR や API など）にはアクセスできません。この行を削除して Next.js のサーバー機能を活用することができます。
-### ステップ3: Root レイアウトを作成する {#step-3-create-the-root-layout}
+### ステップ 3: root レイアウトを作成する {#step-3-create-the-root-layout}
-Next.js [App Router](/docs/app)アプリケーションには、すべてのページをラップする[React Server Component](/docs/app/building-your-application/rendering/server-components)である[root レイアウト](/docs/app/building-your-application/routing/layouts-and-templates#root-layout-required)ファイルが含まれている必要があります。
+Next.js の [App Router](/docs/app) アプリケーションには、すべてのページをラップする [root レイアウト](/docs/app/building-your-application/routing/layouts-and-templates#root-layout-required) ファイルが含まれている必要があります。これは、すべてのページをラップする [React Server Component](/docs/app/building-your-application/rendering/server-components) です。
-CRAアプリケーションでのroot レイアウトファイルに最も近いものは、`<html>`、`<head>`、および`<body>`タグを含む`public/index.html`です。
+CRA アプリケーションでの root レイアウトファイルに最も近いものは、`<html>`、`<head>`、および `<body>` タグを含む `public/index.html` です。
-1. `src`ディレクトリ内に新しい`app`ディレクトリを作成します（または、`app`をルートに配置する場合はプロジェクトのルートに作成します）。
-2. `app`ディレクトリ内に`layout.tsx`（または`layout.js`）ファイルを作成します。
+1. `src` ディレクトリ内に新しい `app` ディレクトリを作成します（または、`app` を root に配置する場合はプロジェクトの root に作成します）。
+2. `app` ディレクトリ内に `layout.tsx`（または `layout.js`）ファイルを作成します：
<Tabs>
<TabItem value="tsx" label="TypeScript">
@@ -110,7 +108,7 @@ export default function RootLayout({ children }) {
</TabItem>
</Tabs>
-次に、古い`index.html`の内容をこの`<RootLayout>`コンポーネントにコピーします。`body div#root`（および`body noscript`）を`<div id="root">{children}</div>`に置き換えます。
+次に、古い `index.html` の内容をこの `<RootLayout>` コンポーネントにコピーします。`body div#root`（および `body noscript`）を `<div id="root">{children}</div>` に置き換えます。
<Tabs>
<TabItem value="tsx" label="TypeScript">
@@ -163,11 +161,11 @@ export default function RootLayout({ children }) {
</TabItem>
</Tabs>
-> **Good to know**: Next.jsは、CRAの`public/manifest.json`、追加のアイコン、および[テスト設定](/docs/app/building-your-application/testing)をデフォルトで無視します。これらが必要な場合、Next.jsは[Metadata API](/docs/app/building-your-application/optimizing/metadata)と[Testing](/docs/app/building-your-application/testing)のセットアップでサポートしています。
+> **Good to know**: Next.js はデフォルトで CRA の `public/manifest.json`、追加のアイコン、および[テスト設定](/docs/app/building-your-application/testing)を無視します。これらが必要な場合、Next.js には [Metadata API](/docs/app/building-your-application/optimizing/metadata) と[テスト](/docs/app/building-your-application/testing)のセットアップでサポートがあります。
-### ステップ4: メタデータ {#step-4-metadata}
+### ステップ 4: メタデータ {#step-4-metadata}
-Next.jsは`<meta charset="UTF-8" />`と`<meta name="viewport" content="width=device-width, initial-scale=1" />`タグを自動的に含めるため、`<head>`から削除できます。
+Next.js は `<meta charset="UTF-8" />` と `<meta name="viewport" content="width=device-width, initial-scale=1" />` タグを自動的に含めるため、`<head>` から削除できます：
<Tabs>
<TabItem value="tsx" label="TypeScript">
@@ -216,7 +214,7 @@ export default function RootLayout({ children }) {
</TabItem>
</Tabs>
-`favicon.ico`、`icon.png`、`robots.txt`などの[メタデータファイル](/docs/app/building-your-application/optimizing/metadata#file-based-metadata)は、`app`ディレクトリのトップレベルに配置されている限り、アプリケーションの`<head>`タグに自動的に追加されます。すべての[サポートされているファイル](/docs/app/building-your-application/optimizing/metadata#file-based-metadata)を`app`ディレクトリに移動した後、それらの`<link>`タグを安全に削除できます。
+`favicon.ico`、`icon.png`、`robots.txt` などの[メタデータファイル](/docs/app/building-your-application/optimizing/metadata#file-based-metadata)は、`app` ディレクトリのトップレベルに配置されている限り、アプリケーションの `<head>` タグに自動的に追加されます。[すべてのサポートされているファイル](/docs/app/building-your-application/optimizing/metadata#file-based-metadata)を `app` ディレクトリに移動した後、それらの `<link>` タグを安全に削除できます：
<Tabs>
<TabItem value="tsx" label="TypeScript">
@@ -263,7 +261,7 @@ export default function RootLayout({ children }) {
</TabItem>
</Tabs>
-最後に、Next.jsは[Metadata API](/docs/app/building-your-application/optimizing/metadata)を使用して最後の`<head>`タグを管理できます。最終的なメタデータ情報をエクスポートされた[`metadata`オブジェクト](/docs/app/api-reference/functions/generate-metadata#metadata-object)に移動します。
+最後に、Next.js は [Metadata API](/docs/app/building-your-application/optimizing/metadata) を使用して最後の `<head>` タグを管理できます。最終的なメタデータ情報をエクスポートされた [`metadata` オブジェクト](/docs/app/api-reference/functions/generate-metadata#metadata-object) に移動します：
<Tabs>
<TabItem value="tsx" label="TypeScript">
@@ -314,13 +312,13 @@ export default function RootLayout({ children }) {
</TabItem>
</Tabs>
-上記の変更により、`index.html`ですべてを宣言することから、フレームワークに組み込まれたNext.jsの規約ベースのアプローチ（[Metadata API](/docs/app/building-your-application/optimizing/metadata)）を使用するようにシフトしました。このアプローチにより、ページのSEOとWebの共有性をより簡単に向上させることができます。
+上記の変更により、`index.html` にすべてを宣言するのではなく、Next.js のフレームワークに組み込まれた規約ベースのアプローチを使用するようにシフトしました。このアプローチにより、ページの SEO と Web の共有性をより簡単に向上させることができます。
-### ステップ5: スタイル {#step-5-styles}
+### ステップ 5: スタイル {#step-5-styles}
-CRAと同様に、Next.jsは[CSSモジュール](/docs/app/building-your-application/styling/css#css-modules)を標準でサポートしています。また、[グローバルCSSのインポート](/docs/app/building-your-application/styling/css#global-styles)もサポートしています。
+CRA と同様に、Next.js は [CSS Modules](/docs/app/building-your-application/styling/css#css-modules) を標準でサポートしています。また、[グローバル CSS インポート](/docs/app/building-your-application/styling/css#global-styles) もサポートしています。
-グローバルCSSファイルがある場合は、`app/layout.tsx`にインポートします。
+グローバル CSS ファイルがある場合は、`app/layout.tsx` にインポートします：
<Tabs>
<TabItem value="tsx" label="TypeScript">
@@ -351,15 +349,15 @@ export default function RootLayout({
</TabItem>
</Tabs>
-Tailwind CSSを使用している場合は、[インストールドキュメント](/docs/app/building-your-application/styling/tailwind-css)を参照してください。
+Tailwind CSS を使用している場合は、[インストールドキュメント](/docs/app/building-your-application/styling/tailwind-css)を参照してください。
-### ステップ6: エントリーポイントページを作成する {#step-6-create-the-entrypoint-page}
+### ステップ 6: エントリーポイントページを作成する {#step-6-create-the-entrypoint-page}
-Create React Appは`src/index.tsx`（または`index.js`）をエントリーポイントとして使用します。Next.js（App Router）では、`app`ディレクトリ内の各フォルダーがルートに対応し、各フォルダーには`page.tsx`が必要です。
+Create React App は `src/index.tsx`（または `index.js`）をエントリーポイントとして使用します。Next.js（App Router）では、`app` ディレクトリ内の各フォルダーがルートに対応し、各フォルダーには `page.tsx` が必要です。
-アプリをSPAとして保持し、**すべて**のルートをインターセプトしたいので、[optional catch-all route](/docs/app/building-your-application/routing/dynamic-routes#optional-catch-all-segments)を使用します。
+アプリを SPA として保持し、**すべての**ルートをインターセプトしたいので、[オプショナルキャッチオールルート](/docs/app/building-your-application/routing/dynamic-routes#optional-catch-all-segments) を使用します。
-1. **`app`内に`[[...slug]]`ディレクトリを作成します。**
+1. **`app` 内に `[[...slug]]` ディレクトリを作成します。**
```bash
app
@@ -368,7 +366,7 @@ app
┣ layout.tsx
```
-2. **`page.tsx`に次の内容を追加します。**
+2. **`page.tsx` に次の内容を追加します**：
<Tabs>
<TabItem value="tsx" label="TypeScript">
@@ -399,13 +397,13 @@ export default function Page() {
</TabItem>
</Tabs>
-これはNext.jsに、空のスラッグ（`/`）に対して単一のルートを生成するように指示し、**すべて**のルートを同じページにマッピングします。このページは[Server Component](/docs/app/building-your-application/rendering/server-components)であり、静的HTMLにプリレンダリングされます。
+これは Next.js に空のスラッグ（`/`）のための単一のルートを生成するように指示し、**すべての**ルートを同じページにマッピングします。このページは[Server Component](/docs/app/building-your-application/rendering/server-components)であり、静的 HTML にプリレンダリングされます。
-### ステップ7: クライアント専用のエントリーポイントを追加する {#step-7-add-a-client-only-entrypoint}
+### ステップ 7: クライアント専用のエントリーポイントを追加する {#step-7-add-a-client-only-entrypoint}
-次に、CRAのroot Appコンポーネントを[Client Component](/docs/app/building-your-application/rendering/client-components)内に埋め込み、すべてのロジックをクライアントサイドに保持します。Next.jsを初めて使用する場合、クライアントコンポーネント（デフォルトでは）はまだサーバーでプリレンダリングされていることを知っておく価値があります。クライアントサイドのJavaScriptを実行する追加の機能を持っていると考えることができます。
+次に、CRA の root App コンポーネントを[Client Component](/docs/app/building-your-application/rendering/client-components)内に埋め込み、すべてのロジックをクライアントサイドに保持します。Next.js を初めて使用する場合、クライアントコンポーネント（デフォルトでは）もサーバーでプリレンダリングされることを知っておく価値があります。クライアントサイドの JavaScript を実行する追加の機能を持っていると考えることができます。
-`app/[[...slug]]/`に`client.tsx`（または`client.js`）を作成します。
+`app/[[...slug]]/` に `client.tsx`（または `client.js`）を作成します：
<Tabs>
<TabItem value="tsx" label="TypeScript">
@@ -440,10 +438,10 @@ export function ClientOnly() {
</TabItem>
</Tabs>
-- `'use client'`ディレクティブは、このファイルを**Client Component**にします。
-- `dynamic`インポートと`ssr: false`は、`<App />`コンポーネントのサーバーサイドレンダリングを無効にし、純粋にクライアント専用（SPA）にします。
+- `'use client'` ディレクティブは、このファイルを**Client Component**にします。
+- `dynamic` インポートと `ssr: false` は `<App />` コンポーネントのサーバーサイドレンダリングを無効にし、真にクライアント専用（SPA）にします。
-次に、`page.tsx`（または`page.js`）を更新して新しいコンポーネントを使用します。
+次に、`page.tsx`（または `page.js`）を更新して新しいコンポーネントを使用します：
<Tabs>
<TabItem value="tsx" label="TypeScript">
@@ -478,9 +476,9 @@ export default function Page() {
</TabItem>
</Tabs>
-### ステップ8: 静的画像インポートを更新する {#step-8-update-static-image-imports}
+### ステップ 8: 静的画像インポートを更新する {#step-8-update-static-image-imports}
-CRAでは、画像ファイルをインポートすると、その公開URLが文字列として返されます。
+CRA では、画像ファイルをインポートすると、その公開 URL が文字列として返されます：
```tsx
import image from './img.png'
@@ -490,45 +488,45 @@ export default function App() {
}
```
-Next.jsでは、静的画像インポートはオブジェクトを返します。このオブジェクトはNext.jsの[`<Image>`コンポーネント](/docs/app/api-reference/components/image)で直接使用することができ、または既存の`<img>`タグでオブジェクトの`src`プロパティを使用することができます。
+Next.js では、静的画像インポートはオブジェクトを返します。このオブジェクトは Next.js の [`<Image>` コンポーネント](/docs/app/api-reference/components/image) で直接使用することができ、または既存の `<img>` タグでオブジェクトの `src` プロパティを使用することができます。
-`<Image>`コンポーネントには[自動画像最適化](/docs/app/building-your-application/optimizing/images)の追加の利点があります。`<Image>`コンポーネントは、画像の寸法に基づいて結果の`<img>`の`width`と`height`属性を自動的に設定します。これにより、画像が読み込まれるときのレイアウトシフトが防止されます。ただし、アプリに寸法の一方のみがスタイルされ、他方が`auto`にスタイルされていない画像が含まれている場合、問題が発生する可能性があります。`auto`にスタイルされていない場合、寸法は`<img>`の寸法属性の値にデフォルト設定され、画像が歪んで表示される可能性があります。
+`<Image>` コンポーネントには[自動画像最適化](/docs/app/building-your-application/optimizing/images)の利点があります。`<Image>` コンポーネントは、画像の寸法に基づいて結果の `<img>` の `width` と `height` 属性を自動的に設定します。これにより、画像が読み込まれる際のレイアウトシフトを防ぎます。ただし、アプリに寸法の一方のみがスタイル設定され、他方が `auto` にスタイル設定されていない画像が含まれている場合、問題が発生する可能性があります。`auto` にスタイル設定されていない場合、寸法は `<img>` の寸法属性の値にデフォルト設定され、画像が歪んで表示される可能性があります。
-`<img>`タグを保持することで、アプリケーションの変更を減らし、上記の問題を防ぐことができます。その後、[ローダーを設定する](/docs/app/building-your-application/optimizing/images#loaders)ことで画像を最適化するために`<Image>`コンポーネントに移行するか、または自動画像最適化を備えたデフォルトのNext.jsサーバーに移行することができます。
+`<img>` タグを保持することで、アプリケーションの変更を減らし、上記の問題を防ぐことができます。その後、[ローダーを設定](/docs/app/building-your-application/optimizing/images#loaders)するか、画像を自動的に最適化するデフォルトの Next.js サーバーに移行することで、画像を最適化するために `<Image>` コンポーネントに移行することができます。
-**`/public`からインポートされた画像の絶対インポートパスを相対インポートに変換します。**
+**`/public` からインポートされた画像の絶対インポートパスを相対インポートに変換します：**
```tsx
-// 変更前
+// Before
import logo from '/logo.png'
-// 変更後
+// After
import logo from '../public/logo.png'
```
-**画像オブジェクト全体ではなく、画像の`src`プロパティを`<img>`タグに渡します。**
+**画像オブジェクト全体ではなく、画像の `src` プロパティを `<img>` タグに渡します：**
```tsx
-// 変更前
+// Before
<img src={logo} />
-// 変更後
+// After
<img src={logo.src} />
```
-または、ファイル名に基づいて画像アセットの公開URLを参照することもできます。たとえば、`public/logo.png`はアプリケーションの`/logo.png`で画像を提供し、これが`src`値になります。
+または、ファイル名に基づいて画像アセットの公開 URL を参照することもできます。たとえば、`public/logo.png` はアプリケーションの `/logo.png` で画像を提供し、これが `src` 値になります。
-> **警告:** TypeScriptを使用している場合、`src`プロパティにアクセスするときに型エラーが発生する可能性があります。これを修正するには、`tsconfig.json`ファイルの[`include`配列](https://www.typescriptlang.org/tsconfig#include)に`next-env.d.ts`を追加する必要があります。Next.jsは、ステップ9でアプリケーションを実行するときにこのファイルを自動的に生成します。
+> **Warning:** TypeScript を使用している場合、`src` プロパティにアクセスするときに型エラーが発生する可能性があります。これを修正するには、`tsconfig.json` ファイルの [`include` 配列](https://www.typescriptlang.org/tsconfig#include) に `next-env.d.ts` を追加する必要があります。Next.js は、ステップ 9 でアプリケーションを実行するときにこのファイルを自動的に生成します。
-### ステップ9: 環境変数を移行する {#step-9-migrate-environment-variables}
+### ステップ 9: 環境変数を移行する {#step-9-migrate-environment-variables}
-Next.jsはCRAと同様に[環境変数](/docs/app/building-your-application/configuring/environment-variables)をサポートしていますが、ブラウザで公開したい変数には`NEXT_PUBLIC_`プレフィックスが**必要**です。
+Next.js は CRA と同様に[環境変数](/docs/app/building-your-application/configuring/environment-variables)をサポートしていますが、ブラウザで公開したい変数には `NEXT_PUBLIC_` プレフィックスが**必要**です。
-主な違いは、クライアントサイドで環境変数を公開するために使用されるプレフィックスです。`REACT_APP_`プレフィックスを持つすべての環境変数を`NEXT_PUBLIC_`に変更します。
+主な違いは、クライアントサイドで環境変数を公開するために使用されるプレフィックスです。`REACT_APP_` プレフィックスを持つすべての環境変数を `NEXT_PUBLIC_` に変更します。
-### ステップ10: `package.json`のスクリプトを更新する {#step-10-update-scripts-in-package-json}
+### ステップ 10: `package.json` のスクリプトを更新する {#step-10-update-scripts-in-package-json}
-`package.json`のスクリプトをNext.jsのコマンドに更新します。また、`.next`と`next-env.d.ts`を`.gitignore`に追加します。
+`package.json` のスクリプトを Next.js コマンドに更新します。また、`.next` と `next-env.d.ts` を `.gitignore` に追加します：
```json title="package.json"
{
@@ -546,29 +544,29 @@ Next.jsはCRAと同様に[環境変数](/docs/app/building-your-application/conf
next-env.d.ts
```
-次のコマンドを実行できます。
+次のコマンドを実行できます：
```bash
npm run dev
```
-[http://localhost:3000](http://localhost:3000)を開きます。Next.js（SPAモード）でアプリケーションが実行されているのが確認できるはずです。
+[http://localhost:3000](http://localhost:3000) を開きます。Next.js（SPA モード）でアプリケーションが実行されているのが確認できるはずです。
-### ステップ11: クリーンアップ {#step-11-clean-up}
+### ステップ 11: クリーンアップ {#step-11-clean-up}
-Create React Appに特有のアーティファクトを削除できます。
+Create React App に特有のアーティファクトを削除できます：
- `public/index.html`
- `src/index.tsx`
- `src/react-app-env.d.ts`
-- `reportWebVitals`のセットアップ
-- `react-scripts`の依存関係（`package.json`からアンインストールします）
+- `reportWebVitals` のセットアップ
+- `react-scripts` の依存関係（`package.json` からアンインストール）
## 追加の考慮事項 {#additional-considerations}
-### CRAでカスタム`homepage`を使用する {#using-a-custom-homepage-in-cra}
+### CRA でカスタム `homepage` を使用する {#using-a-custom-homepage-in-cra}
-CRAの`package.json`で`homepage`フィールドを使用してアプリを特定のサブパスで提供していた場合、Next.jsの[`basePath`設定](/docs/app/api-reference/config/next-config-js/basePath)を使用して`next.config.ts`でそれを再現できます。
+CRA の `package.json` で `homepage` フィールドを使用してアプリを特定のサブパスで提供していた場合、Next.js の `next.config.ts` で [`basePath` 設定](/docs/app/api-reference/config/next-config-js/basePath) を使用してそれを再現できます：
```ts title="next.config.ts"
import { NextConfig } from 'next'
@@ -581,13 +579,13 @@ const nextConfig: NextConfig = {
export default nextConfig
```
-### カスタム`Service Worker`の処理 {#handling-a-custom-service-worker}
+### カスタム `Service Worker` の処理 {#handling-a-custom-service-worker}
-CRAのサービスワーカー（例：`create-react-app`の`serviceWorker.js`）を使用していた場合、Next.jsで[プログレッシブウェブアプリケーション（PWA）](/docs/app/building-your-application/configuring/progressive-web-apps)を作成する方法を学ぶことができます。
+CRA のサービスワーカー（例：`create-react-app` の `serviceWorker.js`）を使用していた場合、Next.js で[プログレッシブウェブアプリケーション (PWA)](/docs/app/building-your-application/configuring/progressive-web-apps) を作成する方法を学ぶことができます。
-### APIリクエストのプロキシ {#proxying-api-requests}
+### API リクエストのプロキシ {#proxying-api-requests}
-CRAアプリが`package.json`の`proxy`フィールドを使用してバックエンドサーバーへのリクエストを転送していた場合、`next.config.ts`で[Next.jsのリライト](/docs/app/api-reference/config/next-config-js/rewrites)を使用してこれを再現できます。
+CRA アプリで `package.json` の `proxy` フィールドを使用してバックエンドサーバーへのリクエストを転送していた場合、`next.config.ts` で [Next.js のリライト](/docs/app/api-reference/config/next-config-js/rewrites) を使用してこれを再現できます：
```ts title="next.config.ts"
import { NextConfig } from 'next'
@@ -604,16 +602,16 @@ const nextConfig: NextConfig = {
}
```
-### カスタムWebpack / Babel設定 {#custom-webpack-babel-config}
+### カスタム Webpack / Babel 設定 {#custom-webpack-babel-config}
-CRAでカスタムのwebpackまたはBabel設定を持っていた場合、`next.config.ts`でNext.jsの設定を拡張できます。
+CRA でカスタム webpack または Babel 設定を持っていた場合、`next.config.ts` で Next.js の設定を拡張できます：
```ts title="next.config.ts"
import { NextConfig } from 'next'
const nextConfig: NextConfig = {
webpack: (config, { isServer }) => {
- // ここでwebpack設定を変更します
+ // ここで webpack 設定を変更します
return config
},
}
@@ -621,11 +619,11 @@ const nextConfig: NextConfig = {
export default nextConfig
```
-> **注意**: これには、`dev`スクリプトから`--turbopack`を削除してTurbopackを無効にする必要があります。
+> **Note**: これには `dev` スクリプトから `--turbopack` を削除して Turbopack を無効にする必要があります。
-### TypeScriptのセットアップ {#typescript-setup}
+### TypeScript のセットアップ {#typescript-setup}
-Next.jsは`tsconfig.json`がある場合、自動的にTypeScriptをセットアップします。`tsconfig.json`の`include`配列に`next-env.d.ts`がリストされていることを確認してください。
+Next.js は `tsconfig.json` がある場合、自動的に TypeScript をセットアップします。`tsconfig.json` の `include` 配列に `next-env.d.ts` がリストされていることを確認してください：
```json
{
@@ -635,25 +633,25 @@ Next.jsは`tsconfig.json`がある場合、自動的にTypeScriptをセットア
## バンドラーの互換性 {#bundler-compatibility}
-Create React AppとNext.jsの両方がデフォルトでwebpackをバンドリングに使用します。Next.jsはまた、ローカル開発を高速化するために[Turbopack](/docs/app/api-reference/config/next-config-js/turbo)を提供しています。
+Create React App と Next.js はどちらもデフォルトで webpack をバンドリングに使用します。Next.js はまた、ローカル開発を高速化するために [Turbopack](/docs/app/api-reference/config/next-config-js/turbopack) を提供しています：
```bash
next dev --turbopack
```
-CRAから高度なwebpack設定を移行する必要がある場合は、[カスタムwebpack設定](/docs/app/api-reference/config/next-config-js/webpack)を提供することもできます。
+CRA から高度な webpack 設定を移行する必要がある場合、[カスタム webpack 設定](/docs/app/api-reference/config/next-config-js/webpack) を提供することもできます。
## 次のステップ {#next-steps}
-すべてが正常に動作した場合、現在、シングルページアプリケーションとして動作するNext.jsアプリケーションがあります。まだNext.jsのサーバーサイドレンダリングやファイルベースのルーティングなどの機能を活用していませんが、段階的に行うことができます。
+すべてが正常に動作した場合、現在はシングルページアプリケーションとして動作する Next.js アプリケーションがあります。まだサーバーサイドレンダリングやファイルベースのルーティングなどの Next.js の機能を活用していませんが、これらを段階的に行うことができます：
-- **React Routerから**[Next.js App Router](/docs/app/building-your-application/routing)に移行して、以下を実現します。
+- [Next.js App Router](/docs/app/building-your-application/routing) に**React Router から移行**して：
- 自動コード分割
- [ストリーミングサーバーレンダリング](/docs/app/building-your-application/routing/loading-ui-and-streaming)
- [React Server Components](/docs/app/building-your-application/rendering/server-components)
-- **画像を最適化**するために[`<Image>`コンポーネント](/docs/app/building-your-application/optimizing/images)を使用します。
-- **フォントを最適化**するために[`next/font`](/docs/app/building-your-application/optimizing/fonts)を使用します。
-- **サードパーティのスクリプトを最適化**するために[`<Script>`コンポーネント](/docs/app/building-your-application/optimizing/scripts)を使用します。
-- **ESLintを有効化**して、Next.js推奨ルールを使用し、`npx next lint`を実行してプロジェクトのニーズに合わせて設定します。
+- [`<Image>` コンポーネント](/docs/app/building-your-application/optimizing/images) で**画像を最適化**
+- [`next/font`](/docs/app/building-your-application/optimizing/fonts) で**フォントを最適化**
+- [`<Script>` コンポーネント](/docs/app/building-your-application/optimizing/scripts) で**サードパーティスクリプトを最適化**
+- `npx next lint` を実行して Next.js 推奨ルールを有効にし、プロジェクトのニーズに合わせて設定することで**ESLint を有効化**
-> **注意**: 静的エクスポート（`output: 'export'`）を使用すると、`useParams`フックや他のサーバー機能が[現在サポートされていません](https://github.com/vercel/next.js/issues/54393)。Next.jsのすべての機能を使用するには、`next.config.ts`から`output: 'export'`を削除してください。
+> **Note**: 静的エクスポート（`output: 'export'`）を使用すると、`useParams` フックやその他のサーバー機能が[現在サポートされていません](https://github.com/vercel/next.js/issues/54393)。Next.js のすべての機能を使用するには、`next.config.ts` から `output: 'export'` を削除してください。
diff --git a/docs/01-app/04-api-reference/04-functions/use-link-status.mdx b/docs/01-app/04-api-reference/04-functions/use-link-status.mdx
deleted file mode 100644
index d6ce6d72..00000000
--- a/docs/01-app/04-api-reference/04-functions/use-link-status.mdx
+++ /dev/null
@@ -1,250 +0,0 @@
----
-title: 'useLinkStatus'
-description: 'useLinkStatus フックのAPIリファレンス。'
----
-
-`useLinkStatus`は、ナビゲーション中に`Link`コンポーネントの読み込み状態を追跡するための**Client Component**フックです。特に[prefetching](/docs/app/building-your-application/routing/linking-and-navigating#2-prefetching)が無効になっている場合や、リンクされたルートに読み込み状態がない場合に、ページ遷移中の読み込みインジケーターを表示するために使用できます。
-
-<Tabs>
-<TabItem value="tsx" label="TypeScript">
-
-```tsx title="app/loading-indicator.tsx" switcher
-'use client'
-
-import { useLinkStatus } from 'next/navigation'
-
-export default function LoadingIndicator() {
- const { pending } = useLinkStatus()
- return pending ? <span>⌛</span> : null
-}
-```
-
-</TabItem>
-<TabItem value="jsx" label="JavaScript">
-
-```jsx title="app/loading-indicator.js" switcher
-'use client'
-
-import { useLinkStatus } from 'next/navigation'
-
-export default function LoadingIndicator() {
- const { pending } = useLinkStatus()
- return pending ? <span>⌛</span> : null
-}
-```
-
-</TabItem>
-</Tabs>
-
-<Tabs>
-<TabItem value="tsx" label="TypeScript">
-
-```tsx title="app/header.tsx" switcher
-import Link from 'next/link'
-import LoadingIndicator from './loading-indicator'
-
-export default function Header() {
- return (
- <header>
- <Link href="/dashboard" prefetch={false}>
- Dashboard <LoadingIndicator />
- </Link>
- </header>
- )
-}
-```
-
-</TabItem>
-<TabItem value="jsx" label="JavaScript">
-
-```jsx title="app/header.js" switcher
-import Link from 'next/link'
-import LoadingIndicator from './loading-indicator'
-
-export default function Header() {
- return (
- <header>
- <Link href="/dashboard" prefetch={false}>
- Dashboard <LoadingIndicator />
- </Link>
- </header>
- )
-}
-```
-
-</TabItem>
-</Tabs>
-
-> **Good to know**:
->
-> - `useLinkStatus`は、`Link`コンポーネントの子孫コンポーネント内で使用する必要があります
-> - このフックは、`Link`コンポーネントで`prefetch={false}`が設定されている場合に最も有用です
-> - リンクされたルートが事前にフェッチされている場合、pending状態はスキップされます
-> - 短時間で複数のリンクをクリックした場合、最後のリンクのpending状態のみが表示されます
-> - このフックはPages Routerではサポートされておらず、常に`{ pending: false }`を返します
-
-## パラメータ {#parameters}
-
-```tsx
-const { pending } = useLinkStatus()
-```
-
-`useLinkStatus`はパラメータを受け取りません。
-
-## 戻り値 {#returns}
-
-`useLinkStatus`は、1つのプロパティを持つオブジェクトを返します：
-
-| プロパティ | 型 | 説明 |
-| ---------- | ------- | ------------------------------------------- |
-| pending | boolean | 履歴が更新される前は`true`、更新後は`false` |
-
-## 例 {#examples}
-
-### 新しいクエリパラメータでのナビゲーション時のユーザーエクスペリエンスの向上 {#improving-the-user-experience-when-navigating-with-new-query-parameters}
-
-この例では、カテゴリ間のナビゲーションがクエリ文字列（例：?category=books）を更新します。しかし、ページが応答しないように見えることがあります。これは、`<PageSkeleton />`フォールバックが既存のコンテンツを置き換えないためです（[不要な読み込みインジケーターの防止](https://react.dev/reference/react/useTransition#preventing-unwanted-loading-indicators)を参照）。
-
-`useLinkStatus`フックを使用して、アクティブなリンクの横に軽量な読み込みインジケーターをレンダリングし、データがフェッチされている間にユーザーに即時のフィードバックを提供できます。
-
-<Tabs>
-<TabItem value="tsx" label="TypeScript">
-
-```tsx title="app/components/loading-indicator.tsx" switcher
-'use client'
-
-import { useLinkStatus } from 'next/navigation'
-
-export default function LoadingIndicator() {
- const { pending } = useLinkStatus()
- return pending ? <span>⌛</span> : null
-}
-```
-
-</TabItem>
-<TabItem value="jsx" label="JavaScript">
-
-```jsx title="app/components/loading-indicator.js" switcher
-'use client'
-
-import { useLinkStatus } from 'next/navigation'
-
-export default function LoadingIndicator() {
- const { pending } = useLinkStatus()
- return pending ? <span>⌛</span> : null
-}
-```
-
-</TabItem>
-</Tabs>
-
-<Tabs>
-<TabItem value="tsx" label="TypeScript">
-
-```tsx title="app/page.tsx" switcher
-import { useSearchParams } from 'next/navigation'
-import Link from 'next/link'
-import { Suspense } from 'react'
-import LoadingIndicator from './loading-indicator'
-
-function MenuBar() {
- return (
- <div>
- <Link href="?category=electronics">
- Electronics <LoadingIndicator />
- </Link>
- <Link href="?category=clothing">
- Clothing <LoadingIndicator />
- </Link>
- <Link href="?category=books">
- Books <LoadingIndicator />
- </Link>
- </div>
- )
-}
-
-async function ProductList({ category }: { category: string }) {
- const products = await fetchProducts(category)
-
- return (
- <ul>
- {products.map((product) => (
- <li key={product}>{product}</li>
- ))}
- </ul>
- )
-}
-
-export default async function ProductCategories({
- searchParams,
-}: {
- searchParams: Promise<{
- category: string
- }>
-}) {
- const { category } = await searchParams
-
- return (
- <Suspense fallback={<PageSkeleton />}>
- <MenuBar />
- <ProductList category={category} />
- </Suspense>
- )
-}
-```
-
-</TabItem>
-<TabItem value="jsx" label="JavaScript">
-
-```jsx title="app/page.js" switcher
-import { useSearchParams } from 'next/navigation'
-import Link from 'next/link'
-import { Suspense } from 'react'
-import LoadingIndicator from './loading-indicator'
-
-function MenuBar() {
- return (
- <div>
- <Link href="?category=electronics">
- Electronics <LoadingIndicator />
- </Link>
- <Link href="?category=clothing">
- Clothing <LoadingIndicator />
- </Link>
- <Link href="?category=books">
- Books <LoadingIndicator />
- </Link>
- </div>
- )
-}
-
-async function ProductList({ category }) {
- const products = await fetchProducts(category)
-
- return (
- <ul>
- {products.map((product) => (
- <li key={product}>{product}</li>
- ))}
- </ul>
- )
-}
-
-export default async function ProductCategories({ searchParams }) {
- const { category } = await searchParams
-
- return (
- <Suspense fallback={<PageSkeleton />}>
- <MenuBar />
- <ProductList category={category} />
- </Suspense>
- )
-}
-```
-
-</TabItem>
-</Tabs>
-
-| バージョン | 変更内容 |
-| ---------- | --------------------------------- |
-| `v15.3.0` | `useLinkStatus`が導入されました。 |
diff --git a/docs/01-app/04-api-reference/08-turbopack.mdx b/docs/01-app/04-api-reference/08-turbopack.mdx
deleted file mode 100644
index 245404de..00000000
--- a/docs/01-app/04-api-reference/08-turbopack.mdx
+++ /dev/null
@@ -1,170 +0,0 @@
----
-title: 'Turbopack'
-description: 'Turbopackは、JavaScriptとTypeScriptに最適化されたインクリメンタルバンドラーで、Rustで書かれ、Next.jsに組み込まれています。'
----
-
-{/* このドキュメントの内容は、app routerとpages routerの間で共有されています。Pages Routerに特化したコンテンツを追加するには、`<PagesOnly>Content</PagesOnly>`コンポーネントを使用できます。共有コンテンツはコンポーネントでラップしないでください。 */}
-
-Turbopackは、JavaScriptとTypeScriptに最適化された**インクリメンタルバンドラー**で、Rustで書かれ、**Next.js**に組み込まれています。Turbopackを使用することで、Pages RouterとApp Routerの両方で**非常に高速な**ローカル開発体験を得ることができます。
-
-## なぜTurbopackなのか？ {#why-turbopack}
-
-私たちは、Next.jsのパフォーマンスを向上させるためにTurbopackを開発しました。以下の点を含みます：
-
-- **統一されたグラフ:** Next.jsは複数の出力環境（例：クライアントとサーバー）をサポートしています。複数のコンパイラを管理し、バンドルをつなぎ合わせるのは面倒です。Turbopackは、すべての環境に対して**単一の統一されたグラフ**を使用します。
-- **バンドリング vs ネイティブESM:** 一部のツールは開発時にバンドリングをスキップし、ブラウザのネイティブESMに依存します。これは小規模なアプリには適していますが、ネットワークリクエストが多すぎるため、大規模なアプリでは遅くなる可能性があります。Turbopackは開発時に**バンドル**しますが、大規模なアプリを高速に保つために最適化されています。
-- **インクリメンタル計算:** Turbopackは作業をコア間で並列化し、結果を関数レベルまで**キャッシュ**します。一度作業が完了すると、Turbopackはそれを繰り返しません。
-- **遅延バンドリング:** Turbopackは、開発サーバーによって実際に要求されたものだけをバンドルします。この遅延アプローチにより、初期のコンパイル時間とメモリ使用量を削減できます。
-
-## はじめに {#getting-started}
-
-Next.jsプロジェクトでTurbopackを有効にするには、開発サーバーを実行する際に`--turbopack`フラグを使用します：
-
-```json title="package.json" highlight={3}
-{
- "scripts": {
- "dev": "next dev --turbopack",
- "build": "next build",
- "start": "next start"
- }
-}
-```
-
-現在、Turbopackは`next dev`のみをサポートしています。ビルド（`next build`）は**まだ**サポートされていません。Turbopackが安定性に近づくにつれて、プロダクションサポートに向けて積極的に取り組んでいます。
-
-## サポートされている機能 {#supported-features}
-
-Next.jsのTurbopackは、一般的なユースケースに対して**ゼロコンフィグレーション**です。以下は、標準でサポートされている機能の概要と、必要に応じてTurbopackをさらに構成する方法に関するいくつかの参考情報です。
-
-### 言語機能 {#language-features}
-
-| 機能 | ステータス | 備考 |
-| --------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **JavaScript & TypeScript** | **サポート済み** | SWCを内部で使用しています。型チェックはTurbopackでは行われません（`tsc --watch`を実行するか、IDEに型チェックを依存してください）。 |
-| **ECMAScript (ESNext)** | **サポート済み** | Turbopackは最新のECMAScript機能をサポートしており、SWCのカバレッジに一致しています。 |
-| **CommonJS** | **サポート済み** | `require()`構文は標準で処理されます。 |
-| **ESM** | **サポート済み** | 静的および動的な`import`が完全にサポートされています。 |
-| **Babel** | 部分的にサポート外 | TurbopackにはデフォルトでBabelは含まれていません。ただし、[Turbopackの設定を通じて`babel-loader`を構成することができます](/docs/app/api-reference/config/next-config-js/turbo#configuring-webpack-loaders)。 |
-
-### フレームワークとReactの機能 {#framework-and-react-features}
-
-| 機能 | ステータス | 備考 |
-| --------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------ |
-| **JSX / TSX** | **サポート済み** | SWCがJSX/TSXのコンパイルを処理します。 |
-| **Fast Refresh** | **サポート済み** | 設定は不要です。 |
-| **React Server Components (RSC)** | **サポート済み** | Next.jsのApp Router用です。Turbopackは正しいサーバー/クライアントのバンドリングを保証します。 |
-| **root レイアウトの作成** | サポート外 | App Routerでのroot レイアウトの自動作成はサポートされていません。Turbopackは手動での作成を指示します。 |
-
-### CSSとスタイリング {#css-and-styling}
-
-| 機能 | ステータス | 備考 |
-| ------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **グローバルCSS** | **サポート済み** | `.css`ファイルをアプリケーションに直接インポートします。 |
-| **CSSモジュール** | **サポート済み** | `.module.css`ファイルはネイティブに動作します（Lightning CSS）。 |
-| **CSSネスティング** | **サポート済み** | Lightning CSSは[最新のCSSネスティング](https://lightningcss.dev/)をサポートしています。 |
-| **@import構文** | **サポート済み** | 複数のCSSファイルを組み合わせます。 |
-| **PostCSS** | **サポート済み** | Node.jsワーカープールで`postcss.config.js`を自動的に処理します。Tailwind、Autoprefixerなどに便利です。 |
-| **Sass / SCSS** | **サポート済み** (Next.js) | Next.jsでは、Sassは標準でサポートされています。将来的には、Turbopackのスタンドアロン使用にはローダー設定が必要になる可能性があります。 |
-| **Less** | プラグインを通じて計画中 | デフォルトではまだサポートされていません。カスタムローダーが安定したら、ローダー設定が必要になる可能性があります。 |
-| **Lightning CSS** | **使用中** | CSS変換を処理します。低使用率のCSSモジュール機能（スタンドアロンの擬似クラスとしての`:local/:global`など）はまだサポートされていません。[詳細は以下を参照してください。](#unsupported-and-unplanned-features) |
-
-### アセット {#assets}
-
-| 機能 | ステータス | 備考 |
-| --------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------- |
-| **静的アセット** (画像、フォント) | **サポート済み** | `import img from './img.png'`のインポートは標準で動作します。Next.jsでは、`<Image />`コンポーネント用のオブジェクトを返します。 |
-| **JSONインポート** | **サポート済み** | `.json`からの名前付きまたはデフォルトのインポートがサポートされています。 |
-
-### モジュール解決 {#module-resolution}
-
-| 機能 | ステータス | 備考 |
-| ------------------ | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **パスエイリアス** | **サポート済み** | `tsconfig.json`の`paths`と`baseUrl`を読み取り、Next.jsの動作に一致します。 |
-| **手動エイリアス** | **サポート済み** | [`next.config.js`で`resolveAlias`を構成します](/docs/app/api-reference/config/next-config-js/turbo#resolving-aliases)（`webpack.resolve.alias`に類似）。 |
-| **カスタム拡張子** | **サポート済み** | [`next.config.js`で`resolveExtensions`を構成します](/docs/app/api-reference/config/next-config-js/turbo#resolving-custom-extensions)。 |
-| **AMD** | 部分的にサポート済み | 基本的な変換は動作しますが、高度なAMDの使用は制限されています。 |
-
-### パフォーマンスとFast Refresh {#performance-and-fast-refresh}
-
-| 機能 | ステータス | 備考 |
-| -------------------------------- | ---------------- | --------------------------------------------------------------------------------------------------- |
-| **Fast Refresh** | **サポート済み** | JavaScript、TypeScript、CSSをフルリフレッシュなしで更新します。 |
-| **インクリメンタルバンドリング** | **サポート済み** | Turbopackは開発サーバーによって要求されたものだけを遅延的にビルドし、大規模なアプリを高速化します。 |
-
-## サポートされていない機能と計画されていない機能 {#unsupported-and-unplanned-features}
-
-一部の機能はまだ実装されていないか、計画されていません：
-
-- **プロダクションビルド** (`next build`)
- Turbopackは現在`next dev`のみをサポートしています。プロダクションビルドのサポートは積極的に開発中です。
-- **レガシーCSSモジュール機能**
- - スタンドアロンの`:local`および`:global`擬似クラス（関数バリアントの`:global(...)`のみがサポートされています）。
- - `@value`ルール（CSS変数に置き換えられました）。
- - `:import`および`:export`のICSSルール。
-- **`next.config.js`での`webpack()`設定**
- Turbopackはwebpackを置き換えるため、`webpack()`設定は認識されません。代わりに[`experimental.turbo`設定](/docs/app/api-reference/config/next-config-js/turbo)を使用してください。
-- **AMP**
- Next.jsでのTurbopackサポートは計画されていません。
-- **Yarn PnP**
- Next.jsでのTurbopackサポートは計画されていません。
-- **`experimental.urlImports`**
- Turbopackでは計画されていません。
-- **`experimental.esmExternals`**
- 計画されていません。TurbopackはNext.jsのレガシー`esmExternals`設定をサポートしていません。
-- **一部のNext.js実験的フラグ**
- - `experimental.typedRoutes`
- - `experimental.nextScriptWorkers`
- - `experimental.sri.algorithm`
- - `experimental.fallbackNodePolyfills`
- これらは将来的に実装する予定です。
-
-各機能フラグとそのステータスの詳細な内訳については、[Turbopack APIリファレンス](/docs/app/api-reference/config/next-config-js/turbo)を参照してください。
-
-## 設定 {#configuration}
-
-Turbopackは、`next.config.js`（または`next.config.ts`）の`experimental.turbo`キーの下で構成できます。設定オプションには以下が含まれます：
-
-- **`rules`**
- ファイル変換のための追加の[webpackローダー](/docs/app/api-reference/config/next-config-js/turbo#configuring-webpack-loaders)を定義します。
-- **`resolveAlias`**
- 手動エイリアスを作成します（webpackの`resolve.alias`に類似）。
-- **`resolveExtensions`**
- モジュール解決のためのファイル拡張子を変更または拡張します。
-- **`moduleIdStrategy`**
- モジュールIDの生成方法を設定します（`'named'` vs `'deterministic'`）。
-- **`treeShaking`**
- 開発および将来のプロダクションビルドでのツリーシェイキングを有効または無効にします。
-- **`memoryLimit`**
- Turbopackのメモリ制限（バイト単位）を設定します。
-
-```js title="next.config.js"
-module.exports = {
- experimental: {
- turbo: {
- // 例：エイリアスとカスタムファイル拡張子の追加
- resolveAlias: {
- underscore: 'lodash',
- },
- resolveExtensions: ['.mdx', '.tsx', '.ts', '.jsx', '.js', '.json'],
- },
- },
-}
-```
-
-より詳細な設定例については、[Turbopack設定ドキュメント](/docs/app/api-reference/config/next-config-js/turbo)を参照してください。
-
-## パフォーマンスデバッグのためのトレースファイルの生成 {#generating-trace-files-for-performance-debugging}
-
-パフォーマンスやメモリの問題が発生し、Next.jsチームがそれを診断するのを手助けしたい場合は、開発コマンドに`NEXT_TURBOPACK_TRACING=1`を追加してトレースファイルを生成できます：
-
-```bash
-NEXT_TURBOPACK_TRACING=1 next dev --turbopack
-```
-
-これにより、`.next/trace-turbopack`ファイルが生成されます。そのファイルを[Next.jsリポジトリ](https://github.com/vercel/next.js)でGitHubの問題を作成する際に含めてください。調査の手助けになります。
-
-## まとめ {#summary}
-
-Turbopackは、特に大規模なアプリケーションにおいて、ローカル開発とビルドを高速化するために設計された**Rustベース**の**インクリメンタル**バンドラーです。Next.jsに統合されており、ゼロコンフィグのCSS、React、TypeScriptサポートを提供します。
-
-Turbopackの改善とプロダクションビルドサポートの追加に向けて、今後の更新をお楽しみに。それまでの間、`next dev --turbopack`を試して、フィードバックをお寄せください。
diff --git a/docs/01-app/04-deep-dive/index.mdx b/docs/01-app/04-deep-dive/index.mdx
new file mode 100644
index 00000000..705ec874
--- /dev/null
+++ b/docs/01-app/04-deep-dive/index.mdx
@@ -0,0 +1,4 @@
+---
+title: 'Deep Dive'
+description: 'Next.jsがどのように内部で動作するかを学びましょう。'
+---
diff --git a/docs/01-app/04-api-reference/01-directives/index.mdx b/docs/01-app/05-api-reference/01-directives/index.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/01-directives/index.mdx
rename to docs/01-app/05-api-reference/01-directives/index.mdx
diff --git a/docs/01-app/04-api-reference/01-directives/use-cache.mdx b/docs/01-app/05-api-reference/01-directives/use-cache.mdx
similarity index 53%
rename from docs/01-app/04-api-reference/01-directives/use-cache.mdx
rename to docs/01-app/05-api-reference/01-directives/use-cache.mdx
index 677a5232..599a27aa 100644
--- a/docs/01-app/04-api-reference/01-directives/use-cache.mdx
+++ b/docs/01-app/05-api-reference/01-directives/use-cache.mdx
@@ -3,7 +3,7 @@ title: 'use cache'
description: 'Next.jsアプリケーションでデータをキャッシュするためのuse cacheディレクティブの使い方を学びます。'
version: 'canary'
related:
- title: 'Related'
+ title: '関連'
description: '関連するAPIリファレンスを表示します。'
links:
- app/api-reference/config/next-config-js/useCache
@@ -14,11 +14,11 @@ related:
- app/api-reference/functions/revalidateTag
---
-`use cache`ディレクティブは、コンポーネントや関数をキャッシュするために指定します。ファイルの先頭で使用すると、そのファイル内のすべてのエクスポートがキャッシュ可能であることを示します。また、関数やコンポーネントの先頭でインラインで使用すると、Next.jsに対してその戻り値をキャッシュし、後続のリクエストで再利用することを通知します。これはNext.jsの実験的な機能であり、Reactのネイティブ機能である[`use client`](/docs/app/api-reference/directives/use-client)や[`use server`](/docs/app/api-reference/directives/use-server)とは異なります。
+`use cache`ディレクティブを使用すると、ルート、Reactコンポーネント、または関数をキャッシュ可能としてマークできます。ファイルの先頭で使用すると、そのファイル内のすべてのエクスポートがキャッシュされることを示し、関数やコンポーネントの先頭でインラインで使用すると、戻り値をキャッシュします。
## 使用法 {#usage}
-`next.config.ts`ファイルで[`useCache`](/docs/app/api-reference/config/next-config-js/useCache)フラグを使用して、`use cache`ディレクティブのサポートを有効にします：
+`use cache`は現在、実験的な機能です。有効にするには、`next.config.ts`ファイルに[`useCache`](/docs/app/api-reference/config/next-config-js/useCache)オプションを追加します：
<Tabs>
<TabItem value="ts" label="TypeScript">
@@ -52,9 +52,9 @@ module.exports = nextConfig
</TabItem>
</Tabs>
-さらに、[`dynamicIO`](/docs/app/api-reference/config/next-config-js/dynamicIO)フラグが設定されている場合も、`use cache`ディレクティブが有効になります。
+> **Good to know:** `use cache`は[`dynamicIO`](/docs/app/api-reference/config/next-config-js/dynamicIO)オプションでも有効にできます。
-その後、ファイル、コンポーネント、または関数レベルで`use cache`ディレクティブを使用できます：
+次に、ファイル、コンポーネント、または関数レベルで`use cache`を追加します：
```tsx
// ファイルレベル
@@ -78,22 +78,79 @@ export async function getData() {
}
```
-## Good to know {#good-to-know}
+## `use cache`の動作 {#how-use-cache-works}
-- `use cache`はNext.jsの実験的な機能であり、Reactのネイティブ機能である[`use client`](/docs/app/api-reference/directives/use-client)や[`use server`](/docs/app/api-reference/directives/use-server)とは異なります。
-- キャッシュされた関数に渡される[シリアライズ可能](https://react.dev/reference/rsc/use-server#serializable-parameters-and-return-values)な引数（またはprops）や、親スコープから読み取るシリアライズ可能な値は、JSONのような形式に変換され、自動的にキャッシュキーの一部になります。
-- シリアライズ不可能な引数、props、または閉じ込められた値は、キャッシュされた関数内で不透明な参照に変わり、通過させることはできますが、検査や変更はできません。これらのシリアライズ不可能な値はリクエスト時に埋め込まれ、キャッシュキーの一部にはなりません。
- - 例えば、キャッシュされた関数はJSXを`children` propとして受け取り、`<div>{children}</div>`を返すことができますが、実際の`children`オブジェクトを内省することはできません。
-- キャッシュ可能な関数の戻り値もシリアライズ可能でなければなりません。これにより、キャッシュされたデータが正しく保存および取得されることが保証されます。
-- `use cache`ディレクティブを使用する関数は、副作用を持ってはいけません。例えば、状態の変更、DOMの直接操作、タイマーを設定してコードを定期的に実行することなどです。
-- [Partial Prerendering](/docs/app/building-your-application/rendering/partial-prerendering)と一緒に使用する場合、`use cache`を持つセグメントは静的HTMLシェルの一部としてプリレンダリングされます。
-- [`unstable_cache`](/docs/app/api-reference/functions/unstable_cache)がJSONデータのみをサポートするのとは異なり、`use cache`はReactがレンダリングできる任意のシリアライズ可能なデータ、コンポーネントのレンダリング出力を含むデータをキャッシュできます。
+### キャッシュキー {#cache-keys}
+
+キャッシュエントリのキーは、その入力のシリアライズされたバージョンを使用して生成されます。これには以下が含まれます：
+
+- ビルドID（各ビルドで生成される）
+- 関数ID（関数に固有の安全な識別子）
+- [シリアライズ可能な](https://react.dev/reference/rsc/use-server#serializable-parameters-and-return-values)関数の引数（またはprops）
+
+キャッシュされた関数に渡される引数や、親スコープから読み取る値は自動的にキーの一部になります。つまり、入力が同じである限り、同じキャッシュエントリが再利用されます。
+
+## シリアライズ不可能な引数 {#non-serializable-arguments}
+
+シリアライズ不可能な引数、props、または閉じ込められた値は、キャッシュされた関数内で参照に変わり、通過することはできますが、検査や変更はできません。これらのシリアライズ不可能な値はリクエスト時に埋め込まれ、キャッシュキーの一部にはなりません。
+
+たとえば、キャッシュされた関数はJSXを`children` propとして受け取り、`<div>{children}</div>`を返すことができますが、実際の`children`オブジェクトを内省することはできません。これにより、キャッシュされたコンポーネント内にキャッシュされていないコンテンツをネストすることができます。
+
+<Tabs>
+<TabItem value="tsx" label="TypeScript">
+
+```tsx title="app/ui/cached-component.tsx" switcher
+function CachedComponent({ children }: { children: ReactNode }) {
+ 'use cache'
+ return <div>{children}</div>
+}
+```
+
+</TabItem>
+<TabItem value="jsx" label="JavaScript">
+
+```jsx title="app/ui/cached-component.js" switcher
+function CachedComponent({ children }) {
+ 'use cache'
+ return <div>{children}</div>
+}
+```
+
+</TabItem>
+</Tabs>
+
+## 戻り値 {#return-values}
+
+キャッシュ可能な関数の戻り値はシリアライズ可能でなければなりません。これにより、キャッシュされたデータが正しく保存および取得されることが保証されます。
+
+## ビルド時の`use cache` {#use-cache-at-build-time}
+
+[layout](/docs/app/api-reference/file-conventions/layout)や[page](/docs/app/api-reference/file-conventions/page)の先頭で使用すると、ルートセグメントがプリレンダリングされ、後で[再検証](#during-revalidation)できるようになります。
+
+これは、`use cache`が`cookies`や`headers`のような[リクエスト時API](/docs/app/building-your-application/rendering/server-components#dynamic-apis)と一緒に使用できないことを意味します。
+
+## 実行時の`use cache` {#use-cache-at-runtime}
+
+**サーバー**では、個々のコンポーネントや関数のキャッシュエントリがメモリ内にキャッシュされます。
+
+その後、**クライアント**では、サーバーキャッシュから返されたコンテンツがセッションの間、または[再検証](#during-revalidation)されるまでブラウザのメモリに保存されます。
+
+## 再検証中 {#during-revalidation}
+
+デフォルトでは、`use cache`はサーバー側の再検証期間が**15分**です。この期間は頻繁な更新を必要としないコンテンツに役立ちますが、`cacheLife`と`cacheTag` APIを使用して、個々のキャッシュエントリが再検証されるタイミングを設定できます。
+
+- [`cacheLife`](/docs/app/api-reference/functions/cacheLife): キャッシュエントリの有効期間を設定します。
+- [`cacheTag`](/docs/app/api-reference/functions/cacheTag): オンデマンドで再検証するためのタグを作成します。
+
+これらのAPIはクライアントとサーバーのキャッシングレイヤー全体で統合されており、1か所でキャッシングのセマンティクスを設定し、どこでも適用されるようにできます。
+
+詳細については、[`cacheLife`](/docs/app/api-reference/functions/cacheLife)と[`cacheTag`](/docs/app/api-reference/functions/cacheTag)のAPIドキュメントを参照してください。
## 例 {#examples}
-### `use cache`を使用したルート全体のキャッシュ {#caching-entire-routes-with-use-cache}
+### `use cache`を使用したルート全体のキャッシュ {#caching-an-entire-route-with-use-cache}
-ルート全体をプリレンダリングするには、`layout`と`page`ファイルの両方の先頭に`use cache`を追加します。これらの各セグメントはアプリケーション内の個別のエントリーポイントとして扱われ、独立してキャッシュされます。
+ルート全体をプリレンダリングするには、`layout`と`page`ファイルの両方の先頭に`use cache`を追加します。これらの各セグメントはアプリケーション内の個別のエントリポイントとして扱われ、独立してキャッシュされます。
<Tabs>
<TabItem value="tsx" label="TypeScript">
@@ -167,13 +224,14 @@ export default function Page() {
</TabItem>
</Tabs>
-> これは、以前[`export const dynamic = "force-static"`](/docs/app/api-reference/file-conventions/route-segment-config#dynamic)オプションを使用していたアプリケーションに推奨され、ルート全体がプリレンダリングされることを保証します。
-
-### `use cache`を使用したコンポーネント出力のキャッシュ {#caching-component-output-with-use-cache}
+> **Good to know**:
+>
+> - `use cache`が`layout`または`page`のみに追加された場合、そのルートセグメントとそこにインポートされたコンポーネントのみがキャッシュされます。
+> - ルート内のネストされた子が[Dynamic APIs](/docs/app/building-your-application/rendering/server-components#dynamic-apis)を使用する場合、ルートはプリレンダリングから除外されます。
-コンポーネントレベルで`use cache`を使用して、そのコンポーネント内で行われるフェッチや計算をキャッシュできます。アプリケーション全体でコンポーネントを再利用する際、propsが同じ構造を維持する限り、同じキャッシュエントリを共有できます。
+### `use cache`を使用したコンポーネントの出力のキャッシュ {#caching-a-component-s-output-with-use-cache}
-propsはシリアライズされ、キャッシュキーの一部を形成し、シリアライズされたpropsが各インスタンスで同じ値を生成する限り、キャッシュエントリが再利用されます。
+コンポーネントレベルで`use cache`を使用して、そのコンポーネント内で実行されるフェッチや計算をキャッシュできます。シリアライズされたpropsが各インスタンスで同じ値を生成する限り、キャッシュエントリは再利用されます。
<Tabs>
<TabItem value="tsx" label="TypeScript">
@@ -210,9 +268,9 @@ export async function Bookings({ type = 'haircut' }) {
</TabItem>
</Tabs>
-### `use cache`を使用した関数出力のキャッシュ {#caching-function-output-with-use-cache}
+### `use cache`を使用した関数の出力のキャッシュ {#caching-function-output-with-use-cache}
-非同期関数に`use cache`を追加できるため、コンポーネントやルートだけでなく、ネットワークリクエストやデータベースクエリをキャッシュしたり、非常に遅い計算を行ったりすることもできます。この種の作業を含む関数に`use cache`を追加することで、キャッシュ可能になり、再利用時には同じキャッシュエントリを共有します。
+非同期関数に`use cache`を追加できるため、コンポーネントやルートのキャッシュに限定されません。ネットワークリクエスト、データベースクエリ、または遅い計算をキャッシュしたい場合があります。
<Tabs>
<TabItem value="tsx" label="TypeScript">
@@ -241,25 +299,6 @@ export async function getData() {
</TabItem>
</Tabs>
-### 再検証 {#revalidating}
-
-デフォルトでは、Next.jsは`use cache`ディレクティブを使用する際に**15分の[再検証期間](/docs/app/building-your-application/data-fetching/fetching#revalidating-cached-data)**を設定します。Next.jsはほぼ無限の有効期限を設定し、頻繁な更新が不要なコンテンツに適しています。
-
-この再検証期間は、頻繁に変更されることを期待しないコンテンツに役立つかもしれませんが、`cacheLife`と`cacheTag` APIを使用してキャッシュの動作を設定できます：
-
-- [`cacheLife`](/docs/app/api-reference/functions/cacheLife): 時間ベースの再検証期間のためのものです。
-- [`cacheTag`](/docs/app/api-reference/functions/cacheTag): キャッシュされたデータにタグを付けるためのものです。
-
-これらのAPIはクライアントとサーバーのキャッシングレイヤー全体で統合されており、キャッシングのセマンティクスを1か所で設定し、どこでも適用されるようにできます。
-
-詳細については、[`cacheLife`](/docs/app/api-reference/functions/cacheLife)と[`cacheTag`](/docs/app/api-reference/functions/cacheTag)のドキュメントを参照してください。
-
-### 無効化 {#invalidating}
-
-キャッシュされたデータを無効にするには、[`revalidateTag`](/docs/app/api-reference/functions/revalidateTag)関数を使用します。
-
-詳細については、[`revalidateTag`](/docs/app/api-reference/functions/revalidateTag)のドキュメントを参照してください。
-
### インターリービング {#interleaving}
キャッシュ可能な関数にシリアライズ不可能な引数を渡す必要がある場合は、それらを`children`として渡すことができます。これにより、`children`の参照が変わってもキャッシュエントリに影響を与えません。
@@ -328,7 +367,7 @@ import ClientComponent from './ClientComponent'
export default async function Page() {
const performUpdate = async () => {
'use server'
- // サーバーサイドの更新を実行
+ // サーバー側の更新を実行
await db.update(...)
}
@@ -355,7 +394,7 @@ import ClientComponent from './ClientComponent'
export default async function Page() {
const performUpdate = async () => {
'use server'
- // サーバーサイドの更新を実行
+ // サーバー側の更新を実行
await db.update(...)
}
diff --git a/docs/01-app/04-api-reference/01-directives/use-client.mdx b/docs/01-app/05-api-reference/01-directives/use-client.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/01-directives/use-client.mdx
rename to docs/01-app/05-api-reference/01-directives/use-client.mdx
diff --git a/docs/01-app/04-api-reference/01-directives/use-server.mdx b/docs/01-app/05-api-reference/01-directives/use-server.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/01-directives/use-server.mdx
rename to docs/01-app/05-api-reference/01-directives/use-server.mdx
diff --git a/docs/01-app/04-api-reference/02-components/font.mdx b/docs/01-app/05-api-reference/02-components/font.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/02-components/font.mdx
rename to docs/01-app/05-api-reference/02-components/font.mdx
diff --git a/docs/01-app/04-api-reference/02-components/form.mdx b/docs/01-app/05-api-reference/02-components/form.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/02-components/form.mdx
rename to docs/01-app/05-api-reference/02-components/form.mdx
diff --git a/docs/01-app/04-api-reference/02-components/image.mdx b/docs/01-app/05-api-reference/02-components/image.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/02-components/image.mdx
rename to docs/01-app/05-api-reference/02-components/image.mdx
diff --git a/docs/01-app/04-api-reference/02-components/index.mdx b/docs/01-app/05-api-reference/02-components/index.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/02-components/index.mdx
rename to docs/01-app/05-api-reference/02-components/index.mdx
diff --git a/docs/01-app/04-api-reference/02-components/link.mdx b/docs/01-app/05-api-reference/02-components/link.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/02-components/link.mdx
rename to docs/01-app/05-api-reference/02-components/link.mdx
diff --git a/docs/01-app/04-api-reference/02-components/script.mdx b/docs/01-app/05-api-reference/02-components/script.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/02-components/script.mdx
rename to docs/01-app/05-api-reference/02-components/script.mdx
diff --git a/docs/01-app/04-api-reference/03-file-conventions/01-metadata/app-icons.mdx b/docs/01-app/05-api-reference/03-file-conventions/01-metadata/app-icons.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/03-file-conventions/01-metadata/app-icons.mdx
rename to docs/01-app/05-api-reference/03-file-conventions/01-metadata/app-icons.mdx
diff --git a/docs/01-app/04-api-reference/03-file-conventions/01-metadata/index.mdx b/docs/01-app/05-api-reference/03-file-conventions/01-metadata/index.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/03-file-conventions/01-metadata/index.mdx
rename to docs/01-app/05-api-reference/03-file-conventions/01-metadata/index.mdx
diff --git a/docs/01-app/04-api-reference/03-file-conventions/01-metadata/manifest.mdx b/docs/01-app/05-api-reference/03-file-conventions/01-metadata/manifest.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/03-file-conventions/01-metadata/manifest.mdx
rename to docs/01-app/05-api-reference/03-file-conventions/01-metadata/manifest.mdx
diff --git a/docs/01-app/04-api-reference/03-file-conventions/01-metadata/opengraph-image.mdx b/docs/01-app/05-api-reference/03-file-conventions/01-metadata/opengraph-image.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/03-file-conventions/01-metadata/opengraph-image.mdx
rename to docs/01-app/05-api-reference/03-file-conventions/01-metadata/opengraph-image.mdx
diff --git a/docs/01-app/04-api-reference/03-file-conventions/01-metadata/robots.mdx b/docs/01-app/05-api-reference/03-file-conventions/01-metadata/robots.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/03-file-conventions/01-metadata/robots.mdx
rename to docs/01-app/05-api-reference/03-file-conventions/01-metadata/robots.mdx
diff --git a/docs/01-app/04-api-reference/03-file-conventions/01-metadata/sitemap.mdx b/docs/01-app/05-api-reference/03-file-conventions/01-metadata/sitemap.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/03-file-conventions/01-metadata/sitemap.mdx
rename to docs/01-app/05-api-reference/03-file-conventions/01-metadata/sitemap.mdx
diff --git a/docs/01-app/04-api-reference/03-file-conventions/default.mdx b/docs/01-app/05-api-reference/03-file-conventions/default.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/03-file-conventions/default.mdx
rename to docs/01-app/05-api-reference/03-file-conventions/default.mdx
diff --git a/docs/01-app/04-api-reference/03-file-conventions/error.mdx b/docs/01-app/05-api-reference/03-file-conventions/error.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/03-file-conventions/error.mdx
rename to docs/01-app/05-api-reference/03-file-conventions/error.mdx
diff --git a/docs/01-app/04-api-reference/03-file-conventions/forbidden.mdx b/docs/01-app/05-api-reference/03-file-conventions/forbidden.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/03-file-conventions/forbidden.mdx
rename to docs/01-app/05-api-reference/03-file-conventions/forbidden.mdx
diff --git a/docs/01-app/04-api-reference/03-file-conventions/index.mdx b/docs/01-app/05-api-reference/03-file-conventions/index.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/03-file-conventions/index.mdx
rename to docs/01-app/05-api-reference/03-file-conventions/index.mdx
diff --git a/docs/01-app/04-api-reference/03-file-conventions/instrumentation-client.mdx b/docs/01-app/05-api-reference/03-file-conventions/instrumentation-client.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/03-file-conventions/instrumentation-client.mdx
rename to docs/01-app/05-api-reference/03-file-conventions/instrumentation-client.mdx
diff --git a/docs/01-app/04-api-reference/03-file-conventions/instrumentation.mdx b/docs/01-app/05-api-reference/03-file-conventions/instrumentation.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/03-file-conventions/instrumentation.mdx
rename to docs/01-app/05-api-reference/03-file-conventions/instrumentation.mdx
diff --git a/docs/01-app/04-api-reference/03-file-conventions/layout.mdx b/docs/01-app/05-api-reference/03-file-conventions/layout.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/03-file-conventions/layout.mdx
rename to docs/01-app/05-api-reference/03-file-conventions/layout.mdx
diff --git a/docs/01-app/04-api-reference/03-file-conventions/loading.mdx b/docs/01-app/05-api-reference/03-file-conventions/loading.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/03-file-conventions/loading.mdx
rename to docs/01-app/05-api-reference/03-file-conventions/loading.mdx
diff --git a/docs/01-app/04-api-reference/03-file-conventions/mdx-components.mdx b/docs/01-app/05-api-reference/03-file-conventions/mdx-components.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/03-file-conventions/mdx-components.mdx
rename to docs/01-app/05-api-reference/03-file-conventions/mdx-components.mdx
diff --git a/docs/01-app/04-api-reference/03-file-conventions/middleware.mdx b/docs/01-app/05-api-reference/03-file-conventions/middleware.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/03-file-conventions/middleware.mdx
rename to docs/01-app/05-api-reference/03-file-conventions/middleware.mdx
diff --git a/docs/01-app/04-api-reference/03-file-conventions/not-found.mdx b/docs/01-app/05-api-reference/03-file-conventions/not-found.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/03-file-conventions/not-found.mdx
rename to docs/01-app/05-api-reference/03-file-conventions/not-found.mdx
diff --git a/docs/01-app/04-api-reference/03-file-conventions/page.mdx b/docs/01-app/05-api-reference/03-file-conventions/page.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/03-file-conventions/page.mdx
rename to docs/01-app/05-api-reference/03-file-conventions/page.mdx
diff --git a/docs/01-app/04-api-reference/03-file-conventions/route-segment-config.mdx b/docs/01-app/05-api-reference/03-file-conventions/route-segment-config.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/03-file-conventions/route-segment-config.mdx
rename to docs/01-app/05-api-reference/03-file-conventions/route-segment-config.mdx
diff --git a/docs/01-app/04-api-reference/03-file-conventions/route.mdx b/docs/01-app/05-api-reference/03-file-conventions/route.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/03-file-conventions/route.mdx
rename to docs/01-app/05-api-reference/03-file-conventions/route.mdx
diff --git a/docs/01-app/04-api-reference/03-file-conventions/template.mdx b/docs/01-app/05-api-reference/03-file-conventions/template.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/03-file-conventions/template.mdx
rename to docs/01-app/05-api-reference/03-file-conventions/template.mdx
diff --git a/docs/01-app/04-api-reference/03-file-conventions/unauthorized.mdx b/docs/01-app/05-api-reference/03-file-conventions/unauthorized.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/03-file-conventions/unauthorized.mdx
rename to docs/01-app/05-api-reference/03-file-conventions/unauthorized.mdx
diff --git a/docs/01-app/04-api-reference/04-functions/after.mdx b/docs/01-app/05-api-reference/04-functions/after.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/04-functions/after.mdx
rename to docs/01-app/05-api-reference/04-functions/after.mdx
diff --git a/docs/01-app/04-api-reference/04-functions/cacheLife.mdx b/docs/01-app/05-api-reference/04-functions/cacheLife.mdx
similarity index 65%
rename from docs/01-app/04-api-reference/04-functions/cacheLife.mdx
rename to docs/01-app/05-api-reference/04-functions/cacheLife.mdx
index 079dcb8f..3a42d6ad 100644
--- a/docs/01-app/04-api-reference/04-functions/cacheLife.mdx
+++ b/docs/01-app/05-api-reference/04-functions/cacheLife.mdx
@@ -1,6 +1,6 @@
---
title: 'cacheLife'
-description: 'キャッシュされた関数やコンポーネントのキャッシュ有効期限を設定するためのcacheLife関数の使い方を学びます。'
+description: 'キャッシュされた関数やコンポーネントのキャッシュ有効期限を設定するためのcacheLife関数の使い方を学びましょう。'
version: 'canary'
related:
title: '関連'
@@ -12,7 +12,7 @@ related:
- app/api-reference/functions/cacheTag
---
-`cacheLife`関数は、関数やコンポーネントのキャッシュの有効期間を設定するために使用されます。これは[`use cache`](/docs/app/api-reference/directives/use-cache)ディレクティブと共に、関数やコンポーネントのスコープ内で使用する必要があります。
+`cacheLife`関数は、関数やコンポーネントのキャッシュの有効期間を設定するために使用されます。これは[`use cache`](/docs/app/api-reference/directives/use-cache)ディレクティブと共に、関数やコンポーネントのスコープ内で使用されるべきです。
## 使用法 {#usage}
@@ -84,21 +84,23 @@ export default async function Page() {
### デフォルトのキャッシュプロファイル {#default-cache-profiles}
-Next.jsは、さまざまな時間スケールに基づいた名前付きキャッシュプロファイルのセットを提供します。`use cache`ディレクティブと共に`cacheLife`関数でキャッシュプロファイルを指定しない場合、Next.jsは自動的に「default」キャッシュプロファイルを適用します。
+Next.jsは、さまざまな時間スケールに基づいた名前付きキャッシュプロファイルを提供しています。`use cache`ディレクティブと共に`cacheLife`関数でキャッシュプロファイルを指定しない場合、Next.jsは自動的に`default`キャッシュプロファイルを適用します。
ただし、`use cache`ディレクティブを使用する際には、キャッシュの動作を明示的に定義するために、常にキャッシュプロファイルを追加することをお勧めします。
-| **プロファイル** | **Stale** | **Revalidate** | **Expire** | **説明** |
-| ---------------- | --------- | -------------- | -------------- | ---------------------------------------------------------- |
-| `default` | undefined | 15分 | INFINITE_CACHE | 頻繁な更新が不要なコンテンツに適したデフォルトプロファイル |
-| `seconds` | undefined | 1秒 | 1分 | ほぼリアルタイムの更新が必要な急速に変化するコンテンツ向け |
-| `minutes` | 5分 | 1分 | 1時間 | 1時間以内に頻繁に更新されるコンテンツ向け |
-| `hours` | 5分 | 1時間 | 1日 | 毎日更新されるが、少し古くても問題ないコンテンツ向け |
-| `days` | 5分 | 1日 | 1週間 | 毎週更新されるが、1日古くても問題ないコンテンツ向け |
-| `weeks` | 5分 | 1週間 | 1ヶ月 | 毎月更新されるが、1週間古くても問題ないコンテンツ向け |
-| `max` | 5分 | 1ヶ月 | INFINITE_CACHE | 更新がほとんど不要な非常に安定したコンテンツ向け |
+| **プロファイル** | `stale` | `revalidate` | `expire` | **説明** |
+| ---------------- | ------- | ------------ | -------- | ---------------------------------------------------------- |
+| `default` | 5分 | 15分 | 1年 | 頻繁な更新が不要なコンテンツに適したデフォルトプロファイル |
+| `seconds` | 0 | 1秒 | 1秒 | ほぼリアルタイムの更新が必要な急速に変化するコンテンツ向け |
+| `minutes` | 5分 | 1分 | 1時間 | 1時間以内に頻繁に更新されるコンテンツ向け |
+| `hours` | 5分 | 1時間 | 1日 | 毎日更新されるが、少し古くても問題ないコンテンツ向け |
+| `days` | 5分 | 1日 | 1週間 | 週に1回更新されるが、1日古くても問題ないコンテンツ向け |
+| `weeks` | 5分 | 1週間 | 30日 | 月に1回更新されるが、1週間古くても問題ないコンテンツ向け |
+| `max` | 5分 | 30日 | 1年 | 更新がほとんど不要な非常に安定したコンテンツ向け |
-キャッシュプロファイルを参照するために使用される文字列値には固有の意味はありません；代わりに、それらはセマンティックラベルとして機能します。これにより、コードベース内でキャッシュされたコンテンツをより理解しやすく管理できます。
+キャッシュプロファイルを参照するために使用される文字列値には固有の意味はありません。代わりに、セマンティックラベルとして機能し、コードベース内でキャッシュされたコンテンツをより理解しやすく管理できるようにします。
+
+> **Good to know:** [`staleTimes`](/docs/app/api-reference/config/next-config-js/staleTimes)および[`expireTime`](/docs/app/api-reference/config/next-config-js/expireTime)の設定オプションを更新すると、`default`キャッシュプロファイルの`stale`および`expire`プロパティも更新されます。
### カスタムキャッシュプロファイル {#custom-cache-profiles}
@@ -106,13 +108,13 @@ Next.jsは、さまざまな時間スケールに基づいた名前付きキャ
キャッシュプロファイルは、次のプロパティを含むオブジェクトです：
-| **プロパティ** | **値** | **説明** | **要件** |
-| -------------- | -------- | ------------------------------------------------------------------------------------------------------ | --------------------------------------------- |
-| `stale` | `number` | クライアントがサーバーを確認せずに値をキャッシュする期間。 | 任意 |
-| `revalidate` | `number` | サーバーでキャッシュを更新する頻度；再検証中に古い値が提供されることがあります。 | 任意 |
-| `expire` | `number` | 動的フェッチに切り替える前に値が古くなることができる最大期間；`revalidate`より長くなければなりません。 | 任意 - `revalidate`より長くなければなりません |
+| **プロパティ** | **値** | **説明** | **要件** |
+| -------------- | -------- | ------------------------------------------------------------------------------------------------ | --------------------------------------------- |
+| `stale` | `number` | クライアントがサーバーを確認せずに値をキャッシュする期間。 | 任意 |
+| `revalidate` | `number` | サーバーでキャッシュを更新する頻度。再検証中に古い値が提供されることがあります。 | 任意 |
+| `expire` | `number` | 動的フェッチに切り替える前に値が古くなるまでの最大期間。`revalidate`より長くなければなりません。 | 任意 - `revalidate`より長くなければなりません |
-"stale"プロパティは、クライアントサイドのrouterキャッシュを特に制御する点で、[`staleTimes`](/docs/app/api-reference/config/next-config-js/staleTimes)設定とは異なります。`staleTimes`は動的データと静的データのすべてのインスタンスに影響を与えるグローバル設定ですが、`cacheLife`設定は関数またはルートごとに"stale"時間を定義することを可能にします。
+"stale"プロパティは、クライアントサイドのrouterキャッシュを特に制御する点で、[`staleTimes`](/docs/app/api-reference/config/next-config-js/staleTimes)設定とは異なります。`staleTimes`は動的データと静的データのすべてのインスタンスに影響を与えるグローバル設定ですが、`cacheLife`設定では、関数やルートごとに"stale"時間を定義できます。
> **Good to know**: "stale"プロパティは`Cache-control: max-age`ヘッダーを設定しません。代わりに、クライアントサイドのrouterキャッシュを制御します。
@@ -120,7 +122,7 @@ Next.jsは、さまざまな時間スケールに基づいた名前付きキャ
### 再利用可能なキャッシュプロファイルの定義 {#defining-reusable-cache-profiles}
-`next.config.ts`ファイルに再利用可能なキャッシュプロファイルを定義することで作成できます。使用例に適した名前を選び、`stale`、`revalidate`、`expire`プロパティの値を設定します。必要に応じて、カスタムキャッシュプロファイルをいくつでも作成できます。各プロファイルは、`cacheLife`関数に渡される文字列値としてその名前で参照できます。
+`next.config.ts`ファイルで再利用可能なキャッシュプロファイルを定義することができます。用途に合った名前を選び、`stale`、`revalidate`、`expire`プロパティの値を設定します。必要に応じて、カスタムキャッシュプロファイルをいくつでも作成できます。各プロファイルは、`cacheLife`関数に渡される文字列値としてその名前で参照できます。
<Tabs>
<TabItem value="ts" label="TypeScript">
@@ -167,7 +169,7 @@ module.exports = nextConfig
</TabItem>
</Tabs>
-上記の例では、14日間キャッシュし、毎日更新を確認し、14日後にキャッシュが期限切れになります。このプロファイルは、アプリケーション全体でその名前で参照できます：
+上記の例では、14日間キャッシュし、毎日更新を確認し、14日後にキャッシュを期限切れにします。このプロファイルは、アプリケーション全体でその名前で参照できます：
```tsx title="app/page.tsx" highlight={5}
'use cache'
@@ -181,11 +183,11 @@ export default async function Page() {
### デフォルトのキャッシュプロファイルの上書き {#overriding-the-default-cache-profiles}
-デフォルトのキャッシュプロファイルは、キャッシュ可能な出力の新鮮さや古さを考えるのに役立ちますが、アプリケーションのキャッシュ戦略により適合する異なる名前付きプロファイルを好むかもしれません。
+デフォルトのキャッシュプロファイルは、キャッシュ可能な出力の新鮮さや古さを考えるための便利な方法を提供しますが、アプリケーションのキャッシュ戦略により適した異なる名前付きプロファイルを好む場合があります。
デフォルトの名前付きキャッシュプロファイルを上書きするには、デフォルトと同じ名前で新しい設定を作成します。
-以下の例は、デフォルトの「days」キャッシュプロファイルを上書きする方法を示しています：
+以下の例は、デフォルトの"days"キャッシュプロファイルを上書きする方法を示しています：
```ts title="next.config.ts"
const nextConfig = {
@@ -247,11 +249,11 @@ export default async function Page() {
</TabItem>
</Tabs>
-このインラインキャッシュプロファイルは、それが作成された関数またはファイルにのみ適用されます。アプリケーション全体で同じプロファイルを再利用したい場合は、`next.config.ts`ファイルの`cacheLife`プロパティに[設定を追加](#defining-reusable-cache-profiles)できます。
+このインラインキャッシュプロファイルは、それが作成された関数またはファイルにのみ適用されます。アプリケーション全体で同じプロファイルを再利用したい場合は、`next.config.ts`ファイルの`cacheLife`プロパティに[設定を追加](#defining-reusable-cache-profiles)することができます。
### `use cache`と`cacheLife`のネストされた使用 {#nested-usage-of-use-cache-and-cachelife}
-同じルートまたはコンポーネントtreeで複数のキャッシュ動作を定義する場合、内部キャッシュが独自の`cacheLife`プロファイルを指定している場合、外部キャッシュはそれらの中で最も短いキャッシュ期間を尊重します。**これは、外部キャッシュが独自の明示的な`cacheLife`プロファイルを持たない場合にのみ適用されます。**
+同じルートやコンポーネントtreeで複数のキャッシュ動作を定義する場合、内部キャッシュが独自の`cacheLife`プロファイルを指定している場合、外部キャッシュはそれらの中で最も短いキャッシュ期間を尊重します。**これは、外部キャッシュが独自の明示的な`cacheLife`プロファイルを持たない場合にのみ適用されます。**
たとえば、ページに`use cache`ディレクティブを追加し、キャッシュプロファイルを指定しない場合、デフォルトのキャッシュプロファイルが暗黙的に適用されます（`cacheLife(”default”)`）。ページにインポートされたコンポーネントが独自のキャッシュプロファイルを持つ`use cache`ディレクティブを使用している場合、外部と内部のキャッシュプロファイルが比較され、プロファイルで設定された最短期間が適用されます。
@@ -283,6 +285,6 @@ export async function ChildComponent() {
cacheLife('hours')
return <div>Child Content</div>
- // このコンポーネントのキャッシュは、より短い 'hours' プロファイルを尊重します
+ // このコンポーネントのキャッシュは、より短い'hours'プロファイルを尊重します
}
```
diff --git a/docs/01-app/04-api-reference/04-functions/cacheTag.mdx b/docs/01-app/05-api-reference/04-functions/cacheTag.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/04-functions/cacheTag.mdx
rename to docs/01-app/05-api-reference/04-functions/cacheTag.mdx
diff --git a/docs/01-app/04-api-reference/04-functions/connection.mdx b/docs/01-app/05-api-reference/04-functions/connection.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/04-functions/connection.mdx
rename to docs/01-app/05-api-reference/04-functions/connection.mdx
diff --git a/docs/01-app/04-api-reference/04-functions/cookies.mdx b/docs/01-app/05-api-reference/04-functions/cookies.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/04-functions/cookies.mdx
rename to docs/01-app/05-api-reference/04-functions/cookies.mdx
diff --git a/docs/01-app/04-api-reference/04-functions/draft-mode.mdx b/docs/01-app/05-api-reference/04-functions/draft-mode.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/04-functions/draft-mode.mdx
rename to docs/01-app/05-api-reference/04-functions/draft-mode.mdx
diff --git a/docs/01-app/04-api-reference/04-functions/fetch.mdx b/docs/01-app/05-api-reference/04-functions/fetch.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/04-functions/fetch.mdx
rename to docs/01-app/05-api-reference/04-functions/fetch.mdx
diff --git a/docs/01-app/04-api-reference/04-functions/forbidden.mdx b/docs/01-app/05-api-reference/04-functions/forbidden.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/04-functions/forbidden.mdx
rename to docs/01-app/05-api-reference/04-functions/forbidden.mdx
diff --git a/docs/01-app/04-api-reference/04-functions/generate-image-metadata.mdx b/docs/01-app/05-api-reference/04-functions/generate-image-metadata.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/04-functions/generate-image-metadata.mdx
rename to docs/01-app/05-api-reference/04-functions/generate-image-metadata.mdx
diff --git a/docs/01-app/04-api-reference/04-functions/generate-metadata.mdx b/docs/01-app/05-api-reference/04-functions/generate-metadata.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/04-functions/generate-metadata.mdx
rename to docs/01-app/05-api-reference/04-functions/generate-metadata.mdx
diff --git a/docs/01-app/04-api-reference/04-functions/generate-sitemaps.mdx b/docs/01-app/05-api-reference/04-functions/generate-sitemaps.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/04-functions/generate-sitemaps.mdx
rename to docs/01-app/05-api-reference/04-functions/generate-sitemaps.mdx
diff --git a/docs/01-app/04-api-reference/04-functions/generate-static-params.mdx b/docs/01-app/05-api-reference/04-functions/generate-static-params.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/04-functions/generate-static-params.mdx
rename to docs/01-app/05-api-reference/04-functions/generate-static-params.mdx
diff --git a/docs/01-app/04-api-reference/04-functions/generate-viewport.mdx b/docs/01-app/05-api-reference/04-functions/generate-viewport.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/04-functions/generate-viewport.mdx
rename to docs/01-app/05-api-reference/04-functions/generate-viewport.mdx
diff --git a/docs/01-app/04-api-reference/04-functions/headers.mdx b/docs/01-app/05-api-reference/04-functions/headers.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/04-functions/headers.mdx
rename to docs/01-app/05-api-reference/04-functions/headers.mdx
diff --git a/docs/01-app/04-api-reference/04-functions/image-response.mdx b/docs/01-app/05-api-reference/04-functions/image-response.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/04-functions/image-response.mdx
rename to docs/01-app/05-api-reference/04-functions/image-response.mdx
diff --git a/docs/01-app/04-api-reference/04-functions/index.mdx b/docs/01-app/05-api-reference/04-functions/index.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/04-functions/index.mdx
rename to docs/01-app/05-api-reference/04-functions/index.mdx
diff --git a/docs/01-app/04-api-reference/04-functions/next-request.mdx b/docs/01-app/05-api-reference/04-functions/next-request.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/04-functions/next-request.mdx
rename to docs/01-app/05-api-reference/04-functions/next-request.mdx
diff --git a/docs/01-app/04-api-reference/04-functions/next-response.mdx b/docs/01-app/05-api-reference/04-functions/next-response.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/04-functions/next-response.mdx
rename to docs/01-app/05-api-reference/04-functions/next-response.mdx
diff --git a/docs/01-app/04-api-reference/04-functions/not-found.mdx b/docs/01-app/05-api-reference/04-functions/not-found.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/04-functions/not-found.mdx
rename to docs/01-app/05-api-reference/04-functions/not-found.mdx
diff --git a/docs/01-app/04-api-reference/04-functions/permanentRedirect.mdx b/docs/01-app/05-api-reference/04-functions/permanentRedirect.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/04-functions/permanentRedirect.mdx
rename to docs/01-app/05-api-reference/04-functions/permanentRedirect.mdx
diff --git a/docs/01-app/04-api-reference/04-functions/redirect.mdx b/docs/01-app/05-api-reference/04-functions/redirect.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/04-functions/redirect.mdx
rename to docs/01-app/05-api-reference/04-functions/redirect.mdx
diff --git a/docs/01-app/04-api-reference/04-functions/revalidatePath.mdx b/docs/01-app/05-api-reference/04-functions/revalidatePath.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/04-functions/revalidatePath.mdx
rename to docs/01-app/05-api-reference/04-functions/revalidatePath.mdx
diff --git a/docs/01-app/04-api-reference/04-functions/revalidateTag.mdx b/docs/01-app/05-api-reference/04-functions/revalidateTag.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/04-functions/revalidateTag.mdx
rename to docs/01-app/05-api-reference/04-functions/revalidateTag.mdx
diff --git a/docs/01-app/04-api-reference/04-functions/unauthorized.mdx b/docs/01-app/05-api-reference/04-functions/unauthorized.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/04-functions/unauthorized.mdx
rename to docs/01-app/05-api-reference/04-functions/unauthorized.mdx
diff --git a/docs/01-app/04-api-reference/04-functions/unstable_cache.mdx b/docs/01-app/05-api-reference/04-functions/unstable_cache.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/04-functions/unstable_cache.mdx
rename to docs/01-app/05-api-reference/04-functions/unstable_cache.mdx
diff --git a/docs/01-app/04-api-reference/04-functions/unstable_noStore.mdx b/docs/01-app/05-api-reference/04-functions/unstable_noStore.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/04-functions/unstable_noStore.mdx
rename to docs/01-app/05-api-reference/04-functions/unstable_noStore.mdx
diff --git a/docs/01-app/04-api-reference/04-functions/unstable_rethrow.mdx b/docs/01-app/05-api-reference/04-functions/unstable_rethrow.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/04-functions/unstable_rethrow.mdx
rename to docs/01-app/05-api-reference/04-functions/unstable_rethrow.mdx
diff --git a/docs/01-app/05-api-reference/04-functions/use-link-status.mdx b/docs/01-app/05-api-reference/04-functions/use-link-status.mdx
new file mode 100644
index 00000000..36b7ad24
--- /dev/null
+++ b/docs/01-app/05-api-reference/04-functions/use-link-status.mdx
@@ -0,0 +1,262 @@
+---
+title: 'useLinkStatus'
+description: 'useLinkStatus フックのAPIリファレンス。'
+related:
+ title: '次のステップ'
+ description: 'このページで紹介されている機能についてさらに学ぶには、APIリファレンスを参照してください。'
+ links:
+ - app/api-reference/components/link
+ - app/api-reference/file-conventions/loading
+---
+
+`useLinkStatus` フックは、`<Link>` の**pending**状態を追跡することができます。これを使用して、新しいルートへのナビゲーションが完了するまでの間、ユーザーにインラインの視覚的フィードバック（スピナーやテキストのきらめきなど）を表示することができます。
+
+`useLinkStatus` が役立つのは以下の場合です：
+
+- [Prefetching](/docs/app/building-your-application/routing/linking-and-navigating#2-prefetching) が無効化されているか、進行中でナビゲーションがブロックされている場合
+- 目的地のルートが動的であり、即時ナビゲーションを可能にする [`loading.js`](/docs/app/api-reference/file-conventions/loading) ファイルが含まれていない場合
+
+<Tabs>
+<TabItem value="tsx" label="TypeScript">
+
+```tsx title="app/loading-indicator.tsx" switcher
+'use client'
+
+import { useLinkStatus } from 'next/link'
+
+export default function LoadingIndicator() {
+ const { pending } = useLinkStatus()
+ return pending ? (
+ <div role="status" aria-label="Loading" className="spinner" />
+ ) : null
+}
+```
+
+</TabItem>
+<TabItem value="jsx" label="JavaScript">
+
+```jsx title="app/loading-indicator.js" switcher
+'use client'
+
+import { useLinkStatus } from 'next/link'
+
+export default function LoadingIndicator() {
+ const { pending } = useLinkStatus()
+ return pending ? (
+ <div role="status" aria-label="Loading" className="spinner" />
+ ) : null
+}
+```
+
+</TabItem>
+</Tabs>
+
+<Tabs>
+<TabItem value="tsx" label="TypeScript">
+
+```tsx title="app/header.tsx" switcher
+import Link from 'next/link'
+import LoadingIndicator from './loading-indicator'
+
+export default function Header() {
+ return (
+ <header>
+ <Link href="/dashboard" prefetch={false}>
+ Dashboard <LoadingIndicator />
+ </Link>
+ </header>
+ )
+}
+```
+
+</TabItem>
+<TabItem value="jsx" label="JavaScript">
+
+```jsx title="app/header.js" switcher
+import Link from 'next/link'
+import LoadingIndicator from './loading-indicator'
+
+export default function Header() {
+ return (
+ <header>
+ <Link href="/dashboard" prefetch={false}>
+ Dashboard <LoadingIndicator />
+ </Link>
+ </header>
+ )
+}
+```
+
+</TabItem>
+</Tabs>
+
+> **Good to know**:
+>
+> - `useLinkStatus` は `Link` コンポーネントの子孫コンポーネント内で使用する必要があります
+> - このフックは、`Link` コンポーネントで `prefetch={false}` が設定されている場合に最も有用です
+> - リンクされたルートが事前取得されている場合、pending 状態はスキップされます
+> - 複数のリンクを短時間で連続してクリックした場合、最後のリンクの pending 状態のみが表示されます
+> - このフックは Pages Router ではサポートされておらず、常に `{ pending: false }` を返します
+
+## パラメータ {#parameters}
+
+```tsx
+const { pending } = useLinkStatus()
+```
+
+`useLinkStatus` はパラメータを受け取りません。
+
+## 戻り値 {#returns}
+
+`useLinkStatus` は、単一のプロパティを持つオブジェクトを返します：
+
+| プロパティ | 型 | 説明 |
+| ---------- | ------- | --------------------------------------------- |
+| pending | boolean | 履歴が更新される前は `true`、更新後は `false` |
+
+## 例 {#example}
+
+### インラインのローディングインジケーター {#inline-loading-indicator}
+
+ユーザーが事前取得が完了する前にリンクをクリックした場合、ナビゲーションが行われていることを示す視覚的フィードバックを追加することは有用です。
+
+<Tabs>
+<TabItem value="tsx" label="TypeScript">
+
+```tsx title="app/components/loading-indicator.tsx" switcher
+'use client'
+
+import { useLinkStatus } from 'next/link'
+
+export default function LoadingIndicator() {
+ const { pending } = useLinkStatus()
+ return pending ? (
+ <div role="status" aria-label="Loading" className="spinner" />
+ ) : null
+}
+```
+
+</TabItem>
+<TabItem value="jsx" label="JavaScript">
+
+```jsx title="app/components/loading-indicator.js" switcher
+'use client'
+
+import { useLinkStatus } from 'next/link'
+
+export default function LoadingIndicator() {
+ const { pending } = useLinkStatus()
+ return pending ? (
+ <div role="status" aria-label="Loading" className="spinner" />
+ ) : null
+}
+```
+
+</TabItem>
+</Tabs>
+
+<Tabs>
+<TabItem value="tsx" label="TypeScript">
+
+```tsx title="app/shop/layout.tsx" switcher
+import Link from 'next/link'
+import LoadingIndicator from './components/loading-indicator'
+
+const links = [
+ { href: '/shop/electronics', label: 'Electronics' },
+ { href: '/shop/clothing', label: 'Clothing' },
+ { href: '/shop/books', label: 'Books' },
+]
+
+function Menubar() {
+ return (
+ <div>
+ {links.map((link) => (
+ <Link key={link.label} href={link.href}>
+ {link.label} <LoadingIndicator />
+ </Link>
+ ))}
+ </div>
+ )
+}
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+ return (
+ <div>
+ <Menubar />
+ {children}
+ </div>
+ )
+}
+```
+
+</TabItem>
+<TabItem value="jsx" label="JavaScript">
+
+```jsx title="app/shop/layout.js" switcher
+import Link from 'next/link'
+import LoadingIndicator from './components/loading-indicator'
+
+const links = [
+ { href: '/shop/electronics', label: 'Electronics' },
+ { href: '/shop/clothing', label: 'Clothing' },
+ { href: '/shop/books', label: 'Books' },
+]
+
+function Menubar() {
+ return (
+ <div>
+ {links.map((link) => (
+ <Link key={link.label} href={link.href}>
+ {link.label} <LoadingIndicator />
+ </Link>
+ ))}
+ </div>
+ )
+}
+
+export default function Layout({ children }) {
+ return (
+ <div>
+ <Menubar />
+ {children}
+ </div>
+ )
+}
+```
+
+</TabItem>
+</Tabs>
+
+## 高速ナビゲーションの優雅な処理 {#gracefully-handling-fast-navigation}
+
+新しいルートへのナビゲーションが速い場合、ユーザーは不要なローディングインジケーターのフラッシュを見るかもしれません。ユーザーエクスペリエンスを向上させ、ナビゲーションが完了するのに時間がかかる場合にのみローディングインジケーターを表示するための1つの方法は、初期アニメーションの遅延（例：100ms）を追加し、アニメーションを不可視（例：`opacity: 0`）として開始することです。
+
+```css title="app/styles/global.css"
+.spinner {
+ /* ... */
+ opacity: 0;
+ animation:
+ fadeIn 500ms 100ms forwards,
+ rotate 1s linear infinite;
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes rotate {
+ to {
+ transform: rotate(360deg);
+ }
+}
+```
+
+| バージョン | 変更内容 |
+| ---------- | ---------------------------------- |
+| `v15.3.0` | `useLinkStatus` が導入されました。 |
diff --git a/docs/01-app/04-api-reference/04-functions/use-params.mdx b/docs/01-app/05-api-reference/04-functions/use-params.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/04-functions/use-params.mdx
rename to docs/01-app/05-api-reference/04-functions/use-params.mdx
diff --git a/docs/01-app/04-api-reference/04-functions/use-pathname.mdx b/docs/01-app/05-api-reference/04-functions/use-pathname.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/04-functions/use-pathname.mdx
rename to docs/01-app/05-api-reference/04-functions/use-pathname.mdx
diff --git a/docs/01-app/04-api-reference/04-functions/use-report-web-vitals.mdx b/docs/01-app/05-api-reference/04-functions/use-report-web-vitals.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/04-functions/use-report-web-vitals.mdx
rename to docs/01-app/05-api-reference/04-functions/use-report-web-vitals.mdx
diff --git a/docs/01-app/04-api-reference/04-functions/use-router.mdx b/docs/01-app/05-api-reference/04-functions/use-router.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/04-functions/use-router.mdx
rename to docs/01-app/05-api-reference/04-functions/use-router.mdx
diff --git a/docs/01-app/04-api-reference/04-functions/use-search-params.mdx b/docs/01-app/05-api-reference/04-functions/use-search-params.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/04-functions/use-search-params.mdx
rename to docs/01-app/05-api-reference/04-functions/use-search-params.mdx
diff --git a/docs/01-app/04-api-reference/04-functions/use-selected-layout-segment.mdx b/docs/01-app/05-api-reference/04-functions/use-selected-layout-segment.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/04-functions/use-selected-layout-segment.mdx
rename to docs/01-app/05-api-reference/04-functions/use-selected-layout-segment.mdx
diff --git a/docs/01-app/04-api-reference/04-functions/use-selected-layout-segments.mdx b/docs/01-app/05-api-reference/04-functions/use-selected-layout-segments.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/04-functions/use-selected-layout-segments.mdx
rename to docs/01-app/05-api-reference/04-functions/use-selected-layout-segments.mdx
diff --git a/docs/01-app/04-api-reference/04-functions/userAgent.mdx b/docs/01-app/05-api-reference/04-functions/userAgent.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/04-functions/userAgent.mdx
rename to docs/01-app/05-api-reference/04-functions/userAgent.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/allowedDevOrigins.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/allowedDevOrigins.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/allowedDevOrigins.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/allowedDevOrigins.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/appDir.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/appDir.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/appDir.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/appDir.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/assetPrefix.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/assetPrefix.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/assetPrefix.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/assetPrefix.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/authInterrupts.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/authInterrupts.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/authInterrupts.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/authInterrupts.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/basePath.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/basePath.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/basePath.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/basePath.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/cacheLife.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/cacheLife.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/cacheLife.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/cacheLife.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/compress.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/compress.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/compress.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/compress.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/crossOrigin.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/crossOrigin.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/crossOrigin.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/crossOrigin.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/cssChunking.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/cssChunking.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/cssChunking.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/cssChunking.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/devIndicators.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/devIndicators.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/devIndicators.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/devIndicators.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/distDir.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/distDir.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/distDir.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/distDir.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/dynamicIO.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/dynamicIO.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/dynamicIO.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/dynamicIO.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/env.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/env.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/env.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/env.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/eslint.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/eslint.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/eslint.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/eslint.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/expireTime.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/expireTime.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/expireTime.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/expireTime.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/exportPathMap.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/exportPathMap.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/exportPathMap.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/exportPathMap.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/generateBuildId.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/generateBuildId.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/generateBuildId.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/generateBuildId.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/generateEtags.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/generateEtags.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/generateEtags.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/generateEtags.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/headers.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/headers.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/headers.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/headers.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/htmlLimitedBots.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/htmlLimitedBots.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/htmlLimitedBots.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/htmlLimitedBots.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/httpAgentOptions.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/httpAgentOptions.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/httpAgentOptions.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/httpAgentOptions.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/images.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/images.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/images.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/images.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/incrementalCacheHandlerPath.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/incrementalCacheHandlerPath.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/incrementalCacheHandlerPath.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/incrementalCacheHandlerPath.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/index.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/index.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/index.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/index.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/inlineCss.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/inlineCss.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/inlineCss.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/inlineCss.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/logging.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/logging.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/logging.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/logging.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/mdxRs.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/mdxRs.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/mdxRs.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/mdxRs.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/onDemandEntries.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/onDemandEntries.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/onDemandEntries.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/onDemandEntries.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/optimizePackageImports.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/optimizePackageImports.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/optimizePackageImports.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/optimizePackageImports.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/output.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/output.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/output.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/output.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/pageExtensions.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/pageExtensions.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/pageExtensions.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/pageExtensions.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/poweredByHeader.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/poweredByHeader.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/poweredByHeader.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/poweredByHeader.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/ppr.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/ppr.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/ppr.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/ppr.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/productionBrowserSourceMaps.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/productionBrowserSourceMaps.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/productionBrowserSourceMaps.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/productionBrowserSourceMaps.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/reactCompiler.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/reactCompiler.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/reactCompiler.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/reactCompiler.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/reactMaxHeadersLength.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/reactMaxHeadersLength.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/reactMaxHeadersLength.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/reactMaxHeadersLength.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/reactStrictMode.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/reactStrictMode.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/reactStrictMode.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/reactStrictMode.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/redirects.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/redirects.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/redirects.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/redirects.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/rewrites.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/rewrites.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/rewrites.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/rewrites.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/sassOptions.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/sassOptions.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/sassOptions.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/sassOptions.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/serverActions.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/serverActions.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/serverActions.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/serverActions.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/serverComponentsHmrCache.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/serverComponentsHmrCache.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/serverComponentsHmrCache.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/serverComponentsHmrCache.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/serverExternalPackages.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/serverExternalPackages.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/serverExternalPackages.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/serverExternalPackages.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/staleTimes.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/staleTimes.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/staleTimes.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/staleTimes.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/staticGeneration.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/staticGeneration.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/staticGeneration.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/staticGeneration.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/trailingSlash.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/trailingSlash.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/trailingSlash.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/trailingSlash.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/transpilePackages.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/transpilePackages.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/transpilePackages.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/transpilePackages.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/turbo.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/turbopack.mdx
similarity index 52%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/turbo.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/turbopack.mdx
index 9767bd22..914ba0b0 100644
--- a/docs/01-app/04-api-reference/05-config/01-next-config-js/turbo.mdx
+++ b/docs/01-app/05-api-reference/05-config/01-next-config-js/turbopack.mdx
@@ -1,12 +1,11 @@
---
-title: 'turbo'
-description: 'Turbopack固有のオプションでNext.jsを設定する'
-version: 'experimental'
+title: 'turbopack'
+description: 'Next.jsをTurbopack固有のオプションで設定する'
---
{/* このドキュメントの内容はapp routerとpages routerの間で共有されています。Pages Routerに特有の内容を追加するには、`<PagesOnly>Content</PagesOnly>`コンポーネントを使用できます。共有される内容はコンポーネントでラップしないでください。 */}
-`turbo`オプションを使用すると、さまざまなファイルを変換し、モジュールの解決方法を変更するために[Turbopack](/docs/app/api-reference/turbopack)をカスタマイズできます。
+`turbopack`オプションを使用すると、さまざまなファイルを変換し、モジュールの解決方法を変更するために[Turbopack](/docs/app/api-reference/turbopack)をカスタマイズできます。
<Tabs>
<TabItem value="ts" label="TypeScript">
@@ -15,10 +14,8 @@ version: 'experimental'
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
- experimental: {
- turbo: {
- // ...
- },
+ turbopack: {
+ // ...
},
}
@@ -31,10 +28,8 @@ export default nextConfig
```js title="next.config.js" switcher
/** @type {import('next').NextConfig} */
const nextConfig = {
- experimental: {
- turbo: {
- // ...
- },
+ turbopack: {
+ // ...
},
}
@@ -48,24 +43,22 @@ module.exports = nextConfig
>
> - Next.jsのTurbopackは、組み込み機能に対してローダーやローダー設定を必要としません。TurbopackはCSSと最新のJavaScriptのコンパイルをサポートしているため、`@babel/preset-env`を使用している場合、`css-loader`、`postcss-loader`、`babel-loader`は不要です。
-## リファレンス {#reference}
+## 参照 {#reference}
### オプション {#options}
-`turbo`設定で利用可能なオプションは次のとおりです：
+`turbopack`設定で利用可能なオプションは以下の通りです：
-| オプション | 説明 |
-| ------------------- | -------------------------------------------------------------------------------- |
-| `rules` | Turbopackを使用する際に適用されるサポートされているwebpackローダーのリストです。 |
-| `resolveAlias` | エイリアス化されたインポートをモジュールにマッピングして、代わりにロードします。 |
-| `resolveExtensions` | ファイルをインポートする際に解決する拡張子のリストです。 |
-| `moduleIdStrategy` | モジュールIDを割り当てます。 |
-| `treeShaking` | Turbopackの開発サーバーとビルドのためのtree shakingを有効にします。 |
-| `memoryLimit` | turboのターゲットメモリ制限（バイト単位）です。 |
+| オプション | 説明 |
+| ------------------- | -------------------------------------------------------------------------------------------- |
+| `root` | アプリケーションのrootディレクトリを設定します。絶対パスである必要があります。 |
+| `rules` | Turbopackを使用する際に適用されるサポートされているwebpackローダーのリストです。 |
+| `resolveAlias` | エイリアス化されたインポートをモジュールにマッピングして、それらを読み込む場所を変更します。 |
+| `resolveExtensions` | ファイルをインポートする際に解決する拡張子のリストです。 |
### サポートされているローダー {#supported-loaders}
-次のローダーは、Turbopackのwebpackローダー実装で動作することが確認されています：
+以下のローダーは、Turbopackのwebpackローダー実装で動作することが確認されています：
- [`babel-loader`](https://www.npmjs.com/package/babel-loader)
- [`@svgr/webpack`](https://www.npmjs.com/package/@svgr/webpack)
@@ -77,13 +70,36 @@ module.exports = nextConfig
## 例 {#examples}
+### Rootディレクトリ {#root-directory}
+
+Turbopackはrootディレクトリを使用してモジュールを解決します。プロジェクトのroot外のファイルは解決されません。
+
+Next.jsはプロジェクトのrootディレクトリを自動的に検出します。以下のいずれかのファイルを探すことで行います：
+
+- `pnpm-lock.yaml`
+- `package-lock.json`
+- `yarn.lock`
+- `bun.lock`
+- `bun.lockb`
+
+異なるプロジェクト構造を持っている場合、例えばワークスペースを使用していない場合は、`root`オプションを手動で設定できます：
+
+```js title="next.config.js"
+const path = require('path')
+module.exports = {
+ turbopack: {
+ root: path.join(__dirname, '..'),
+ },
+}
+```
+
### webpackローダーの設定 {#configuring-webpack-loaders}
-組み込みのサポートを超えるローダーが必要な場合、多くのwebpackローダーはすでにTurbopackと連携しています。現在、いくつかの制限があります：
+組み込みのサポートを超えるローダーサポートが必要な場合、多くのwebpackローダーはすでにTurbopackで動作します。現在、いくつかの制限があります：
- webpackローダーAPIのコアサブセットのみが実装されています。現在、一部の人気のあるローダーに対して十分なカバレッジがあり、将来的にAPIサポートを拡大する予定です。
- JavaScriptコードを返すローダーのみがサポートされています。スタイルシートや画像のようなファイルを変換するローダーは現在サポートされていません。
-- webpackローダーに渡されるオプションは、プレーンなJavaScriptプリミティブ、オブジェクト、および配列でなければなりません。たとえば、`require()`プラグインモジュールをオプション値として渡すことはできません。
+- webpackローダーに渡されるオプションは、純粋なJavaScriptプリミティブ、オブジェクト、および配列でなければなりません。例えば、`require()`プラグインモジュールをオプション値として渡すことはできません。
ローダーを設定するには、インストールしたローダーの名前と任意のオプションを`next.config.js`に追加し、ファイル拡張子をローダーのリストにマッピングします。
@@ -91,95 +107,61 @@ module.exports = nextConfig
```js title="next.config.js"
module.exports = {
- experimental: {
- turbo: {
- rules: {
- '*.svg': {
- loaders: ['@svgr/webpack'],
- as: '*.js',
- },
+ turbopack: {
+ rules: {
+ '*.svg': {
+ loaders: ['@svgr/webpack'],
+ as: '*.js',
},
},
},
}
```
-> **Good to know**: Next.jsバージョン13.4.4以前では、`turbo.rules`は`turbo.loaders`と呼ばれ、`.mdx`のようなファイル拡張子のみを受け入れていました。
+> **Good to know**: Next.jsバージョン13.4.4以前では、`turbo.rules`は`turbo.loaders`と呼ばれ、`*.mdx`の代わりに`.mdx`のようなファイル拡張子のみを受け入れていました。
### エイリアスの解決 {#resolving-aliases}
-Turbopackは、webpackの[`resolve.alias`](https://webpack.js.org/configuration/resolve/#resolvealias)設定に似たエイリアスを通じてモジュール解決を変更するように設定できます。
+Turbopackは、webpackの[`resolve.alias`](https://webpack.js.org/configuration/resolve/#resolvealias)設定に似た方法で、エイリアスを通じてモジュール解決を変更するように設定できます。
-エイリアスを解決するには、インポートされたパターンを`next.config.js`で新しい宛先にマッピングします：
+エイリアスの解決を設定するには、インポートされたパターンを`next.config.js`で新しい宛先にマッピングします：
```js title="next.config.js"
module.exports = {
- experimental: {
- turbo: {
- resolveAlias: {
- underscore: 'lodash',
- mocha: { browser: 'mocha/browser-entry.js' },
- },
+ turbopack: {
+ resolveAlias: {
+ underscore: 'lodash',
+ mocha: { browser: 'mocha/browser-entry.js' },
},
},
}
```
-これは、`underscore`パッケージのインポートを`lodash`パッケージにエイリアスします。つまり、`import underscore from 'underscore'`は`underscore`の代わりに`lodash`モジュールをロードします。
+これにより、`underscore`パッケージのインポートが`lodash`パッケージにエイリアスされます。つまり、`import underscore from 'underscore'`は`underscore`の代わりに`lodash`モジュールを読み込みます。
Turbopackは、Node.jsの[条件付きエクスポート](https://nodejs.org/docs/latest-v18.x/api/packages.html#conditional-exports)に似た条件付きエイリアスもサポートしています。現在、`browser`条件のみがサポートされています。上記の例では、Turbopackがブラウザ環境をターゲットにする場合、`mocha`モジュールのインポートは`mocha/browser-entry.js`にエイリアスされます。
### カスタム拡張子の解決 {#resolving-custom-extensions}
-Turbopackは、webpackの[`resolve.extensions`](https://webpack.js.org/configuration/resolve/#resolveextensions)設定に似たカスタム拡張子でモジュールを解決するように設定できます。
+Turbopackは、webpackの[`resolve.extensions`](https://webpack.js.org/configuration/resolve/#resolveextensions)設定に似た方法で、カスタム拡張子を持つモジュールを解決するように設定できます。
解決する拡張子を設定するには、`next.config.js`の`resolveExtensions`フィールドを使用します：
```js title="next.config.js"
module.exports = {
- experimental: {
- turbo: {
- resolveExtensions: [
- '.mdx',
- '.tsx',
- '.ts',
- '.jsx',
- '.js',
- '.mjs',
- '.json',
- ],
- },
+ turbopack: {
+ resolveExtensions: ['.mdx', '.tsx', '.ts', '.jsx', '.js', '.mjs', '.json'],
},
}
```
これにより、元の解決拡張子が提供されたリストで上書きされます。デフォルトの拡張子を含めることを忘れないでください。
-webpackからTurbopackへのアプリの移行方法についての詳細とガイダンスは、[Turbopackのwebpack互換性に関するドキュメント](https://turbo.build/pack/docs/migrating-from-webpack)を参照してください。
-
-### モジュールIDの割り当て {#assigning-module-ids}
-
-Turbopackは現在、モジュールIDを割り当てるための2つの戦略をサポートしています：
-
-- `'named'`は、モジュールのパスと機能に基づいて読みやすいモジュールIDを割り当てます。
-- `'deterministic'`は、小さなハッシュ化された数値のモジュールIDを割り当て、ビルド間でほぼ一貫しているため、長期的なキャッシュに役立ちます。
-
-設定されていない場合、Turbopackは開発ビルドには`'named'`を、プロダクションビルドには`'deterministic'`を使用します。
-
-モジュールID戦略を設定するには、`next.config.js`の`moduleIdStrategy`フィールドを使用します：
-
-```js title="next.config.js"
-module.exports = {
- experimental: {
- turbo: {
- moduleIdStrategy: 'deterministic',
- },
- },
-}
-```
+webpackからTurbopackへのアプリの移行方法についての詳細情報とガイダンスについては、[Turbopackのwebpack互換性に関するドキュメント](https://turbo.build/pack/docs/migrating-from-webpack)を参照してください。
## バージョン履歴 {#version-history}
-| バージョン | 変更内容 |
-| ---------- | -------------------------------------- |
-| `13.0.0` | `experimental.turbo`が導入されました。 |
+| バージョン | 変更内容 |
+| ---------- | --------------------------------------------------- |
+| `15.3.0` | `experimental.turbo`が`turbopack`に変更されました。 |
+| `13.0.0` | `experimental.turbo`が導入されました。 |
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/typedRoutes.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/typedRoutes.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/typedRoutes.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/typedRoutes.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/typescript.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/typescript.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/typescript.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/typescript.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/urlImports.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/urlImports.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/urlImports.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/urlImports.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/useCache.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/useCache.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/useCache.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/useCache.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/useLightningcss.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/useLightningcss.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/useLightningcss.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/useLightningcss.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/viewTransition.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/viewTransition.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/viewTransition.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/viewTransition.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/webVitalsAttribution.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/webVitalsAttribution.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/webVitalsAttribution.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/webVitalsAttribution.mdx
diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/webpack.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/webpack.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/01-next-config-js/webpack.mdx
rename to docs/01-app/05-api-reference/05-config/01-next-config-js/webpack.mdx
diff --git a/docs/01-app/04-api-reference/05-config/02-typescript.mdx b/docs/01-app/05-api-reference/05-config/02-typescript.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/02-typescript.mdx
rename to docs/01-app/05-api-reference/05-config/02-typescript.mdx
diff --git a/docs/01-app/04-api-reference/05-config/03-eslint.mdx b/docs/01-app/05-api-reference/05-config/03-eslint.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/03-eslint.mdx
rename to docs/01-app/05-api-reference/05-config/03-eslint.mdx
diff --git a/docs/01-app/04-api-reference/05-config/index.mdx b/docs/01-app/05-api-reference/05-config/index.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/05-config/index.mdx
rename to docs/01-app/05-api-reference/05-config/index.mdx
diff --git a/docs/01-app/04-api-reference/06-cli/create-next-app.mdx b/docs/01-app/05-api-reference/06-cli/create-next-app.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/06-cli/create-next-app.mdx
rename to docs/01-app/05-api-reference/06-cli/create-next-app.mdx
diff --git a/docs/01-app/04-api-reference/06-cli/index.mdx b/docs/01-app/05-api-reference/06-cli/index.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/06-cli/index.mdx
rename to docs/01-app/05-api-reference/06-cli/index.mdx
diff --git a/docs/01-app/04-api-reference/06-cli/next.mdx b/docs/01-app/05-api-reference/06-cli/next.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/06-cli/next.mdx
rename to docs/01-app/05-api-reference/06-cli/next.mdx
diff --git a/docs/01-app/04-api-reference/07-edge.mdx b/docs/01-app/05-api-reference/07-edge.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/07-edge.mdx
rename to docs/01-app/05-api-reference/07-edge.mdx
diff --git a/docs/01-app/05-api-reference/08-turbopack.mdx b/docs/01-app/05-api-reference/08-turbopack.mdx
new file mode 100644
index 00000000..f765d8f2
--- /dev/null
+++ b/docs/01-app/05-api-reference/08-turbopack.mdx
@@ -0,0 +1,173 @@
+---
+title: 'Turbopack'
+description: 'Turbopackは、JavaScriptとTypeScriptに最適化されたインクリメンタルバンドラーで、Rustで書かれ、Next.jsに組み込まれています。'
+---
+
+{/* このドキュメントの内容は、app routerとpages routerの両方で共有されています。Pages Routerに特化した内容を追加するには、`<PagesOnly>Content</PagesOnly>`コンポーネントを使用できます。共有される内容はコンポーネントでラップしないでください。 */}
+
+Turbopackは、JavaScriptとTypeScriptに最適化された**インクリメンタルバンドラー**で、Rustで書かれ、**Next.js**に組み込まれています。Turbopackを使用することで、Pages RouterとApp Routerの両方で**非常に高速な**ローカル開発体験を得ることができます。
+
+## なぜTurbopackなのか？ {#why-turbopack}
+
+私たちはNext.jsのパフォーマンスを向上させるためにTurbopackを開発しました。以下の点を含みます：
+
+- **統一されたグラフ:** Next.jsは複数の出力環境（例：クライアントとサーバー）をサポートしています。複数のコンパイラを管理し、バンドルをつなぎ合わせるのは面倒です。Turbopackはすべての環境に対して**単一の統一されたグラフ**を使用します。
+- **バンドリング vs ネイティブESM:** 一部のツールは開発時にバンドリングをスキップし、ブラウザのネイティブESMに依存します。これは小規模なアプリには適していますが、大規模なアプリでは過剰なネットワークリクエストのために遅くなることがあります。Turbopackは開発時に**バンドル**しますが、大規模なアプリを高速に保つために最適化されています。
+- **インクリメンタル計算:** Turbopackは作業をコア間で並列化し、結果を関数レベルまで**キャッシュ**します。一度作業が完了すると、Turbopackはそれを繰り返しません。
+- **遅延バンドリング:** Turbopackは開発サーバーによって実際に要求されたものだけをバンドルします。この遅延アプローチにより、初期のコンパイル時間とメモリ使用量を削減できます。
+
+## はじめに {#getting-started}
+
+Next.jsプロジェクトでTurbopackを有効にするには、`package.json`ファイルの`dev`、`build`、`start`スクリプトに`--turbopack`フラグを追加します：
+
+```json title="package.json" highlight={3}
+{
+ "scripts": {
+ "dev": "next dev --turbopack",
+ "build": "next build --turbopack",
+ "start": "next start --turbopack"
+ }
+}
+```
+
+現在、`dev`用のTurbopackは安定していますが、`build`はアルファ版です。Turbopackが安定に近づくにつれて、プロダクションサポートに向けて積極的に取り組んでいます。
+
+## サポートされている機能 {#supported-features}
+
+Next.jsのTurbopackは、一般的なユースケースに対して**ゼロコンフィグレーション**です。以下は、標準でサポートされている機能の概要と、必要に応じてTurbopackをさらに設定する方法のいくつかの参考情報です。
+
+### 言語機能 {#language-features}
+
+| 機能 | ステータス | 備考 |
+| --------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **JavaScript & TypeScript** | **サポート** | 内部でSWCを使用しています。型チェックはTurbopackでは行われません（`tsc --watch`を実行するか、IDEに型チェックを依存してください）。 |
+| **ECMAScript (ESNext)** | **サポート** | Turbopackは最新のECMAScript機能をサポートしており、SWCのカバレッジに一致しています。 |
+| **CommonJS** | **サポート** | `require()`構文は標準で処理されます。 |
+| **ESM** | **サポート** | 静的および動的な`import`が完全にサポートされています。 |
+| **Babel** | 部分的にサポート外 | TurbopackにはデフォルトでBabelは含まれていません。ただし、[Turbopackの設定を通じて`babel-loader`を設定することができます](/docs/app/api-reference/config/next-config-js/turbopack#configuring-webpack-loaders)。 |
+
+### フレームワークとReactの機能 {#framework-and-react-features}
+
+| 機能 | ステータス | 備考 |
+| --------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------ |
+| **JSX / TSX** | **サポート** | SWCがJSX/TSXのコンパイルを処理します。 |
+| **Fast Refresh** | **サポート** | 設定は不要です。 |
+| **React Server Components (RSC)** | **サポート** | Next.js App Router用です。Turbopackは正しいサーバー/クライアントのバンドリングを保証します。 |
+| **root レイアウトの作成** | サポート外 | App Routerでのroot レイアウトの自動作成はサポートされていません。Turbopackは手動での作成を指示します。 |
+
+### CSSとスタイリング {#css-and-styling}
+
+| 機能 | ステータス | 備考 |
+| ------------------- | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **グローバルCSS** | **サポート** | `.css`ファイルをアプリケーションに直接インポートします。 |
+| **CSSモジュール** | **サポート** | `.module.css`ファイルはネイティブに動作します（Lightning CSS）。 |
+| **CSSネスティング** | **サポート** | Lightning CSSは[最新のCSSネスティング](https://lightningcss.dev/)をサポートしています。 |
+| **@import構文** | **サポート** | 複数のCSSファイルを組み合わせます。 |
+| **PostCSS** | **サポート** | Node.jsワーカープールで`postcss.config.js`を自動的に処理します。Tailwind、Autoprefixerなどに便利です。 |
+| **Sass / SCSS** | **サポート** (Next.js) | Next.jsでは、Sassは標準でサポートされています。将来的には、Turbopackのスタンドアロン使用にはローダー設定が必要になる可能性があります。 |
+| **Less** | プラグインを通じて計画中 | デフォルトではまだサポートされていません。カスタムローダーが安定したら、ローダー設定が必要になる可能性があります。 |
+| **Lightning CSS** | **使用中** | CSS変換を処理します。いくつかの低使用率のCSSモジュール機能（スタンドアロンの擬似クラスとしての`:local/:global`など）はまだサポートされていません。[詳細は以下を参照してください。](#unsupported-and-unplanned-features) |
+
+### アセット {#assets}
+
+| 機能 | ステータス | 備考 |
+| --------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------- |
+| **静的アセット** (画像、フォント) | **サポート** | `import img from './img.png'`のインポートは標準で動作します。Next.jsでは、`<Image />`コンポーネント用のオブジェクトを返します。 |
+| **JSONインポート** | **サポート** | `.json`からの名前付きまたはデフォルトのインポートがサポートされています。 |
+
+### モジュール解決 {#module-resolution}
+
+| 機能 | ステータス | 備考 |
+| ------------------ | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **パスエイリアス** | **サポート** | `tsconfig.json`の`paths`と`baseUrl`を読み取り、Next.jsの動作に一致します。 |
+| **手動エイリアス** | **サポート** | [`next.config.js`で`resolveAlias`を設定する](/docs/app/api-reference/config/next-config-js/turbopack#resolving-aliases)（`webpack.resolve.alias`に類似）。 |
+| **カスタム拡張子** | **サポート** | [`next.config.js`で`resolveExtensions`を設定する](/docs/app/api-reference/config/next-config-js/turbopack#resolving-custom-extensions)。 |
+| **AMD** | 部分的にサポート | 基本的な変換は動作しますが、高度なAMDの使用は制限されています。 |
+
+### パフォーマンスとFast Refresh {#performance-and-fast-refresh}
+
+| 機能 | ステータス | 備考 |
+| -------------------------------- | ------------ | --------------------------------------------------------------------------------------------------- |
+| **Fast Refresh** | **サポート** | JavaScript、TypeScript、CSSをフルリフレッシュなしで更新します。 |
+| **インクリメンタルバンドリング** | **サポート** | Turbopackは開発サーバーによって要求されたものだけを遅延的にビルドし、大規模なアプリを高速化します。 |
+
+## サポートされていない機能と計画されていない機能 {#unsupported-and-unplanned-features}
+
+一部の機能はまだ実装されていないか、計画されていません：
+
+- **レガシーCSSモジュール機能**
+ - スタンドアロンの`:local`および`:global`擬似クラス（関数バリアントの`:global(...)`のみがサポートされています）。
+ - `@value`ルール（CSS変数によって置き換えられました）。
+ - `:import`および`:export` ICSSルール。
+- **`next.config.js`での`webpack()`設定**
+ Turbopackはwebpackを置き換えるため、`webpack()`設定は認識されません。代わりに[`experimental.turbo`設定](/docs/app/api-reference/config/next-config-js/turbopack)を使用してください。
+- **AMP**
+ Next.jsでのTurbopackサポートは計画されていません。
+- **Yarn PnP**
+ Next.jsでのTurbopackサポートは計画されていません。
+- **`experimental.urlImports`**
+ Turbopackでは計画されていません。
+- **`experimental.esmExternals`**
+ 計画されていません。TurbopackはNext.jsのレガシー`esmExternals`設定をサポートしていません。
+- **一部のNext.js実験的フラグ**
+ - `experimental.typedRoutes`
+ - `experimental.nextScriptWorkers`
+ - `experimental.sri.algorithm`
+ - `experimental.fallbackNodePolyfills`
+ これらは将来的に実装する予定です。
+
+各機能フラグとそのステータスの詳細な内訳については、[Turbopack APIリファレンス](/docs/app/api-reference/config/next-config-js/turbopack)を参照してください。
+
+## 設定 {#configuration}
+
+Turbopackは、`next.config.js`（または`next.config.ts`）の`turbopack`キーの下で設定できます。設定オプションには以下が含まれます：
+
+- **`rules`**
+ ファイル変換のための追加の[webpackローダー](/docs/app/api-reference/config/next-config-js/turbopack#configuring-webpack-loaders)を定義します。
+- **`resolveAlias`**
+ 手動エイリアスを作成します（webpackの`resolve.alias`に類似）。
+- **`resolveExtensions`**
+ モジュール解決のためのファイル拡張子を変更または拡張します。
+- **`moduleIds`**
+ モジュールIDの生成方法を設定します（`'named'` vs `'deterministic'`）。
+- **`treeShaking`**
+ 開発および将来のプロダクションビルドでのツリーシェイキングを有効または無効にします。
+- **`memoryLimit`**
+ Turbopackのメモリ制限（バイト単位）を設定します。
+
+```js title="next.config.js"
+module.exports = {
+ turbopack: {
+ // 例：エイリアスとカスタムファイル拡張子の追加
+ resolveAlias: {
+ underscore: 'lodash',
+ },
+ resolveExtensions: ['.mdx', '.tsx', '.ts', '.jsx', '.js', '.json'],
+ },
+}
+```
+
+より詳細な設定例については、[Turbopack設定ドキュメント](/docs/app/api-reference/config/next-config-js/turbopack)を参照してください。
+
+## パフォーマンスデバッグのためのトレースファイルの生成 {#generating-trace-files-for-performance-debugging}
+
+パフォーマンスやメモリの問題が発生し、Next.jsチームがそれを診断するのを手助けしたい場合は、開発コマンドに`NEXT_TURBOPACK_TRACING=1`を追加してトレースファイルを生成できます：
+
+```bash
+NEXT_TURBOPACK_TRACING=1 next dev --turbopack
+```
+
+これにより、`.next/trace-turbopack`ファイルが生成されます。そのファイルを[Next.jsリポジトリ](https://github.com/vercel/next.js)でGitHubの問題を作成する際に含めてください。調査の手助けとなります。
+
+## まとめ {#summary}
+
+Turbopackは、特に大規模なアプリケーションに対して、ローカル開発とビルドを高速化するために設計された**Rustベース**の**インクリメンタル**バンドラーです。Next.jsに統合されており、ゼロコンフィグのCSS、React、TypeScriptサポートを提供します。
+
+Turbopackの改善とプロダクションビルドサポートの追加を続けていく中で、さらなる更新をお待ちください。その間に、`next dev --turbopack`を試してみて、フィードバックをお寄せください。
+
+## バージョン履歴 {#version-changes}
+
+| バージョン | 変更内容 |
+| ---------- | ------------------------ |
+| `v15.3.0` | `build`の実験的サポート |
+| `v15.0.0` | `dev`用のTurbopackが安定 |
diff --git a/docs/01-app/04-api-reference/index.mdx b/docs/01-app/05-api-reference/index.mdx
similarity index 100%
rename from docs/01-app/04-api-reference/index.mdx
rename to docs/01-app/05-api-reference/index.mdx
diff --git a/docs/index.mdx b/docs/index.mdx
index 13308bc1..1256f7fa 100644
--- a/docs/index.mdx
+++ b/docs/index.mdx
@@ -1,75 +1,62 @@
---
title: 'イントロダクション'
description: 'Next.js ドキュメントへようこそ。'
+related:
+ title: '次のステップ'
+ description: 'インストールガイドに従ってNext.jsを始めましょう。'
+ links:
+ - app/getting-started/installation
---
Next.js ドキュメントへようこそ！
-{/* NOTE: このinfoは手動で追加しています。自動翻訳等で更新され消えてしまった場合、必要に応じて再度追加しなおしてください */}
-:::info[はじめに]
-本サイトは [Next.js](https://nextjs.org) 公式ドキュメントの日本語翻訳サイトです。
-Next.js の公式 X アカウントにも[ポスト](https://twitter.com/nextjs/status/1746921179879735677)頂きました。
+## Next.jsとは？ {#what-is-next-js}
-現在、本サイトでは <NextJsReleaseVersionLink /> のアップデートに追従し、その内容を翻訳しています。
+Next.jsは、フルスタックWebアプリケーションを構築するためのReactフレームワークです。ユーザーインターフェースを構築するためにReactコンポーネントを使用し、Next.jsを追加機能や最適化のために利用します。
-<NextJsGitHubHashLink label="翻訳している公式ドキュメントの commit hash：" />
-:::
+Next.jsは、内部でバンドリングやコンパイルなど、Reactに必要なツールを抽象化し、自動的に設定します。これにより、設定に時間を費やすことなく、アプリケーションの構築に集中できます。
-## Next.js とは？{#what-is-next-js}
-
-Next.js は、フルスタック Web アプリケーションを構築するための React フレームワークです。ユーザーインターフェースを構築するために React コンポーネントを使用し、Next.js を使用して追加の機能や最適化を行います。
-
-Next.js は、内部でバンドルやコンパイルなどの React に必要なツールを抽象化し、自動的に設定します。これにより、設定に時間を費やす代わりに、アプリケーションの構築に集中できます。
-
-個人開発者でもチームの一員でも、Next.js はインタラクティブでダイナミック、そして高速な React アプリケーションの構築を支援します。
+個人の開発者であれ、大規模なチームの一員であれ、Next.jsはインタラクティブで動的、かつ高速なReactアプリケーションの構築をサポートします。
## 主な機能 {#main-features}
-Next.js の主な機能のいくつかは次のとおりです：
-
-| 機能 | 説明 |
-| --------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [ルーティング](/docs/app/building-your-application/routing) | layout、入れ子になったルーティング、ロード状態、エラーハンドリングなどをサポートする Server Components 上に構築されたファイルシステムベースのルーターです。 |
-| [レンダリング](/docs/app/building-your-application/rendering) | クライアントサイドとサーバーサイドのレンダリングを Client と Server Components で行います。静的および動的レンダリングによってサーバー上でさらに最適化されています。Edge と Node.js ランタイムでストリーミングされます。 |
-| [データ取得](/docs/app/building-your-application/data-fetching) | Server Components で async/await によるデータ取得の簡素化、リクエストメモ化、データキャッシュ、再検証のための拡張された `fetch` API を提供します。 |
-| [スタイリング](/docs/app/building-your-application/styling) | CSS Modules、Tailwind CSS、CSS-in-JS など、好みのスタイリング方法をサポートします |
-| [最適化](/docs/app/building-your-application/optimizing) | 画像、フォント、スクリプトの最適化を通じて、アプリケーションのコア Web バイタルとユーザーエクスペリエンスを向上させます。 |
-| [TypeScript](/docs/app/api-reference/config/typescript) | TypeScript のサポートの改善、より良い型チェックとより効率的なコンパイル、カスタム TypeScript プラグインと型チェッカーを備えています。 |
-
-## このドキュメントの使い方 {#how-to-use-these-docs}
-
-画面の左側には、ドキュメントのナビゲーションバーがあります。ドキュメントのページは順序よく整理されており、基本から高度な内容へと進むことができますので、アプリケーションを構築する際にはステップごとに進めることができます。しかし、任意の順序で読むことも、特定のユースケースに当てはまるページにスキップすることも可能です。
+Next.jsの主な機能には以下のものがあります：
-画面の右側には、ページ内のセクション間を簡単に移動できる目次があります。ページをすばやく見つける必要がある場合は、画面上部の検索バーまたは検索ショートカット（`Ctrl+K` または `Cmd+K`）を使用できます。
+| 機能 | 説明 |
+| ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| [ルーティング](/docs/app/building-your-application/routing) | レイアウト、ネストされたルーティング、ローディング状態、エラーハンドリングなどをサポートするServer Components上に構築されたファイルシステムベースのルーター。 |
+| [レンダリング](/docs/app/building-your-application/rendering) | Client ComponentsとServer Componentsを使用したクライアントサイドおよびサーバーサイドレンダリング。Next.jsによるサーバー上での静的および動的レンダリングでさらに最適化。EdgeとNode.jsランタイムでのストリーミング。 |
+| [データフェッチング](/docs/app/building-your-application/data-fetching) | Server Componentsでのasync/awaitを使用した簡素化されたデータフェッチング、およびリクエストメモ化、データキャッシュ、再検証のための拡張された`fetch` API。 |
+| [スタイリング](/docs/app/building-your-application/styling) | CSS Modules、Tailwind CSS、CSS-in-JSを含む、お好みのスタイリング方法をサポート |
+| [最適化](/docs/app/building-your-application/optimizing) | アプリケーションのCore Web Vitalsとユーザーエクスペリエンスを向上させるための画像、フォント、スクリプトの最適化。 |
+| [TypeScript](/docs/app/api-reference/config/typescript) | 型チェックの改善とより効率的なコンパイルを備えたTypeScriptのサポートの向上、カスタムTypeScriptプラグインと型チェッカーも提供。 |
-始めるには、[インストレーション](/docs/app/getting-started/installation)ガイドをチェックしてください。
+## ドキュメントの使い方 {#how-to-use-these-docs}
-## App Router と Pages Router {#app-router-vs-pages-router}
+画面の左側にはドキュメントのナビバーがあります。ドキュメントのページは基本から応用まで順序立てて整理されているので、アプリケーションを構築する際にステップバイステップで進めることができます。ただし、どの順序でも読めるようになっており、あなたのユースケースに適したページにスキップすることも可能です。
-{/* NOTE: このwarningは手動で追加しています。自動翻訳等で更新され消えてしまった場合、必要に応じて再度追加しなおしてください */}
-:::warning[ご注意ください]
+画面の右側には、ページ内のセクション間を簡単に移動できる目次があります。ページをすばやく見つける必要がある場合は、上部の検索バーや検索ショートカット（`Ctrl+K`または`Cmd+K`）を使用してください。
-現在、本サイトでは App Router に関するドキュメントのみ翻訳して公開しております。
-そのため、以下に記載のドロップダウンメニューは本サイトにはございません。
+始めるには、[インストール](/docs/app/getting-started/installation)ガイドをチェックしてください。
-:::
+## App RouterとPages Router {#app-router-vs-pages-router}
-Next.js には、App Router と Pages Router の2種類のルーターがあります。App Router は、Server Components やストリーミングなどの React の最新機能を使用できる新しいルーターです。Pages Router はオリジナルの Next.js ルーターで、サーバーレンダリングされた React アプリケーションを構築でき、古い Next.js アプリケーションに対するサポートを引き続き提供しています。
+Next.jsには、App RouterとPages Routerの2つの異なるルーターがあります。App Routerは、Server Componentsやストリーミングなど、Reactの最新機能を使用できる新しいルーターです。Pages Routerは、サーバーレンダリングされたReactアプリケーションを構築するための元々のNext.jsルーターで、古いNext.jsアプリケーションのために引き続きサポートされています。
-サイドバーの上部には、**App Router** と **Pages Router** の機能を切り替えるドロップダウンメニューが表示されています。各ディレクトリ固有の機能があるため、どのタブが選択されているかを把握することが重要です。
+サイドバーの上部には、**App Router**と**Pages Router**の機能を切り替えることができるドロップダウンメニューがあります。各ディレクトリに固有の機能があるため、どのタブが選択されているかを把握することが重要です。
-ページ上部のパンくずリストは、App Router ドキュメントか Pages Router ドキュメントを表示しているかどうかを示します。
+ページの上部にあるパンくずリストも、App Routerのドキュメントを見ているのか、Pages Routerのドキュメントを見ているのかを示します。
## 前提知識 {#pre-requisite-knowledge}
-私たちのドキュメントは初心者向けに設計されていますが、Next.js 機能に焦点を当て続けるために基準を設定する必要があります。新しい概念を導入する際には、関連するドキュメントへのリンクを必ず提供します。
+私たちのドキュメントは初心者に優しい設計になっていますが、Next.jsの機能に集中できるように基礎を確立する必要があります。新しい概念を紹介する際には、関連するドキュメントへのリンクを提供するようにします。
-私たちのドキュメントを最大限に活用するには、HTML、CSS、および React の基本的な理解を持っていることをお勧めします。React スキルを復習する必要がある場合は、基本を紹介する [React 基礎コース](https://nextjs.org/learn/react-foundations)を確認してください。その後、ダッシュボードアプリケーションを構築して Next.js をさらに詳しく学びます[build a dashboard application](https://nextjs.org/learn/dashboard-app)。
+ドキュメントを最大限に活用するには、HTML、CSS、Reactの基本的な理解が推奨されます。Reactのスキルを磨く必要がある場合は、[React Foundations Course](https://nextjs.org/learn/react-foundations)をチェックして、基礎を学んでください。その後、[ダッシュボードアプリケーションを構築する](https://nextjs.org/learn/dashboard-app)ことでNext.jsについてさらに学びましょう。
## アクセシビリティ {#accessibility}
-ドキュメントを読みながらスクリーンリーダーを使用する場合、最適なアクセシビリティを得るために Firefox と NVDA、または Safari と VoiceOver を使用することをお勧めします。
+ドキュメントを読む際にスクリーンリーダーを使用する場合、最適なアクセシビリティのためにFirefoxとNVDA、またはSafariとVoiceOverを使用することをお勧めします。
-## コミュニティに参加しよう {#join-our-community}
+## コミュニティに参加する {#join-our-community}
-Next.js に関連する質問があれば、[GitHub Discussions](https://github.com/vercel/next.js/discussions)、[Discord](https://discord.com/invite/bUG2bvbtHy)、[X (Twitter)](https://x.com/nextjs)、[Reddit](https://www.reddit.com/r/nextjs) で、私たちのコミュニティにいつでも聞いてください。
+Next.jsに関連する質問がある場合は、[GitHub Discussions](https://github.com/vercel/next.js/discussions)、[Discord](https://discord.com/invite/bUG2bvbtHy)、[X (Twitter)](https://x.com/nextjs)、[Reddit](https://www.reddit.com/r/nextjs)でコミュニティにいつでも質問できます。
diff --git a/kj-diff.json b/kj-diff.json
index 09f29f50..6cf79152 100644
--- a/kj-diff.json
+++ b/kj-diff.json
@@ -1,11 +1,164 @@
{
"submodule": "next.js",
"hash": {
- "previous": "c08d75d102da5b5a894330c7159120e8b0251768",
- "current": "f6557ffc0f85558c2db3a6c3cdc75f2ac3b3bb92"
+ "previous": "f6557ffc0f85558c2db3a6c3cdc75f2ac3b3bb92",
+ "current": "7e295075c7aa530d2cf357005769c452dabc422f"
},
"diffs": [
- "M\tdocs/01-app/04-api-reference/02-components/link.mdx",
- "A\tdocs/01-app/04-api-reference/04-functions/use-link-status.mdx"
+ "M\tdocs/01-app/01-getting-started/01-installation.mdx",
+ "M\tdocs/01-app/01-getting-started/02-project-structure.mdx",
+ "M\tdocs/01-app/01-getting-started/03-layouts-and-pages.mdx",
+ "M\tdocs/01-app/01-getting-started/04-images-and-fonts.mdx",
+ "M\tdocs/01-app/01-getting-started/05-css.mdx",
+ "M\tdocs/01-app/01-getting-started/06-fetching-data.mdx",
+ "M\tdocs/01-app/01-getting-started/07-updating-data.mdx",
+ "M\tdocs/01-app/01-getting-started/08-error-handling.mdx",
+ "M\tdocs/01-app/01-getting-started/10-metadata-and-og-images.mdx",
+ "M\tdocs/01-app/01-getting-started/12-upgrading.mdx",
+ "M\tdocs/01-app/03-building-your-application/01-routing/03-layouts-and-templates.mdx",
+ "M\tdocs/01-app/03-building-your-application/01-routing/08-route-groups.mdx",
+ "M\tdocs/01-app/03-building-your-application/06-optimizing/14-local-development.mdx",
+ "M\tdocs/01-app/03-building-your-application/07-configuring/05-mdx.mdx",
+ "M\tdocs/01-app/03-building-your-application/11-upgrading/06-from-create-react-app.mdx",
+ "D\tdocs/01-app/04-api-reference/01-directives/use-cache.mdx",
+ "D\tdocs/01-app/04-api-reference/04-functions/cacheLife.mdx",
+ "D\tdocs/01-app/04-api-reference/04-functions/use-link-status.mdx",
+ "D\tdocs/01-app/04-api-reference/05-config/01-next-config-js/turbo.mdx",
+ "D\tdocs/01-app/04-api-reference/08-turbopack.mdx",
+ "A\tdocs/01-app/04-deep-dive/index.mdx",
+ "R100\tdocs/01-app/04-api-reference/01-directives/index.mdx\tdocs/01-app/05-api-reference/01-directives/index.mdx",
+ "A\tdocs/01-app/05-api-reference/01-directives/use-cache.mdx",
+ "R100\tdocs/01-app/04-api-reference/01-directives/use-client.mdx\tdocs/01-app/05-api-reference/01-directives/use-client.mdx",
+ "R100\tdocs/01-app/04-api-reference/01-directives/use-server.mdx\tdocs/01-app/05-api-reference/01-directives/use-server.mdx",
+ "R100\tdocs/01-app/04-api-reference/02-components/font.mdx\tdocs/01-app/05-api-reference/02-components/font.mdx",
+ "R100\tdocs/01-app/04-api-reference/02-components/form.mdx\tdocs/01-app/05-api-reference/02-components/form.mdx",
+ "R100\tdocs/01-app/04-api-reference/02-components/image.mdx\tdocs/01-app/05-api-reference/02-components/image.mdx",
+ "R100\tdocs/01-app/04-api-reference/02-components/index.mdx\tdocs/01-app/05-api-reference/02-components/index.mdx",
+ "R100\tdocs/01-app/04-api-reference/02-components/link.mdx\tdocs/01-app/05-api-reference/02-components/link.mdx",
+ "R100\tdocs/01-app/04-api-reference/02-components/script.mdx\tdocs/01-app/05-api-reference/02-components/script.mdx",
+ "R100\tdocs/01-app/04-api-reference/03-file-conventions/01-metadata/app-icons.mdx\tdocs/01-app/05-api-reference/03-file-conventions/01-metadata/app-icons.mdx",
+ "R100\tdocs/01-app/04-api-reference/03-file-conventions/01-metadata/index.mdx\tdocs/01-app/05-api-reference/03-file-conventions/01-metadata/index.mdx",
+ "R100\tdocs/01-app/04-api-reference/03-file-conventions/01-metadata/manifest.mdx\tdocs/01-app/05-api-reference/03-file-conventions/01-metadata/manifest.mdx",
+ "R100\tdocs/01-app/04-api-reference/03-file-conventions/01-metadata/opengraph-image.mdx\tdocs/01-app/05-api-reference/03-file-conventions/01-metadata/opengraph-image.mdx",
+ "R100\tdocs/01-app/04-api-reference/03-file-conventions/01-metadata/robots.mdx\tdocs/01-app/05-api-reference/03-file-conventions/01-metadata/robots.mdx",
+ "R100\tdocs/01-app/04-api-reference/03-file-conventions/01-metadata/sitemap.mdx\tdocs/01-app/05-api-reference/03-file-conventions/01-metadata/sitemap.mdx",
+ "R100\tdocs/01-app/04-api-reference/03-file-conventions/default.mdx\tdocs/01-app/05-api-reference/03-file-conventions/default.mdx",
+ "R100\tdocs/01-app/04-api-reference/03-file-conventions/error.mdx\tdocs/01-app/05-api-reference/03-file-conventions/error.mdx",
+ "R100\tdocs/01-app/04-api-reference/03-file-conventions/forbidden.mdx\tdocs/01-app/05-api-reference/03-file-conventions/forbidden.mdx",
+ "R100\tdocs/01-app/04-api-reference/03-file-conventions/index.mdx\tdocs/01-app/05-api-reference/03-file-conventions/index.mdx",
+ "R100\tdocs/01-app/04-api-reference/03-file-conventions/instrumentation-client.mdx\tdocs/01-app/05-api-reference/03-file-conventions/instrumentation-client.mdx",
+ "R100\tdocs/01-app/04-api-reference/03-file-conventions/instrumentation.mdx\tdocs/01-app/05-api-reference/03-file-conventions/instrumentation.mdx",
+ "R100\tdocs/01-app/04-api-reference/03-file-conventions/layout.mdx\tdocs/01-app/05-api-reference/03-file-conventions/layout.mdx",
+ "R100\tdocs/01-app/04-api-reference/03-file-conventions/loading.mdx\tdocs/01-app/05-api-reference/03-file-conventions/loading.mdx",
+ "R100\tdocs/01-app/04-api-reference/03-file-conventions/mdx-components.mdx\tdocs/01-app/05-api-reference/03-file-conventions/mdx-components.mdx",
+ "R100\tdocs/01-app/04-api-reference/03-file-conventions/middleware.mdx\tdocs/01-app/05-api-reference/03-file-conventions/middleware.mdx",
+ "R100\tdocs/01-app/04-api-reference/03-file-conventions/not-found.mdx\tdocs/01-app/05-api-reference/03-file-conventions/not-found.mdx",
+ "R100\tdocs/01-app/04-api-reference/03-file-conventions/page.mdx\tdocs/01-app/05-api-reference/03-file-conventions/page.mdx",
+ "R100\tdocs/01-app/04-api-reference/03-file-conventions/route-segment-config.mdx\tdocs/01-app/05-api-reference/03-file-conventions/route-segment-config.mdx",
+ "R100\tdocs/01-app/04-api-reference/03-file-conventions/route.mdx\tdocs/01-app/05-api-reference/03-file-conventions/route.mdx",
+ "R100\tdocs/01-app/04-api-reference/03-file-conventions/template.mdx\tdocs/01-app/05-api-reference/03-file-conventions/template.mdx",
+ "R100\tdocs/01-app/04-api-reference/03-file-conventions/unauthorized.mdx\tdocs/01-app/05-api-reference/03-file-conventions/unauthorized.mdx",
+ "R100\tdocs/01-app/04-api-reference/04-functions/after.mdx\tdocs/01-app/05-api-reference/04-functions/after.mdx",
+ "A\tdocs/01-app/05-api-reference/04-functions/cacheLife.mdx",
+ "R100\tdocs/01-app/04-api-reference/04-functions/cacheTag.mdx\tdocs/01-app/05-api-reference/04-functions/cacheTag.mdx",
+ "R100\tdocs/01-app/04-api-reference/04-functions/connection.mdx\tdocs/01-app/05-api-reference/04-functions/connection.mdx",
+ "R100\tdocs/01-app/04-api-reference/04-functions/cookies.mdx\tdocs/01-app/05-api-reference/04-functions/cookies.mdx",
+ "R100\tdocs/01-app/04-api-reference/04-functions/draft-mode.mdx\tdocs/01-app/05-api-reference/04-functions/draft-mode.mdx",
+ "R100\tdocs/01-app/04-api-reference/04-functions/fetch.mdx\tdocs/01-app/05-api-reference/04-functions/fetch.mdx",
+ "R100\tdocs/01-app/04-api-reference/04-functions/forbidden.mdx\tdocs/01-app/05-api-reference/04-functions/forbidden.mdx",
+ "R100\tdocs/01-app/04-api-reference/04-functions/generate-image-metadata.mdx\tdocs/01-app/05-api-reference/04-functions/generate-image-metadata.mdx",
+ "R100\tdocs/01-app/04-api-reference/04-functions/generate-metadata.mdx\tdocs/01-app/05-api-reference/04-functions/generate-metadata.mdx",
+ "R100\tdocs/01-app/04-api-reference/04-functions/generate-sitemaps.mdx\tdocs/01-app/05-api-reference/04-functions/generate-sitemaps.mdx",
+ "R100\tdocs/01-app/04-api-reference/04-functions/generate-static-params.mdx\tdocs/01-app/05-api-reference/04-functions/generate-static-params.mdx",
+ "R100\tdocs/01-app/04-api-reference/04-functions/generate-viewport.mdx\tdocs/01-app/05-api-reference/04-functions/generate-viewport.mdx",
+ "R100\tdocs/01-app/04-api-reference/04-functions/headers.mdx\tdocs/01-app/05-api-reference/04-functions/headers.mdx",
+ "R100\tdocs/01-app/04-api-reference/04-functions/image-response.mdx\tdocs/01-app/05-api-reference/04-functions/image-response.mdx",
+ "R100\tdocs/01-app/04-api-reference/04-functions/index.mdx\tdocs/01-app/05-api-reference/04-functions/index.mdx",
+ "R100\tdocs/01-app/04-api-reference/04-functions/next-request.mdx\tdocs/01-app/05-api-reference/04-functions/next-request.mdx",
+ "R100\tdocs/01-app/04-api-reference/04-functions/next-response.mdx\tdocs/01-app/05-api-reference/04-functions/next-response.mdx",
+ "R100\tdocs/01-app/04-api-reference/04-functions/not-found.mdx\tdocs/01-app/05-api-reference/04-functions/not-found.mdx",
+ "R100\tdocs/01-app/04-api-reference/04-functions/permanentRedirect.mdx\tdocs/01-app/05-api-reference/04-functions/permanentRedirect.mdx",
+ "R100\tdocs/01-app/04-api-reference/04-functions/redirect.mdx\tdocs/01-app/05-api-reference/04-functions/redirect.mdx",
+ "R100\tdocs/01-app/04-api-reference/04-functions/revalidatePath.mdx\tdocs/01-app/05-api-reference/04-functions/revalidatePath.mdx",
+ "R100\tdocs/01-app/04-api-reference/04-functions/revalidateTag.mdx\tdocs/01-app/05-api-reference/04-functions/revalidateTag.mdx",
+ "R100\tdocs/01-app/04-api-reference/04-functions/unauthorized.mdx\tdocs/01-app/05-api-reference/04-functions/unauthorized.mdx",
+ "R100\tdocs/01-app/04-api-reference/04-functions/unstable_cache.mdx\tdocs/01-app/05-api-reference/04-functions/unstable_cache.mdx",
+ "R100\tdocs/01-app/04-api-reference/04-functions/unstable_noStore.mdx\tdocs/01-app/05-api-reference/04-functions/unstable_noStore.mdx",
+ "R100\tdocs/01-app/04-api-reference/04-functions/unstable_rethrow.mdx\tdocs/01-app/05-api-reference/04-functions/unstable_rethrow.mdx",
+ "A\tdocs/01-app/05-api-reference/04-functions/use-link-status.mdx",
+ "R100\tdocs/01-app/04-api-reference/04-functions/use-params.mdx\tdocs/01-app/05-api-reference/04-functions/use-params.mdx",
+ "R100\tdocs/01-app/04-api-reference/04-functions/use-pathname.mdx\tdocs/01-app/05-api-reference/04-functions/use-pathname.mdx",
+ "R100\tdocs/01-app/04-api-reference/04-functions/use-report-web-vitals.mdx\tdocs/01-app/05-api-reference/04-functions/use-report-web-vitals.mdx",
+ "R100\tdocs/01-app/04-api-reference/04-functions/use-router.mdx\tdocs/01-app/05-api-reference/04-functions/use-router.mdx",
+ "R100\tdocs/01-app/04-api-reference/04-functions/use-search-params.mdx\tdocs/01-app/05-api-reference/04-functions/use-search-params.mdx",
+ "R100\tdocs/01-app/04-api-reference/04-functions/use-selected-layout-segment.mdx\tdocs/01-app/05-api-reference/04-functions/use-selected-layout-segment.mdx",
+ "R100\tdocs/01-app/04-api-reference/04-functions/use-selected-layout-segments.mdx\tdocs/01-app/05-api-reference/04-functions/use-selected-layout-segments.mdx",
+ "R100\tdocs/01-app/04-api-reference/04-functions/userAgent.mdx\tdocs/01-app/05-api-reference/04-functions/userAgent.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/allowedDevOrigins.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/allowedDevOrigins.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/appDir.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/appDir.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/assetPrefix.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/assetPrefix.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/authInterrupts.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/authInterrupts.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/basePath.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/basePath.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/cacheLife.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/cacheLife.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/compress.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/compress.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/crossOrigin.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/crossOrigin.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/cssChunking.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/cssChunking.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/devIndicators.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/devIndicators.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/distDir.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/distDir.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/dynamicIO.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/dynamicIO.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/env.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/env.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/eslint.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/eslint.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/expireTime.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/expireTime.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/exportPathMap.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/exportPathMap.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/generateBuildId.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/generateBuildId.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/generateEtags.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/generateEtags.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/headers.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/headers.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/htmlLimitedBots.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/htmlLimitedBots.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/httpAgentOptions.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/httpAgentOptions.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/images.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/images.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/incrementalCacheHandlerPath.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/incrementalCacheHandlerPath.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/index.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/index.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/inlineCss.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/inlineCss.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/logging.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/logging.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/mdxRs.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/mdxRs.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/onDemandEntries.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/onDemandEntries.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/optimizePackageImports.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/optimizePackageImports.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/output.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/output.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/pageExtensions.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/pageExtensions.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/poweredByHeader.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/poweredByHeader.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/ppr.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/ppr.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/productionBrowserSourceMaps.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/productionBrowserSourceMaps.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/reactCompiler.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/reactCompiler.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/reactMaxHeadersLength.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/reactMaxHeadersLength.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/reactStrictMode.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/reactStrictMode.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/redirects.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/redirects.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/rewrites.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/rewrites.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/sassOptions.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/sassOptions.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/serverActions.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/serverActions.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/serverComponentsHmrCache.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/serverComponentsHmrCache.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/serverExternalPackages.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/serverExternalPackages.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/staleTimes.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/staleTimes.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/staticGeneration.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/staticGeneration.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/trailingSlash.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/trailingSlash.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/transpilePackages.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/transpilePackages.mdx",
+ "A\tdocs/01-app/05-api-reference/05-config/01-next-config-js/turbopack.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/typedRoutes.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/typedRoutes.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/typescript.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/typescript.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/urlImports.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/urlImports.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/useCache.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/useCache.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/useLightningcss.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/useLightningcss.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/viewTransition.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/viewTransition.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/webVitalsAttribution.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/webVitalsAttribution.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/webpack.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/webpack.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/02-typescript.mdx\tdocs/01-app/05-api-reference/05-config/02-typescript.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/03-eslint.mdx\tdocs/01-app/05-api-reference/05-config/03-eslint.mdx",
+ "R100\tdocs/01-app/04-api-reference/05-config/index.mdx\tdocs/01-app/05-api-reference/05-config/index.mdx",
+ "R100\tdocs/01-app/04-api-reference/06-cli/create-next-app.mdx\tdocs/01-app/05-api-reference/06-cli/create-next-app.mdx",
+ "R100\tdocs/01-app/04-api-reference/06-cli/index.mdx\tdocs/01-app/05-api-reference/06-cli/index.mdx",
+ "R100\tdocs/01-app/04-api-reference/06-cli/next.mdx\tdocs/01-app/05-api-reference/06-cli/next.mdx",
+ "R100\tdocs/01-app/04-api-reference/07-edge.mdx\tdocs/01-app/05-api-reference/07-edge.mdx",
+ "A\tdocs/01-app/05-api-reference/08-turbopack.mdx",
+ "R100\tdocs/01-app/04-api-reference/index.mdx\tdocs/01-app/05-api-reference/index.mdx",
+ "M\tdocs/index.mdx"
]
}
diff --git a/next.js b/next.js
index f6557ffc..7e295075 160000
--- a/next.js
+++ b/next.js
@@ -1 +1 @@
-Subproject commit f6557ffc0f85558c2db3a6c3cdc75f2ac3b3bb92
+Subproject commit 7e295075c7aa530d2cf357005769c452dabc422f
diff --git a/static/img/docs/dark/blog-nested-route.avif b/static/img/docs/dark/blog-nested-route.avif
index 81f9f7d1..b4802fc5 100644
Binary files a/static/img/docs/dark/blog-nested-route.avif and b/static/img/docs/dark/blog-nested-route.avif differ
diff --git a/static/img/docs/dark/blog-post-nested-route.avif b/static/img/docs/dark/blog-post-nested-route.avif
index 1365eabd..73b10669 100644
Binary files a/static/img/docs/dark/blog-post-nested-route.avif and b/static/img/docs/dark/blog-post-nested-route.avif differ
diff --git a/static/img/docs/dark/layout-special-file.avif b/static/img/docs/dark/layout-special-file.avif
index 9dffa701..847480aa 100644
Binary files a/static/img/docs/dark/layout-special-file.avif and b/static/img/docs/dark/layout-special-file.avif differ
diff --git a/static/img/docs/dark/nested-layouts.avif b/static/img/docs/dark/nested-layouts.avif
index f4bc6af6..f06bdfb6 100644
Binary files a/static/img/docs/dark/nested-layouts.avif and b/static/img/docs/dark/nested-layouts.avif differ
diff --git a/static/img/docs/dark/page-special-file.avif b/static/img/docs/dark/page-special-file.avif
index eee51539..d646ee73 100644
Binary files a/static/img/docs/dark/page-special-file.avif and b/static/img/docs/dark/page-special-file.avif differ
diff --git a/static/img/docs/dark/public-folder.avif b/static/img/docs/dark/public-folder.avif
index 69c0362c..39de94e6 100644
Binary files a/static/img/docs/dark/public-folder.avif and b/static/img/docs/dark/public-folder.avif differ
diff --git a/static/img/docs/dark/route-group-loading.avif b/static/img/docs/dark/route-group-loading.avif
index ef79af99..5d71be38 100644
Binary files a/static/img/docs/dark/route-group-loading.avif and b/static/img/docs/dark/route-group-loading.avif differ
diff --git a/static/img/docs/dark/route-group-multiple-layouts.avif b/static/img/docs/dark/route-group-multiple-layouts.avif
index 86921aa2..7295b40a 100644
Binary files a/static/img/docs/dark/route-group-multiple-layouts.avif and b/static/img/docs/dark/route-group-multiple-layouts.avif differ
diff --git a/static/img/docs/dark/route-group-multiple-root-layouts.avif b/static/img/docs/dark/route-group-multiple-root-layouts.avif
index b2107af7..9e532088 100644
Binary files a/static/img/docs/dark/route-group-multiple-root-layouts.avif and b/static/img/docs/dark/route-group-multiple-root-layouts.avif differ
diff --git a/static/img/docs/dark/route-group-opt-in-layouts.avif b/static/img/docs/dark/route-group-opt-in-layouts.avif
index adfc60f5..0b48ed44 100644
Binary files a/static/img/docs/dark/route-group-opt-in-layouts.avif and b/static/img/docs/dark/route-group-opt-in-layouts.avif differ
diff --git a/static/img/docs/dark/route-group-organisation.avif b/static/img/docs/dark/route-group-organisation.avif
index 9cdb9cc0..fb8392dd 100644
Binary files a/static/img/docs/dark/route-group-organisation.avif and b/static/img/docs/dark/route-group-organisation.avif differ
diff --git a/static/img/docs/light/blog-nested-route.avif b/static/img/docs/light/blog-nested-route.avif
index 477f25af..2c432ea1 100644
Binary files a/static/img/docs/light/blog-nested-route.avif and b/static/img/docs/light/blog-nested-route.avif differ
diff --git a/static/img/docs/light/blog-post-nested-route.avif b/static/img/docs/light/blog-post-nested-route.avif
index c7111fb1..5d0e5ff6 100644
Binary files a/static/img/docs/light/blog-post-nested-route.avif and b/static/img/docs/light/blog-post-nested-route.avif differ
diff --git a/static/img/docs/light/layout-special-file.avif b/static/img/docs/light/layout-special-file.avif
index 8719f723..a530b1fa 100644
Binary files a/static/img/docs/light/layout-special-file.avif and b/static/img/docs/light/layout-special-file.avif differ
diff --git a/static/img/docs/light/nested-layouts.avif b/static/img/docs/light/nested-layouts.avif
index ab17babe..1dd2df8c 100644
Binary files a/static/img/docs/light/nested-layouts.avif and b/static/img/docs/light/nested-layouts.avif differ
diff --git a/static/img/docs/light/page-special-file.avif b/static/img/docs/light/page-special-file.avif
index 494b12d6..2524f07d 100644
Binary files a/static/img/docs/light/page-special-file.avif and b/static/img/docs/light/page-special-file.avif differ
diff --git a/static/img/docs/light/public-folder.avif b/static/img/docs/light/public-folder.avif
index e4156adf..24f6c4b8 100644
Binary files a/static/img/docs/light/public-folder.avif and b/static/img/docs/light/public-folder.avif differ
diff --git a/static/img/docs/light/route-group-loading.avif b/static/img/docs/light/route-group-loading.avif
index 12164c22..0862c263 100644
Binary files a/static/img/docs/light/route-group-loading.avif and b/static/img/docs/light/route-group-loading.avif differ
diff --git a/static/img/docs/light/route-group-multiple-layouts.avif b/static/img/docs/light/route-group-multiple-layouts.avif
index 8177209e..e73634ea 100644
Binary files a/static/img/docs/light/route-group-multiple-layouts.avif and b/static/img/docs/light/route-group-multiple-layouts.avif differ
diff --git a/static/img/docs/light/route-group-multiple-root-layouts.avif b/static/img/docs/light/route-group-multiple-root-layouts.avif
index 27fc04fb..593f54b4 100644
Binary files a/static/img/docs/light/route-group-multiple-root-layouts.avif and b/static/img/docs/light/route-group-multiple-root-layouts.avif differ
diff --git a/static/img/docs/light/route-group-opt-in-layouts.avif b/static/img/docs/light/route-group-opt-in-layouts.avif
index 5b8859cf..2a2ff9a6 100644
Binary files a/static/img/docs/light/route-group-opt-in-layouts.avif and b/static/img/docs/light/route-group-opt-in-layouts.avif differ
diff --git a/static/img/docs/light/route-group-organisation.avif b/static/img/docs/light/route-group-organisation.avif
index 0d64742b..3e3bc672 100644
Binary files a/static/img/docs/light/route-group-organisation.avif and b/static/img/docs/light/route-group-organisation.avif differ