diff --git a/docs/01-app/01-getting-started/01-installation.mdx b/docs/01-app/01-getting-started/01-installation.mdx index c977dbf1..11cbeed7 100644 --- a/docs/01-app/01-getting-started/01-installation.mdx +++ b/docs/01-app/01-getting-started/01-installation.mdx @@ -1,19 +1,21 @@ --- -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` コンポーネントを使用できます。共有コンテンツはコンポーネントでラップしないでください。 */} +{/* このドキュメントの内容は、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 @@ -33,7 +35,7 @@ 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} @@ -43,7 +45,7 @@ What import alias would you like configured? @/* 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} - -Next.js はファイルシステムルーティングを使用しているため、アプリケーション内のルートはファイルの構造によって決まります。 +### `app` ディレクトリの作成 {#create-the-app-directory} -`app` フォルダーを作成し、`layout.tsx` と `page.tsx` ファイルを追加します。これらはユーザーがアプリケーションの root (`/`) を訪れたときにレンダリングされます。 +Next.js はファイルシステムルーティングを使用しており、アプリケーション内のルートはファイルの構造によって決まります。 -App フォルダ構造 - -`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 (`/`) を訪れたときにレンダリングされます。 + +App Folder Structure + > **Good to know**: > -> - `layout.tsx` を作成するのを忘れた場合、`next dev` で開発サーバーを実行するときに Next.js が自動的にこのファイルを作成します。 +> - root レイアウトの作成を忘れた場合、Next.js は `next dev` で開発サーバーを実行するときに自動的にこのファイルを作成します。 > - プロジェクトの root に [`src` ディレクトリ](/docs/app/building-your-application/configuring/src-directory) を使用して、アプリケーションのコードを設定ファイルから分離することができます。 -### `pages` ディレクトリを作成する {#create-the-pages-directory} +### `pages` ディレクトリの作成 {#create-the-pages-directory} -Next.js はファイルシステムルーティングを使用しているため、アプリケーション内のルートはファイルの構造によって決まります。 +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,27 +245,54 @@ 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 Profile +} +``` + + + + +```jsx title="app/page.js" highlight={4} switcher +import Image from 'next/image' + +export default function Page() { + return Profile +} +``` -プロジェクトの 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 でプラグインを有効にするには： @@ -272,24 +301,22 @@ VS Code でプラグインを有効にするには： 3. 「Use Workspace Version」を選択 TypeScript コマンドパレット -これで、ファイルを編集するときにカスタムプラグインが有効になります。`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,7 +326,7 @@ Next.js には組み込みの ESLint があり、新しいプロジェクトを } ``` -次に、`npm run lint` を実行すると、インストールと設定プロセスが案内されます。 +次に、`npm run lint` を実行すると、インストールと設定のプロセスが案内されます。 ```bash title="Terminal" npm run lint @@ -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" { @@ -345,9 +374,9 @@ import { Button } from '@/components/button' } ``` -`baseUrl` パスの設定に加えて、`"paths"` オプションを使用してモジュールパスを `"alias"` することができます。 +`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..424a444f 100644 --- a/docs/01-app/01-getting-started/02-project-structure.mdx +++ b/docs/01-app/01-getting-started/02-project-structure.mdx @@ -1,16 +1,16 @@ --- -title: 'プロジェクトの構造と組織化' +title: 'プロジェクト構造と組織化' nav_title: 'プロジェクト構造' -description: 'Next.jsにおけるフォルダとファイルの規約の概要と、プロジェクトの組織化方法について。' +description: 'Next.jsにおけるフォルダーとファイルの規約の概要、およびプロジェクトの組織化方法について説明します。' --- -このページでは、Next.jsにおけるフォルダとファイルの規約の概要と、プロジェクトを組織化するためのヒントを提供します。 +このページでは、Next.jsにおける**すべての**フォルダーとファイルの規約の概要と、プロジェクトを組織化するための推奨事項を提供します。 -## フォルダとファイルの規約 {#folder-and-file-conventions} +## フォルダーとファイルの規約 {#folder-and-file-conventions} -### トップレベルフォルダ {#top-level-folders} +### トップレベルフォルダー {#top-level-folders} -トップレベルフォルダは、アプリケーションのコードと静的アセットを整理するために使用されます。 +トップレベルフォルダーは、アプリケーションのコードと静的アセットを整理するために使用されます。 ルートセグメントからパスセグメントへの変換 -| | | -| --------------------------------------------------------------------------------- | ------------------------------------------ | -| [`app`](/docs/app/building-your-application/routing) | App Router | -| [`pages`](https://nextjs.org/docs/canary/pages/building-your-application/routing) | Pages Router | -| [`public`](/docs/app/building-your-application/optimizing/static-assets) | 提供される静的アセット | -| [`src`](/docs/app/building-your-application/configuring/src-directory) | オプションのアプリケーションソースフォルダ | +| | | +| --------------------------------------------------------------------------------- | -------------------------------------------- | +| [`app`](/docs/app/building-your-application/routing) | App Router | +| [`pages`](https://nextjs.org/docs/canary/pages/building-your-application/routing) | Pages Router | +| [`public`](/docs/app/building-your-application/optimizing/static-assets) | 提供される静的アセット | +| [`src`](/docs/app/building-your-application/configuring/src-directory) | オプションのアプリケーションソースフォルダー | ### トップレベルファイル {#top-level-files} @@ -43,8 +43,8 @@ description: 'Next.jsにおけるフォルダとファイルの規約の概要 | [`.env.production`](/docs/app/building-your-application/configuring/environment-variables) | 本番環境変数 | | [`.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宣言ファイル | +| `.gitignore` | 無視するGitファイルとフォルダー | +| `next-env.d.ts` | Next.js用のTypeScript宣言ファイル | | `tsconfig.json` | TypeScriptの設定ファイル | | `jsconfig.json` | JavaScriptの設定ファイル | @@ -57,7 +57,7 @@ description: 'Next.jsにおけるフォルダとファイルの規約の概要 | [`layout`](/docs/app/api-reference/file-conventions/layout) | `.js` `.jsx` `.tsx` | レイアウト | | [`page`](/docs/app/api-reference/file-conventions/page) | `.js` `.jsx` `.tsx` | ページ | | [`loading`](/docs/app/api-reference/file-conventions/loading) | `.js` `.jsx` `.tsx` | ローディングUI | -| [`not-found`](/docs/app/api-reference/file-conventions/not-found) | `.js` `.jsx` `.tsx` | 見つからないUI | +| [`not-found`](/docs/app/api-reference/file-conventions/not-found) | `.js` `.jsx` `.tsx` | Not found UI | | [`error`](/docs/app/api-reference/file-conventions/error) | `.js` `.jsx` `.tsx` | エラーUI | | [`global-error`](/docs/app/api-reference/file-conventions/error#global-error) | `.js` `.jsx` `.tsx` | グローバルエラーUI | | [`route`](/docs/app/api-reference/file-conventions/route) | `.js` `.ts` | APIエンドポイント | @@ -77,14 +77,14 @@ description: 'Next.jsにおけるフォルダとファイルの規約の概要 | --------------------------------------------------------------------------------------------------------- | ------------------------------------------ | | [`[folder]`](/docs/app/building-your-application/routing/dynamic-routes#convention) | 動的ルートセグメント | | [`[...folder]`](/docs/app/building-your-application/routing/dynamic-routes#catch-all-segments) | キャッチオールルートセグメント | -| [`[[...folder]]`](/docs/app/building-your-application/routing/dynamic-routes#optional-catch-all-segments) | オプションのキャッチオールルートセグメント | +| [`[[...folder]]`](/docs/app/building-your-application/routing/dynamic-routes#optional-catch-all-segments) | オプショナルキャッチオールルートセグメント | -### ルートグループとプライベートフォルダ {#route-groups-and-private-folders} +### ルートグループとプライベートフォルダー {#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} @@ -144,7 +144,7 @@ description: 'Next.jsにおけるフォルダとファイルの規約の概要 | | | | | ----------------------------------------------------------------------------------------------------------------------- | ------------------- | ------------------ | -| **フォルダの規約** | | | +| **フォルダーの規約** | | | | [`index`](https://nextjs.org/docs/canary/pages/building-your-application/routing/pages-and-layouts#index-routes) | `.js` `.jsx` `.tsx` | ホームページ | | [`folder/index`](https://nextjs.org/docs/canary/pages/building-your-application/routing/pages-and-layouts#index-routes) | `.js` `.jsx` `.tsx` | ネストされたページ | | **ファイルの規約** | | | @@ -155,22 +155,26 @@ description: 'Next.jsにおけるフォルダとファイルの規約の概要 | | | | | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------- | ------------------------------------------ | -| **フォルダの規約** | | | +| **フォルダーの規約** | | | | [`[folder]/index`](https://nextjs.org/docs/canary/pages/building-your-application/routing/dynamic-routes) | `.js` `.jsx` `.tsx` | 動的ルートセグメント | | [`[...folder]/index`](https://nextjs.org/docs/canary/pages/building-your-application/routing/dynamic-routes#catch-all-segments) | `.js` `.jsx` `.tsx` | キャッチオールルートセグメント | -| [`[[...folder]]/index`](https://nextjs.org/docs/canary/pages/building-your-application/routing/dynamic-routes#optional-catch-all-segments) | `.js` `.jsx` `.tsx` | オプションのキャッチオールルートセグメント | +| [`[[...folder]]/index`](https://nextjs.org/docs/canary/pages/building-your-application/routing/dynamic-routes#optional-catch-all-segments) | `.js` `.jsx` `.tsx` | オプショナルキャッチオールルートセグメント | | **ファイルの規約** | | | | [`[file]`](https://nextjs.org/docs/canary/pages/building-your-application/routing/dynamic-routes) | `.js` `.jsx` `.tsx` | 動的ルートセグメント | | [`[...file]`](https://nextjs.org/docs/canary/pages/building-your-application/routing/dynamic-routes#catch-all-segments) | `.js` `.jsx` `.tsx` | キャッチオールルートセグメント | -| [`[[...file]]`](https://nextjs.org/docs/canary/pages/building-your-application/routing/dynamic-routes#optional-catch-all-segments) | `.js` `.jsx` `.tsx` | オプションのキャッチオールルートセグメント | +| [`[[...file]]`](https://nextjs.org/docs/canary/pages/building-your-application/routing/dynamic-routes#optional-catch-all-segments) | `.js` `.jsx` `.tsx` | オプショナルキャッチオールルートセグメント | -## コンポーネントの階層 {#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パスの対応するセグメントにマッピングされるルートセグメントを表します。 +`app`ディレクトリでは、ネストされたフォルダーがルート構造を定義します。各フォルダーは、URLパスの対応するセグメントにマッピングされるルートセグメントを表します。 -しかし、ルート構造がフォルダを通じて定義されているにもかかわらず、`page.js`または`route.js`ファイルがルートセグメントに追加されるまで、ルートは**公開されません**。 +ただし、ルート構造がフォルダーを通じて定義されていても、`page.js`または`route.js`ファイルがルートセグメントに追加されるまで、ルートは**公開アクセス可能**ではありません。 ルートセグメントにpage.jsまたはroute.jsファイルが追加されるまでルートが公開されないことを示す図。 -そして、ルートが公開されるときでも、クライアントに送信されるのは`page.js`または`route.js`によって返される**コンテンツのみ**です。 +そして、ルートが公開アクセス可能になった場合でも、クライアントに送信されるのは`page.js`または`route.js`によって返される**コンテンツのみ**です。 page.jsとroute.jsファイルがルートを公開可能にする方法を示す図。 -これは、`app`ディレクトリ内のルートセグメント内に**安全にプロジェクトファイルを配置**でき、誤ってルーティングされることがないことを意味します。 +これは、`app`ディレクトリ内のルートセグメント内に**プロジェクトファイル**を**安全にコロケーション**でき、誤ってルート化されることがないことを意味します。 セグメントにpage.jsまたはroute.jsファイルが含まれていても、配置されたプロジェクトファイルがルーティングされないことを示す図。 -> **Good to know**: -> -> - プロジェクトファイルを`app`に配置することはできますが、必ずしもそうする必要はありません。必要に応じて、[それらを`app`ディレクトリの外に保持する](#store-project-files-outside-of-app)こともできます。 +> **Good to know**: `app`内にプロジェクトファイルをコロケーションすることは**可能**ですが、必ずしもそうする必要はありません。必要に応じて、[それらを`app`ディレクトリの外に保管する](#store-project-files-outside-of-app)こともできます。 -### プライベートフォルダ {#private-folders} +### プライベートフォルダー {#private-folders} -プライベートフォルダは、フォルダ名の前にアンダースコアを付けることで作成できます：`_folderName` +プライベートフォルダーは、フォルダー名の前にアンダースコアを付けることで作成できます：`_folderName` -これは、フォルダがプライベートな実装の詳細であり、ルーティングシステムによって考慮されるべきではないことを示し、フォルダとそのすべてのサブフォルダをルーティングから**除外**します。 +これは、フォルダーがプライベートな実装の詳細であり、ルーティングシステムによって考慮されるべきではないことを示し、フォルダーとそのすべてのサブフォルダーをルーティングから**除外**します。 プライベートフォルダを使用したフォルダ構造の例 -`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)を知っておくと、予期しない命名の競合を防ぐのに役立ちます。 +> - フレームワークの規約ではありませんが、プライベートフォルダーの外にあるファイルを同じアンダースコアパターンを使用して「プライベート」としてマークすることも検討できます。 +> - フォルダー名の前に`%5F`（アンダースコアのURLエンコード形式）を付けることで、アンダースコアで始まるURLセグメントを作成できます：`%5FfolderName`。 +> - プライベートフォルダーを使用しない場合は、Next.jsの[特別なファイル規約](/docs/app/getting-started/project-structure#routing-files)を知っておくと、予期しない命名競合を防ぐのに役立ちます。 ### ルートグループ {#route-groups} -ルートグループは、フォルダを括弧で囲むことで作成できます：`(folderName)` +ルートグループは、フォルダーを括弧で囲むことで作成できます：`(folderName)` -これは、フォルダが組織的な目的であり、ルートのURLパスに**含まれるべきではない**ことを示します。 +これは、フォルダーが組織化の目的であり、ルートのURLパスに**含まれない**ことを示します。 ルートグループを使用したフォルダ構造の例 -### 一般的な戦略 {#common-strategies} +### 例 {#examples} -次のセクションでは、一般的な戦略の非常に高レベルな概要を示します。最も簡単な結論は、自分とチームに合った戦略を選び、プロジェクト全体で一貫性を保つことです。 +以下のセクションでは、一般的な戦略の非常に高レベルな概要を示します。最も簡単な結論は、自分やチームに合った戦略を選び、プロジェクト全体で一貫性を保つことです。 -> **Good to know**: 以下の例では、`components`と`lib`フォルダを一般的なプレースホルダーとして使用しています。これらの名前には特別なフレームワークの意味はなく、プロジェクトによっては`ui`、`utils`、`hooks`、`styles`などの他のフォルダを使用することがあります。 +> **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`ディレクトリを純粋にルーティングの目的で使用します。 +この戦略では、すべてのアプリケーションコードをプロジェクトの**root**にある共有フォルダーに保存し、`app`ディレクトリを純粋にルーティングの目的で使用します。 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**にある共有フォルダに保存します。 +この戦略では、すべてのアプリケーションコードを`app`ディレクトリの**root**にある共有フォルダーに保存します。 app内にプロジェクトファイルを保存したフォルダ構造の例 -#### プロジェクトファイルを機能またはルートごとに分割する {#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とpage.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レイアウトに追加する必要があります。 + +複数の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..9b64f944 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 @@ -1,21 +1,21 @@ --- title: 'レイアウトとページの作成方法' nav_title: 'レイアウトとページ' -description: '最初のページとレイアウトを作成し、それらをリンクします。' +description: '最初のページとレイアウトを作成し、それらをリンクする方法を学びます。' related: title: 'APIリファレンス' - description: 'このページで紹介されている機能について詳しくは、APIリファレンスをお読みください。' + description: 'このページで言及されている機能について、APIリファレンスを読んでさらに学びましょう。' links: - - app/api-reference/file-conventions/layout - - app/api-reference/file-conventions/page - - app/api-reference/components/link + - 'app/api-reference/file-conventions/layout' + - 'app/api-reference/file-conventions/page' + - 'app/api-reference/components/link' --- -Next.jsは**ファイルシステムベースのルーティング**を使用しており、フォルダとファイルを使用してルートを定義できます。このページでは、レイアウトとページの作成方法、およびそれらをリンクする方法を説明します。 +Next.jsは**ファイルシステムベースのルーティング**を使用しており、フォルダとファイルを使ってルートを定義できます。このページでは、レイアウトとページの作成方法、およびそれらをリンクする方法について説明します。 ## ページの作成 {#creating-a-page} -**ページ**は特定のルートでレンダリングされるUIです。ページを作成するには、`app`ディレクトリ内に[`page`ファイル](/docs/app/api-reference/file-conventions/page)を追加し、Reactコンポーネントをデフォルトエクスポートします。たとえば、インデックスページ（`/`）を作成するには： +**ページ**は特定のルートでレンダリングされるUIです。ページを作成するには、`app`ディレクトリ内に[`page`ファイル](/docs/app/api-reference/file-conventions/page)を追加し、Reactコンポーネントをデフォルトエクスポートします。たとえば、インデックスページ（`/`）を作成するには次のようにします： page.js 特殊ファイル -上記のレイアウトは、`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`ファイルを追加します： blogフォルダとpage.jsファイルを示すファイル階層 ```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`ファイルを追加します： slugフォルダとpage.jsファイルをネストしたblogフォルダを示すファイル階層 -> **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`ファイルを追加します。 root レイアウトがblogレイアウトをラップしているファイル階層 -上記の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..1a1971c7 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 --- -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（`/`）から始めてコードで参照できます。 + +appフォルダとpublicフォルダを示すフォルダ構造 @@ -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,9 +205,9 @@ 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`を設定します。例えば： +`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..69d1b9bb 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,12 +122,12 @@ 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} -プロジェクトのrootに`postcss.config.mjs`ファイルを作成し、PostCSS設定に`@tailwindcss/postcss`プラグインを追加します： +プロジェクトのルートに`postcss.config.mjs`ファイルを作成し、PostCSS設定に`@tailwindcss/postcss`プラグインを追加します： ```js title="postcss.config.mjs" highlight={4} /** @type {import('tailwindcss').Config} */ @@ -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のユーティリティクラスを記述し始めることができます。 @@ -279,7 +276,7 @@ export default nextConfig > **Warning:** ランタイムJavaScriptを必要とするCSS-in-JSライブラリは、現在React Server Componentsではサポートされていません。CSS-in-JSをServer ComponentsやStreamingなどの新しいReact機能と共に使用するには、ライブラリの作者が最新の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) @@ -311,7 +308,7 @@ CSS-in-JSを設定するには、次の手順を行います： #### `styled-jsx` {#styled-jsx} -アプリケーション用に`styled-jsx`を設定するには、新しいレジストリを作成します： +アプリケーションで`styled-jsx`を設定するには、新しいレジストリを作成します： @@ -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タグにレジストリで収集されたスタイルを挿入します。 @@ -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..ca0af7b3 100644 --- a/docs/01-app/01-getting-started/06-fetching-data.mdx +++ b/docs/01-app/01-getting-started/06-fetching-data.mdx @@ -1,29 +1,29 @@ --- -title: 'データの取得とストリーミングの方法' +title: 'データの取得とストリーミング方法' nav_title: 'データの取得' description: 'アプリケーションでデータを取得し、コンテンツをストリーミングする方法を始めましょう。' related: - title: 'API リファレンス' - description: 'このページで言及されている機能について詳しくは、API リファレンスをお読みください。' + title: 'APIリファレンス' + description: 'このページで言及されている機能について詳しくは、APIリファレンスをお読みください。' links: - 'app/api-reference/functions/fetch' - 'app/api-reference/file-conventions/loading' --- -このページでは、[server component](#server-components)と[client component](#client-components)でデータを取得する方法、およびデータに依存するコンテンツを[ストリーミング](#streaming)する方法について説明します。 +このページでは、[server component](#server-components)と[client component](#client-components)でデータを取得する方法、およびデータに依存するコンテンツを[ストリーミング](#streaming)する方法を説明します。 ## データの取得 {#fetching-data} ### Server Components {#server-components} -Server component でデータを取得するには、次の方法があります： +Server Componentsでデータを取得するには、次の方法があります： 1. [`fetch` API](#with-the-fetch-api)を使用する -2. [ORM またはデータベース](#with-an-orm-or-database)を使用する +2. [ORMやデータベース](#with-an-orm-or-database)を使用する -#### `fetch` API を使用する {#with-the-fetch-api} +#### `fetch` APIを使用する {#with-the-fetch-api} -`fetch` API を使用してデータを取得するには、コンポーネントを非同期関数に変換し、`fetch` 呼び出しを待機します。例えば： +`fetch` APIを使用してデータを取得するには、コンポーネントを非同期関数に変換し、`fetch`呼び出しを待機します。例えば： @@ -62,9 +62,9 @@ export default async function Page() { -#### ORM またはデータベースを使用する {#with-an-orm-or-database} +#### ORMやデータベースを使用する {#with-an-orm-or-database} -ORM またはデータベースを使用してデータを取得するには、コンポーネントを非同期関数に変換し、呼び出しを待機します： +Server Componentsはサーバー上でレンダリングされるため、ORMやデータベースクライアントを使用して安全にデータベースクエリを実行できます。コンポーネントを非同期関数に変換し、呼び出しを待機します： @@ -107,14 +107,14 @@ export default async function Page() { ### Client Components {#client-components} -client component でデータを取得する方法は2つあります： +Client Componentsでデータを取得する方法は2つあります： -1. React の[`use` フック](https://react.dev/reference/react/use)を使用する +1. Reactの[`use`フック](https://react.dev/reference/react/use)を使用する 2. [SWR](https://swr.vercel.app/)や[React Query](https://tanstack.com/query/latest)のようなコミュニティライブラリを使用する -#### `use` フックを使用する {#with-the-use-hook} +#### `use`フックを使用する {#with-the-use-hook} -React の[`use` フック](https://react.dev/reference/react/use)を使用して、サーバーからクライアントにデータを[ストリーミング](#streaming)できます。まず、Server component でデータを取得し、Promise を client component に prop として渡します： +Reactの[`use`フック](https://react.dev/reference/react/use)を使用して、サーバーからクライアントにデータを[ストリーミング](#streaming)できます。まず、Server componentでデータを取得し、そのプロミスをClient Componentにpropとして渡します： @@ -157,7 +157,7 @@ export default function Page() { -次に、client component で `use` フックを使用して Promise を読み取ります： +次に、Client Componentで`use`フックを使用してプロミスを読み取ります： @@ -206,11 +206,11 @@ export default function Posts({ posts }) { -上記の例では、`` コンポーネントを[`` boundary](https://react.dev/reference/react/Suspense)でラップする必要があります。これは、Promise が解決される間、フォールバックが表示されることを意味します。[ストリーミング](#streaming)について詳しく学びましょう。 +上記の例では、``コンポーネントを[`` boundary](https://react.dev/reference/react/Suspense)でラップする必要があります。これは、プロミスが解決される間、フォールバックが表示されることを意味します。[ストリーミング](#streaming)について詳しく学びましょう。 #### コミュニティライブラリ {#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 Componentsでデータを取得できます。これらのライブラリは、キャッシング、ストリーミング、その他の機能に独自のセマンティクスを持っています。例えば、SWRを使用する場合： @@ -273,11 +273,11 @@ export default function BlogPage() { ## ストリーミング {#streaming} -> **警告：** 以下の内容は、アプリケーションで[`dynamicIO` config option](/docs/app/api-reference/config/next-config-js/dynamicIO)が有効になっていることを前提としています。このフラグは Next.js 15 canary で導入されました。 +> **警告：** 以下の内容は、アプリケーションで[`dynamicIO`設定オプション](/docs/app/api-reference/config/next-config-js/dynamicIO)が有効になっていることを前提としています。このフラグはNext.js 15 canaryで導入されました。 -Server component で `async/await` を使用すると、Next.js は**動的レンダリング**を選択します。これは、データがユーザーのリクエストごとにサーバーで取得され、レンダリングされることを意味します。遅いデータリクエストがある場合、ルート全体がレンダリングをブロックされます。 +Server Componentsで`async/await`を使用すると、Next.jsは**動的レンダリング**を選択します。これは、データがユーザーのリクエストごとにサーバーで取得され、レンダリングされることを意味します。遅いデータリクエストがある場合、ルート全体がレンダリングをブロックされます。 -初期ロード時間とユーザーエクスペリエンスを向上させるために、ページの HTML を小さなチャンクに分割し、それらのチャンクをサーバーからクライアントに段階的に送信するストリーミングを使用できます。 +初期ロード時間とユーザーエクスペリエンスを向上させるために、ページのHTMLを小さなチャンクに分割し、それらのチャンクをサーバーからクライアントに順次送信するストリーミングを使用できます。 ストリーミングを使用したサーバーレンダリングの仕組み` コンポーネント](#with-suspense)を使用する +1. [`loading.js`ファイル](#with-loadingjs)を使用する +2. Reactの[``コンポーネント](#with-suspense)を使用する -### `loading.js` を使用する {#with-loading-js} +### `loading.js`を使用する {#with-loading-js} -ページと同じフォルダに `loading.js` ファイルを作成して、データが取得されている間に**ページ全体**をストリーミングできます。例えば、`app/blog/page.js` をストリーミングするには、`app/blog` フォルダ内にファイルを追加します。 +ページと同じフォルダに`loading.js`ファイルを作成して、データが取得されている間に**ページ全体**をストリーミングできます。例えば、`app/blog/page.js`をストリーミングするには、`app/blog`フォルダ内にファイルを追加します。 loading.js ファイルを含むブログフォルダ構造Loading... } ``` @@ -319,7 +319,7 @@ export default function Loading() { ```jsx title="app/blog/loading.js" switcher export default function Loading() { - // ここで読み込み中の UI を定義します + // ここでLoading UIを定義します return
Loading...
} ``` @@ -327,31 +327,31 @@ export default function Loading() { -ナビゲーション時に、ユーザーはページがレンダリングされている間にレイアウトと[読み込み状態](#creating-meaningful-loading-states)をすぐに見ることができます。レンダリングが完了すると、新しいコンテンツが自動的に入れ替わります。 +ナビゲーション時に、ユーザーはページがレンダリングされている間にレイアウトと[ローディング状態](#creating-meaningful-loading-states)をすぐに見ることができます。レンダリングが完了すると、新しいコンテンツが自動的に入れ替わります。 読み込み中の UI -舞台裏では、`loading.js` は `layout.js` 内にネストされ、`page.js` ファイルとその下のすべての子を自動的に `` boundary でラップします。 +裏側では、`loading.js`は`layout.js`内にネストされ、`page.js`ファイルとその下のすべての子を自動的に`` boundaryでラップします。 loading.js の概要 -このアプローチはルートセグメント（レイアウトとページ）に適していますが、より細かいストリーミングには `` を使用できます。 +このアプローチはルートセグメント（レイアウトとページ）に適していますが、より細かいストリーミングには``を使用できます。 -### `` を使用する {#with-suspense} +### ``を使用する {#with-suspense} -`` を使用すると、ページのどの部分をストリーミングするかをより細かく制御できます。例えば、`` boundary の外にあるページコンテンツをすぐに表示し、boundary 内のブログ投稿のリストをストリーミングできます。 +``を使用すると、ページのどの部分をストリーミングするかをより細かく制御できます。例えば、`` boundaryの外にあるページコンテンツをすぐに表示し、boundary内のブログ投稿のリストをストリーミングできます。 @@ -370,7 +370,7 @@ export default function BlogPage() {

Read the latest posts below.

- {/* boundary でラップされたコンテンツはストリーミングされます */} + {/* boundaryでラップされたコンテンツはストリーミングされます */} }> @@ -397,7 +397,7 @@ export default function BlogPage() {

Read the latest posts below.

- {/* boundary でラップされたコンテンツはストリーミングされます */} + {/* boundaryでラップされたコンテンツはストリーミングされます */} }> @@ -410,8 +410,8 @@ export default function BlogPage() { -### 意味のある読み込み状態の作成 {#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..01543935 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') + + // データを更新 + // キャッシュを再検証 +} ``` @@ -44,7 +66,7 @@ export async function deletePost(formData) {} ### Server Components {#server-components} -Server Functionsは、関数本体の先頭に`"use server"`ディレクティブを追加することでServer Componentsにインライン化できます： +Server Functionsは、関数本体の先頭に`"use server"`ディレクティブを追加することで、Server Componentsにインライン化できます： @@ -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) { '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で呼び出すことができます： @@ -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') @@ -394,7 +414,6 @@ export async function createPost(formData: FormData) { - ```js title="app/actions.js" switcher 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..c34aea43 100644 --- a/docs/01-app/01-getting-started/08-error-handling.mdx +++ b/docs/01-app/01-getting-started/08-error-handling.mdx @@ -18,9 +18,11 @@ related: 予期されたエラーとは、[サーバーサイドのフォームバリデーション](/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,19 +239,19 @@ export default function NotFound() { ## キャッチされない例外の処理 {#handling-uncaught-exceptions} -キャッチされない例外は、アプリケーションの通常のフロー中に発生すべきでないバグや問題を示す予期しないエラーです。これらはエラーをスローすることで処理され、その後error boundaryによってキャッチされます。 +キャッチされない例外は、アプリケーションの通常のフロー中に発生すべきでないバグや問題を示す予期しないエラーです。これらはエラーをスローすることで処理され、エラーバウンダリによってキャッチされます。 -### ネストされたerror boundary {#nested-error-boundaries} +### ネストされたエラーバウンダリ {#nested-error-boundaries} -Next.jsはキャッチされない例外を処理するためにerror boundaryを使用します。error boundaryは子コンポーネント内のエラーをキャッチし、クラッシュしたコンポーネントツリーの代わりにフォールバックUIを表示します。 +Next.jsはキャッチされない例外を処理するためにエラーバウンダリを使用します。エラーバウンダリは子コンポーネント内のエラーをキャッチし、クラッシュしたコンポーネントツリーの代わりにフォールバックUIを表示します。 -ルートセグメント内に[`error.js`](/docs/app/api-reference/file-conventions/error)ファイルを追加し、Reactコンポーネントをエクスポートすることでerror boundaryを作成します。 +ルートセグメント内に[`error.js`](/docs/app/api-reference/file-conventions/error)ファイルを追加し、Reactコンポーネントをエクスポートすることでエラーバウンダリを作成します。 ```tsx title="app/dashboard/error.tsx" switcher -'use client' // Error boundaries must be Client Components +'use client' // エラーバウンダリはClient Componentsである必要があります import { useEffect } from 'react' @@ -285,7 +287,7 @@ export default function Error({ ```jsx title="app/dashboard/error.js" switcher -'use client' // Error boundaries must be Client Components +'use client' // エラーバウンダリはClient Componentsである必要があります import { useEffect } from 'react' @@ -314,7 +316,7 @@ export default function Error({ error, reset }) { -エラーは最も近い親のerror boundaryまでバブルアップします。これにより、[ルート階層](/docs/app/getting-started/project-structure#component-hierarchy)の異なるレベルに`error.tsx`ファイルを配置することで、細かいエラー処理が可能になります。 +エラーは最も近い親のエラーバウンダリにバブルアップします。これにより、[ルート階層](/docs/app/getting-started/project-structure#component-hierarchy)の異なるレベルに`error.tsx`ファイルを配置することで、細かいエラー処理が可能になります。 ネストされたエラーコンポーネント階層 ```tsx title="app/global-error.tsx" switcher -'use client' // Error boundaries must be Client Components +'use client' // エラーバウンダリはClient Componentsである必要があります export default function GlobalError({ error, @@ -357,7 +359,7 @@ export default function GlobalError({ ```jsx title="app/global-error.js" switcher -'use client' // Error boundaries must be Client Components +'use client' // エラーバウンダリはClient Componentsである必要があります export default function GlobalError({ error, reset }) { return ( diff --git a/docs/01-app/01-getting-started/10-metadata-and-og-images.mdx b/docs/01-app/01-getting-started/10-metadata-and-og-images.mdx index 65fb0278..f7b701e2 100644 --- a/docs/01-app/01-getting-started/10-metadata-and-og-images.mdx +++ b/docs/01-app/01-getting-started/10-metadata-and-og-images.mdx @@ -13,7 +13,7 @@ related: - 'app/api-reference/functions/image-response' --- -メタデータAPIを使用すると、SEOの向上やWebの共有性を高めるためにアプリケーションのメタデータを定義できます。以下を含みます： +メタデータAPIを使用すると、SEOの向上やWebでの共有性を高めるためにアプリケーションのメタデータを定義できます。以下を含みます： 1. [静的な `metadata` オブジェクト](#static-metadata) 2. [動的な `generateMetadata` 関数](#generated-metadata) @@ -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 @@ -239,7 +239,7 @@ Open Graph（OG）画像は、ソーシャルメディアでサイトを表す height="444" /> -特定のルートにOG画像を追加するには、フォルダ構造のさらに下に`opengraph-image.png`を作成します。たとえば、`/blog`ルートに特定のOG画像を作成するには、`blog`フォルダ内に`opengraph-image.jpg`ファイルを追加します。 +特定のルートにOG画像を追加するには、フォルダ構造の深い場所に`opengraph-image.png`を作成します。たとえば、`/blog`ルートに特定のOG画像を作成するには、`blog`フォルダ内に`opengraph-image.jpg`ファイルを追加します。 blogフォルダ内の特別なファイルとしてのOG画像 -より特定の画像は、フォルダ構造内の上位のOG画像よりも優先されます。 +より具体的な画像は、フォルダ構造内の上位のOG画像よりも優先されます。 -> 他の画像形式（`jpeg`、`png`、`webp`など）もサポートされています。詳細は[Open Graph Imageドキュメント](/docs/app/api-reference/file-conventions/metadata/opengraph-image)を参照してください。 +> `jpeg`、`png`、`webp`などの他の画像形式もサポートされています。詳細は[Open Graph Imageドキュメント](/docs/app/api-reference/file-conventions/metadata/opengraph-image)を参照してください。 ## 生成されたOpen Graph画像 {#generated-open-graph-images} @@ -342,10 +342,10 @@ export default async function Image({ params }) { -`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..895ec8d1 100644 --- a/docs/01-app/01-getting-started/12-upgrading.mdx +++ b/docs/01-app/01-getting-started/12-upgrading.mdx @@ -5,20 +5,19 @@ 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..027bb5de 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,5 +1,5 @@ --- -title: 'Layouts and Templates' +title: 'LayoutsとTemplates' description: 'Next.jsで最初の共有レイアウトを作成します。' --- @@ -9,9 +9,9 @@ description: 'Next.jsで最初の共有レイアウトを作成します。' レイアウトは、複数のルート間で**共有**されるUIです。ナビゲーション時に、レイアウトは状態を保持し、インタラクティブなままで、再レンダリングされません。レイアウトは[ネスト](#nesting-layouts)することもできます。 -`layout.js`ファイルからReactコンポーネントをデフォルトエクスポートすることで、レイアウトを定義できます。コンポーネントは、レンダリング中に子レイアウト（存在する場合）またはページで埋められる`children`プロップを受け入れる必要があります。 +`layout.js`ファイルからReactコンポーネントをデフォルトエクスポートすることで、レイアウトを定義できます。コンポーネントは、レンダリング中に子レイアウト（存在する場合）またはページで埋められる`children` propを受け入れる必要があります。 -たとえば、レイアウトは`/dashboard`および`/dashboard/settings`ページと共有されます： +たとえば、レイアウトは`/dashboard`および`/dashboard/settings`ページと共有されます。 layout.js special file -### Root Layout (必須) {#root-layout-required} +### Root Layout（必須） {#root-layout-required} root レイアウトは`app`ディレクトリのトップレベルで定義され、すべてのルートに適用されます。このレイアウトは**必須**であり、`html`および`body`タグを含める必要があります。これにより、サーバーから返される初期HTMLを変更できます。 @@ -107,9 +107,9 @@ export default function RootLayout({ children }) { ### ネストされたレイアウト {#nesting-layouts} -デフォルトでは、フォルダ階層内のレイアウトは**ネスト**されており、`children`プロップを介して子レイアウトをラップします。特定のルートセグメント（フォルダ）内に`layout.js`を追加することで、レイアウトをネストできます。 +デフォルトでは、フォルダ階層内のレイアウトは**ネスト**されており、`children` propを介して子レイアウトをラップします。特定のルートセグメント（フォルダ）内に`layout.js`を追加することで、レイアウトをネストできます。 -たとえば、`/dashboard`ルートのレイアウトを作成するには、`dashboard`フォルダ内に新しい`layout.js`ファイルを追加します： +たとえば、`/dashboard`ルートのレイアウトを作成するには、`dashboard`フォルダ内に新しい`layout.js`ファイルを追加します。 Nested Layout - レイアウトには`.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を受け入れる必要があります。 template.js special file` 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)をエクスポートすることで定義できます。 @@ -266,7 +266,7 @@ export default function Page() { [usePathname()](/docs/app/api-reference/functions/use-pathname)フックを使用して、ナビゲーションリンクがアクティブかどうかを判断できます。 -`usePathname()`はクライアントフックであるため、ナビゲーションリンクをClient Componentに抽出し、レイアウトやテンプレートにインポートする必要があります： +`usePathname()`はクライアントフックであるため、ナビゲーションリンクをClient Componentに抽出し、レイアウトまたはテンプレートにインポートする必要があります： 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..d002bd6b 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)` など）。 - -Route Group を使ったルートの整理 - -`(marketing)` や `(shop)` 内のルートが同じ URL 階層を共有しているとしても、それぞれのグループ内に `layout.js` ファイルを追加することで異なるレイアウトを作成できます。 - -複数のレイアウトを持つ Route Group - -### 特定のセグメントをレイアウトに選択する {#opting-specific-segments-into-a-layout} - -特定のルートをレイアウトに選択するには、新しい Route Group（例：`(shop)`）を作成し、同じレイアウトを共有するルートをそのグループに移動します（例：`account` と `cart`）。グループ外のルートはレイアウトを共有しません（例：`checkout`）。 - -オプトインレイアウトを持つ Route Group - -### 特定ルートにローディングスケルトンを選択する {#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` を移動します。 - -Route グループ内に loading.tsx と page.tsx が含まれるフォルダ構造 - -これで、`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 レイアウトに `` と `` タグを追加する必要があります。 - -複数の root レイアウトを持つ Route Group - -上記の例では、`(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/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 100% 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 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 100% rename from docs/01-app/04-api-reference/04-functions/cacheLife.mdx rename to docs/01-app/05-api-reference/04-functions/cacheLife.mdx 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/04-api-reference/04-functions/use-link-status.mdx b/docs/01-app/05-api-reference/04-functions/use-link-status.mdx similarity index 91% rename from docs/01-app/04-api-reference/04-functions/use-link-status.mdx rename to docs/01-app/05-api-reference/04-functions/use-link-status.mdx index d6ce6d72..652722f7 100644 --- a/docs/01-app/04-api-reference/04-functions/use-link-status.mdx +++ b/docs/01-app/05-api-reference/04-functions/use-link-status.mdx @@ -11,7 +11,7 @@ description: 'useLinkStatus フックのAPIリファレンス。' ```tsx title="app/loading-indicator.tsx" switcher 'use client' -import { useLinkStatus } from 'next/navigation' +import { useLinkStatus } from 'next/link' export default function LoadingIndicator() { const { pending } = useLinkStatus() @@ -25,7 +25,7 @@ export default function LoadingIndicator() { ```jsx title="app/loading-indicator.js" switcher 'use client' -import { useLinkStatus } from 'next/navigation' +import { useLinkStatus } from 'next/link' export default function LoadingIndicator() { const { pending } = useLinkStatus() @@ -79,8 +79,8 @@ export default function Header() { > > - `useLinkStatus`は、`Link`コンポーネントの子孫コンポーネント内で使用する必要があります > - このフックは、`Link`コンポーネントで`prefetch={false}`が設定されている場合に最も有用です -> - リンクされたルートが事前にフェッチされている場合、pending状態はスキップされます -> - 短時間で複数のリンクをクリックした場合、最後のリンクのpending状態のみが表示されます +> - リンクされたルートが事前取得されている場合、pending状態はスキップされます +> - 複数のリンクを短時間で連続してクリックすると、最後のリンクのpending状態のみが表示されます > - このフックはPages Routerではサポートされておらず、常に`{ pending: false }`を返します ## パラメータ {#parameters} @@ -105,7 +105,7 @@ const { pending } = useLinkStatus() この例では、カテゴリ間のナビゲーションがクエリ文字列（例：?category=books）を更新します。しかし、ページが応答しないように見えることがあります。これは、``フォールバックが既存のコンテンツを置き換えないためです（[不要な読み込みインジケーターの防止](https://react.dev/reference/react/useTransition#preventing-unwanted-loading-indicators)を参照）。 -`useLinkStatus`フックを使用して、アクティブなリンクの横に軽量な読み込みインジケーターをレンダリングし、データがフェッチされている間にユーザーに即時のフィードバックを提供できます。 +`useLinkStatus`フックを使用して、アクティブなリンクの横に軽量な読み込みインジケーターをレンダリングし、データが取得される間、ユーザーに即時のフィードバックを提供できます。 @@ -113,7 +113,7 @@ const { pending } = useLinkStatus() ```tsx title="app/components/loading-indicator.tsx" switcher 'use client' -import { useLinkStatus } from 'next/navigation' +import { useLinkStatus } from 'next/link' export default function LoadingIndicator() { const { pending } = useLinkStatus() @@ -127,7 +127,7 @@ export default function LoadingIndicator() { ```jsx title="app/components/loading-indicator.js" switcher 'use client' -import { useLinkStatus } from 'next/navigation' +import { useLinkStatus } from 'next/link' export default function LoadingIndicator() { const { pending } = 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/turbo.mdx similarity index 100% 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/turbo.mdx 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/04-api-reference/08-turbopack.mdx b/docs/01-app/05-api-reference/08-turbopack.mdx similarity index 100% rename from docs/01-app/04-api-reference/08-turbopack.mdx rename to docs/01-app/05-api-reference/08-turbopack.mdx 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/kj-diff.json b/kj-diff.json index 09f29f50..1ae7940f 100644 --- a/kj-diff.json +++ b/kj-diff.json @@ -1,11 +1,156 @@ { "submodule": "next.js", "hash": { - "previous": "c08d75d102da5b5a894330c7159120e8b0251768", - "current": "f6557ffc0f85558c2db3a6c3cdc75f2ac3b3bb92" + "previous": "f6557ffc0f85558c2db3a6c3cdc75f2ac3b3bb92", + "current": "c640c57a0866317631fd18973f02f52f1b0390e0" }, "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", + "D\tdocs/01-app/04-api-reference/04-functions/use-link-status.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", + "R100\tdocs/01-app/04-api-reference/01-directives/use-cache.mdx\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", + "R100\tdocs/01-app/04-api-reference/04-functions/cacheLife.mdx\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", + "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/turbo.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/turbo.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", + "R100\tdocs/01-app/04-api-reference/08-turbopack.mdx\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" ] } diff --git a/next.js b/next.js index f6557ffc..c640c57a 160000 --- a/next.js +++ b/next.js @@ -1 +1 @@ -Subproject commit f6557ffc0f85558c2db3a6c3cdc75f2ac3b3bb92 +Subproject commit c640c57a0866317631fd18973f02f52f1b0390e0 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