diff --git a/docs/01-app/01-getting-started/01-installation.mdx b/docs/01-app/01-getting-started/01-installation.mdx index c977dbf1..37e6f744 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がサポートされています +始める前に、システムが次の要件を満たしていることを確認してください： + +- [Node.js 18.18](https://nodejs.org/) 以上 +- 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" { @@ -58,28 +60,18 @@ npm install next@latest react@latest react-dom@latest これらのスクリプトは、アプリケーション開発のさまざまな段階を指します： -- `dev`: Next.js を開発モードで開始するために [`next dev`](/docs/app/api-reference/cli/next#next-dev-options) を実行します -- `build`: 本番使用のためにアプリケーションをビルドするために [`next build`](/docs/app/api-reference/cli/next#next-build-options) を実行します -- `start`: Next.js の本番サーバーを開始するために [`next start`](/docs/app/api-reference/cli/next#next-start-options) を実行します -- `lint`: Next.js の組み込み ESLint 設定をセットアップするために [`next lint`](/docs/app/api-reference/cli/next#next-lint-options) を実行します +- `next dev`: 開発サーバーを起動します。 +- `next build`: アプリケーションを本番用にビルドします。 +- `next start`: 本番サーバーを起動します。 +- `next lint`: ESLint を実行します。 -### `app` ディレクトリを作成する {#create-the-app-directory} +### `app` ディレクトリの作成 {#create-the-app-directory} Next.js はファイルシステムルーティングを使用しているため、アプリケーション内のルートはファイルの構造によって決まります。 -`app` フォルダーを作成し、`layout.tsx` と `page.tsx` ファイルを追加します。これらはユーザーがアプリケーションの root (`/`) を訪れたときにレンダリングされます。 - -App フォルダ構造 - -`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 はファイルシステムルーティングを使用しているため、アプリケーション内のルートはファイルの構造によって決まります。 -プロジェクトの 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" { @@ -313,29 +340,31 @@ npm run lint > Base > Cancel -- **Strict**: Next.js の基本 ESLint 設定に加えて、より厳しい Core Web Vitals ルールセットを含みます。ESLint を初めて設定する開発者に推奨される設定です。 -- **Base**: Next.js の基本 ESLint 設定を含みます。 -- **Cancel**: ESLint 設定を含みません。独自のカスタム ESLint 設定を設定する予定がある場合にのみ、このオプションを選択してください。 +- **Strict**: Next.js の基本的な ESLint 設定に加え、より厳格な Core Web Vitals ルールセットを含みます。初めて ESLint を設定する開発者に推奨される設定です。 +- **Base**: Next.js の基本的な ESLint 設定を含みます。 +- **Cancel**: 設定をスキップします。独自のカスタム ESLint 設定を行う予定の場合、このオプションを選択します。 -2つの設定オプションのいずれかが選択されると、Next.js は自動的に `eslint` と `eslint-config-next` をアプリケーションの依存関係としてインストールし、選択した設定を含む `.eslintrc.json` ファイルをプロジェクトの root に作成します。 +`Strict` または `Base` を選択すると、Next.js は自動的に `eslint` と `eslint-config-next` をアプリケーションの依存関係としてインストールし、選択した設定を含む `.eslintrc.json` ファイルをプロジェクトの root に作成します。 ESLint を実行してエラーをキャッチしたいときは、`next lint` を実行できます。ESLint が設定されると、ビルド（`next build`）のたびに自動的に実行されます。エラーはビルドを失敗させますが、警告は失敗しません。 -プロジェクトで ESLint を設定する方法については、[ESLint プラグイン](/docs/app/api-reference/config/next-config-js/eslint) ページを参照してください。 +詳細は [ESLint プラグイン](/docs/app/api-reference/config/next-config-js/eslint) ページを参照してください。 -## 絶対インポートとモジュールパスエイリアスを設定する {#set-up-absolute-imports-and-module-path-aliases} +## 絶対インポートとモジュールパスエイリアスの設定 {#set-up-absolute-imports-and-module-path-aliases} -Next.js には、`tsconfig.json` および `jsconfig.json` ファイルの `"paths"` および `"baseUrl"` オプションのサポートが組み込まれています。これらのオプションを使用すると、プロジェクトディレクトリを絶対パスにエイリアス化し、モジュールのインポートを簡単にします。例えば： +Next.js は `tsconfig.json` および `jsconfig.json` ファイルの `"paths"` および `"baseUrl"` オプションをサポートしています。 + +これらのオプションを使用すると、プロジェクトディレクトリを絶対パスにエイリアス化し、モジュールのインポートをより簡単かつクリーンに行うことができます。たとえば： ```jsx -// 以前 +// Before import { Button } from '../../../components/button' -// 以降 +// After import { Button } from '@/components/button' ``` -絶対インポートを設定するには、`tsconfig.json` または `jsconfig.json` ファイルに `baseUrl` 設定オプションを追加します。例えば： +絶対インポートを設定するには、`tsconfig.json` または `jsconfig.json` ファイルに `baseUrl` 設定オプションを追加します。たとえば： ```json title="tsconfig.json or jsconfig.json" { @@ -347,7 +376,7 @@ import { Button } from '@/components/button' `baseUrl` パスの設定に加えて、`"paths"` オプションを使用してモジュールパスを `"alias"` することができます。 -例えば、次の設定は `@/components/*` を `components/*` にマッピングします： +たとえば、次の設定は `@/components/*` を `components/*` にマッピングします： ```json title="tsconfig.json or jsconfig.json" { @@ -361,41 +390,4 @@ import { Button } from '@/components/button' } ``` -各 `"paths"` は `baseUrl` の場所に対して相対的です。例えば： - - - - -```tsx title="src/app/page.tsx" switcher -import Button from '@/components/button' -import '@/styles/styles.css' - -export default function HomePage() { - return ( -
-

Hello World

-
- ) -} -``` - - - - -```jsx title="src/app/page.js" switcher -import Button from '@/components/button' -import '@/styles/styles.css' - -export default function HomePage() { - return ( -
-

Hello World

-
- ) -} -``` - - - +各 `"paths"` は `baseUrl` の場所に対して相対的です。 diff --git a/docs/01-app/01-getting-started/02-project-structure.mdx b/docs/01-app/01-getting-started/02-project-structure.mdx index 513f00ba..4fe1e743 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..1decd92d 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 @@ -3,19 +3,19 @@ title: 'レイアウトとページの作成方法' nav_title: 'レイアウトとページ' description: '最初のページとレイアウトを作成し、それらをリンクします。' related: - title: 'APIリファレンス' - description: 'このページで紹介されている機能について詳しくは、APIリファレンスをお読みください。' + title: 'API リファレンス' + description: 'このページで紹介されている機能について詳しくは、API リファレンスを参照してください。' links: - - app/api-reference/file-conventions/layout - - app/api-reference/file-conventions/page - - app/api-reference/components/link + - 'app/api-reference/file-conventions/layout' + - 'app/api-reference/file-conventions/page' + - 'app/api-reference/components/link' --- -Next.jsは**ファイルシステムベースのルーティング**を使用しており、フォルダとファイルを使用してルートを定義できます。このページでは、レイアウトとページの作成方法、およびそれらをリンクする方法を説明します。 +Next.jsは**ファイルシステムベースのルーティング**を使用しており、フォルダとファイルを使ってルートを定義できます。このページでは、レイアウトとページの作成方法、およびそれらをリンクする方法を案内します。 ## ページの作成 {#creating-a-page} -**ページ**は特定のルートでレンダリングされるUIです。ページを作成するには、`app`ディレクトリ内に[`page`ファイル](/docs/app/api-reference/file-conventions/page)を追加し、Reactコンポーネントをデフォルトエクスポートします。たとえば、インデックスページ（`/`）を作成するには： +**ページ**は特定のルートでレンダリングされるUIです。ページを作成するには、`app`ディレクトリ内に[`page`ファイル](/docs/app/api-reference/file-conventions/page)を追加し、Reactコンポーネントをデフォルトエクスポートします。たとえば、インデックスページ（`/`）を作成するには次のようにします： page.js 特殊ファイル - {/* レイアウトUI */} - {/* ページまたはネストされたレイアウトをレンダリングしたい場所にchildrenを配置 */} + {/* レイアウト UI */} + {/* ページまたはネストされたレイアウトをレンダリングしたい場所に children を配置 */}
{children}
@@ -91,8 +91,8 @@ export default function DashboardLayout({ children }) { return ( - {/* レイアウトUI */} - {/* ページまたはネストされたレイアウトをレンダリングしたい場所にchildrenを配置 */} + {/* レイアウト UI */} + {/* ページまたはネストされたレイアウトをレンダリングしたい場所に children を配置 */}
{children}
@@ -103,7 +103,7 @@ export default function DashboardLayout({ children }) { -上記のレイアウトは、`app`ディレクトリのルートに定義されているため、[root レイアウト](/docs/app/api-reference/file-conventions/layout#root-layouts)と呼ばれます。root レイアウトは**必須**であり、`html`および`body`タグを含める必要があります。 +上記のレイアウトは、`app`ディレクトリのrootに定義されているため、[root レイアウト](/docs/app/api-reference/file-conventions/layout#root-layouts)と呼ばれます。root レイアウトは**必須**であり、`html`および`body`タグを含める必要があります。 ## ネストされたルートの作成 {#creating-a-nested-route} @@ -115,10 +115,10 @@ export default function DashboardLayout({ children }) { Next.jsでは： -- **フォルダ**は、URLセグメントにマッピングされるルートセグメントを定義するために使用されます。 +- **フォルダ**は、URLセグメントにマップされるルートセグメントを定義するために使用されます。 - **ファイル**（`page`や`layout`など）は、セグメントに表示されるUIを作成するために使用されます。 -ネストされたルートを作成するには、フォルダを互いにネストできます。たとえば、`/blog`のルートを追加するには、`app`ディレクトリに`blog`というフォルダを作成します。次に、`/blog`を公開するには、`page`ファイルを追加します： +ネストされたルートを作成するには、フォルダを互いにネストできます。たとえば、`/blog`のルートを追加するには、`app`ディレクトリに`blog`というフォルダを作成します。次に、`/blog`を公開アクセス可能にするために、`page.tsx`ファイルを追加します： 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..404e8f3b 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..355b70eb 100644 --- a/docs/01-app/01-getting-started/05-css.mdx +++ b/docs/01-app/01-getting-started/05-css.mdx @@ -1,10 +1,10 @@ --- title: 'アプリケーションでのCSSの使用方法' nav_title: 'CSS' -description: 'CSS Modules、Global CSS、Tailwind CSSなど、アプリケーションにCSSを追加するさまざまな方法について学びます。' +description: 'CSS Modules、Global CSS、Tailwind CSSなど、アプリケーションにCSSを追加するさまざまな方法を学びましょう。' related: title: 'APIリファレンス' - description: 'このページで言及されている機能について詳しくは、APIリファレンスをお読みください。' + description: 'このページで紹介されている機能について、APIリファレンスを読んでさらに学びましょう。' links: - 'app/api-reference/config/next-config-js/sassOptions' - 'architecture/nextjs-compiler' @@ -19,13 +19,13 @@ Next.jsは、アプリケーションでCSSを使用するためのいくつか - [CSS-in-JS](#css-in-js) - [External Stylesheets](#external-stylesheets) -このページでは、これらのアプローチのそれぞれを使用する方法を案内します。 +このページでは、これらの各アプローチの使用方法を案内します。 ## CSS Modules {#css-modules} -CSS Modulesは、ユニークなクラス名を生成することでCSSをローカルにスコープします。これにより、異なるファイルで同じクラスを使用しても衝突を心配する必要がなくなります。 +CSS Modulesは、ユニークなクラス名を生成することでCSSをローカルにスコープします。これにより、異なるファイルで同じクラスを使用しても、名前の衝突を心配する必要がなくなります。 -CSS Modulesを使用し始めるには、拡張子が`.module.css`の新しいファイルを作成し、`app`ディレクトリ内の任意のコンポーネントにインポートします： +CSS Modulesを使用するには、拡張子が`.module.css`の新しいファイルを作成し、`app`ディレクトリ内の任意のコンポーネントにインポートします： ```css title="app/blog/styles.module.css" .blog { @@ -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} @@ -121,15 +119,15 @@ export default function RootLayout({ children }) { ### Tailwindのインストール {#installing-tailwind} -Tailwindを使用し始めるには、必要なTailwind CSSパッケージをインストールします： +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のユーティリティクラスを記述し始めることができます。 @@ -232,7 +229,7 @@ Next.jsは、[`.scss`](https://sass-lang.com/documentation/syntax/#scss)およ ### Sassのインストール {#installing-sass} -Sassを使用し始めるには、`sass`パッケージをインストールします： +Sassを使用するには、`sass`パッケージをインストールします： ```bash title="Terminal" npm install --save-dev sass @@ -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) @@ -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`をスタイルレジストリコンポーネントでラップします： @@ -566,7 +563,7 @@ export default function RootLayout({ children }) { ## External stylesheets {#external-stylesheets} -外部パッケージによって公開されたスタイルシートは、`app`ディレクトリ内のどこにでも、コロケートされたコンポーネントを含めてインポートできます： +外部パッケージによって公開されたスタイルシートは、`app`ディレクトリ内の任意の場所でインポートできます。これには、コロケートされたコンポーネントも含まれます： @@ -605,4 +602,4 @@ export default function RootLayout({ children }) { -外部スタイルシートは、npmパッケージから直接インポートするか、ダウンロードしてコードベースとコロケートする必要があります。``を使用することはできません。 +外部スタイルシートは、npmパッケージから直接インポートするか、ダウンロードしてコードベースと一緒に配置する必要があります。``を使用することはできません。 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..bbe7816b 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でデータを取得し、promiseをClient Componentにpropとして渡します： @@ -157,7 +157,7 @@ export default function Page() { -次に、client component で `use` フックを使用して Promise を読み取ります： +次に、Client Componentで`use`フックを使用してpromiseを読み取ります： @@ -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)でラップする必要があります。これは、promiseが解決される間、フォールバックが表示されることを意味します。[ストリーミング](#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-loading-js)を使用する +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..38825e48 100644 --- a/docs/01-app/01-getting-started/07-updating-data.mdx +++ b/docs/01-app/01-getting-started/07-updating-data.mdx @@ -15,28 +15,50 @@ Next.jsでは、Reactの[Server Functions](https://react.dev/reference/rsc/serve ## Server Functionsの作成 {#creating-server-functions} -Server Functionは、[`use server`](https://react.dev/reference/rsc/use-server)ディレクティブを使用して定義できます。このディレクティブを**非同期**関数の先頭に置くことで、その関数をServer Functionとしてマークするか、別のファイルの先頭に置いてそのファイルのすべてのエクスポートをマークします。ほとんどの場合、別のファイルを使用することをお勧めします。 +Server Functionは、[`use server`](https://react.dev/reference/rsc/use-server)ディレクティブを使用して定義できます。このディレクティブを**非同期**関数の先頭に置くことで、その関数をServer Functionとしてマークするか、別のファイルの先頭に置いてそのファイルのすべてのエクスポートをマークします。 ```ts title="app/lib/actions.ts" switcher -'use server' +export async function createPost(formData: FormData) { + 'use server' + const title = formData.get('title') + const content = formData.get('content') + + // データを更新 + // キャッシュを再検証 +} -export async function createPost(formData: FormData) {} +export async function deletePost(formData: FormData) { + 'use server' + const id = formData.get('id') -export async function deletePost(formData: FormData) {} + // データを更新 + // キャッシュを再検証 +} ``` ```js title="app/lib/actions.js" switcher -'use server' +export async function createPost(formData) { + 'use server' + const title = formData.get('title') + const content = formData.get('content') -export async function createPost(formData) {} + // データを更新 + // キャッシュを再検証 +} -export async function deletePost(formData) {} +export async function deletePost(formData) { + 'use server' + const id = formData.get('id') + + // データを更新 + // キャッシュを再検証 +} ``` @@ -52,9 +74,8 @@ Server Functionsは、関数本体の先頭に`"use server"`ディレクティ ```tsx title="app/page.tsx" switcher export default function Page() { // Server Action - async function createPost() { + async function createPost(formData: FormData) { 'use server' - // データを更新 // ... } @@ -68,9 +89,8 @@ export default function Page() { ```jsx title="app/page.js" switcher export default function Page() { // Server Action - async function createPost() { + async function createPost(formData) { '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..a9ef71e8 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)を使用したりできます。 @@ -314,10 +316,10 @@ export default function Error({ error, reset }) { -エラーは最も近い親のerror boundaryまでバブルアップします。これにより、[ルート階層](/docs/app/getting-started/project-structure#component-hierarchy)の異なるレベルに`error.tsx`ファイルを配置することで、細かいエラー処理が可能になります。 +エラーは最も近い親のerror boundaryにバブルアップします。これにより、[ルート階層](/docs/app/getting-started/project-structure#component-hierarchy)の異なるレベルに`error.tsx`ファイルを配置することで、細かいエラー処理が可能になります。 ネストされたエラーコンポーネント階層 @@ -138,11 +138,11 @@ Next.jsは、メタデータをUIとは別にストリームし、解決され -```tsx title="app/lib/data.ts" highlight={4} switcher +```tsx title="app/lib/data.ts" highlight={5} switcher import { cache } from 'react' import { db } from '@/app/lib/db' -// getPostは2回使用されますが、1回だけ実行されます +// getPostは2回使用されますが、実行は1回のみです export const getPost = cache(async (slug: string) => { const res = await db.query.posts.findFirst({ where: eq(posts.slug, slug) }) return res @@ -152,11 +152,11 @@ export const getPost = cache(async (slug: string) => { -```jsx title="app/lib/data.js" highlight={4} switcher +```jsx title="app/lib/data.js" highlight={5} switcher import { cache } from 'react' import { db } from '@/app/lib/db' -// getPostは2回使用されますが、1回だけ実行されます +// getPostは2回使用されますが、実行は1回のみです export const getPost = cache(async (slug) => { const res = await db.query.posts.findFirst({ where: eq(posts.slug, slug) }) return res @@ -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画像 他の画像形式（`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..aef23acd 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で最初の共有レイアウトを作成します。' --- @@ -7,11 +7,11 @@ description: 'Next.jsで最初の共有レイアウトを作成します。' ## Layouts {#layouts} -レイアウトは、複数のルート間で**共有**されるUIです。ナビゲーション時に、レイアウトは状態を保持し、インタラクティブなままで、再レンダリングされません。レイアウトは[ネスト](#nesting-layouts)することもできます。 +レイアウトは、複数のルート間で**共有**される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を変更できます。 +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)をエクスポートすることで定義できます。 @@ -260,7 +260,7 @@ export default function Page() { > **Good to know**: root レイアウトに``や`<meta>`などの`<head>`タグを手動で追加するべきではありません。代わりに、[Metadata API](/docs/app/api-reference/functions/generate-metadata)を使用してください。これにより、ストリーミングや`<head>`要素の重複排除などの高度な要件が自動的に処理されます。 -利用可能なメタデータオプションについては、[APIリファレンス](/docs/app/api-reference/functions/generate-metadata)で詳細を確認してください。 +利用可能なメタデータオプションの詳細は、[APIリファレンス](/docs/app/api-reference/functions/generate-metadata)で確認できます。 ### アクティブなナビゲーションリンク {#active-nav-links} 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..337707cc 100644 --- a/docs/01-app/03-building-your-application/01-routing/08-route-groups.mdx +++ b/docs/01-app/03-building-your-application/01-routing/08-route-groups.mdx @@ -1,93 +1,27 @@ --- title: 'Route Groups' -description: 'Route Groups を使用して、Next.js アプリケーションを異なるセクションに分割することができます。' +description: 'Route Groupsは、Next.jsアプリケーションを異なるセクションに分割するために使用できます。' --- -`app` ディレクトリ内では、通常入れ子構造のフォルダが URL パスにマッピングされます。しかし、フォルダを **Route Group** としてマークすることで、そのフォルダがルートの URL パスに含まれないようにできます。 +`app`ディレクトリ内では、ネストされたフォルダは通常URLパスにマッピングされます。しかし、フォルダを**Route Group**としてマークすることで、そのフォルダがルートのURLパスに含まれないようにすることができます。 -これにより、URL パスの構造に影響を与えずに、ルートセグメントとプロジェクトファイルを論理的なグループに整理することができます。 +これにより、URLパスの構造に影響を与えることなく、ルートセグメントやプロジェクトファイルを論理的なグループに整理することができます。 -Route groups は以下の用途に役立ちます： +Route Groupsは以下の用途に役立ちます： -- URL パスに影響を与えずにルートをグループ化する例として、サイトのセクションごと、意図ごと、チームごとなどにグループ化する [ルートをグループ化する](#organize-routes-without-affecting-the-url-path) -- 同じルートセグメントレベルで [ネストされたレイアウト](/docs/app/building-your-application/routing/layouts-and-templates) を有効にする： - - [複数の root レイアウトを含む、同一セグメント内で複数のネストされたレイアウトを作成する](#creating-multiple-root-layouts) - - [共通セグメント内のルートのサブセットにレイアウトを追加する](#opting-specific-segments-into-a-layout) -- [共通セグメント内の特定ルートにローディングスケルトンを追加する](#opting-for-loading-skeletons-on-a-specific-route) +- サイトのセクション、意図、チームごとにルートをグループ化する +- 同じルートセグメントレベルでネストされたレイアウトを有効にする： + - 同じセグメント内で複数のネストされたレイアウトを作成する（複数のroot レイアウトを含む） + - 特定のセグメントをレイアウトに選択する +- 特定のルートでローディングスケルトンを選択する ## 規約 {#convention} -Route group は、フォルダ名を括弧で囲むことで作成できます：`(folderName)` - -## 例 {#examples} - -### URL パスに影響を与えずにルートを管理する {#organize-routes-without-affecting-the-url-path} - -URL に影響を与えずにルートを管理するには、関連しているルートをまとめておくためのグループを作成します。括弧内のフォルダは URL から省略されます（例えば、`(marketing)` や `(shop)` など）。 - -<Image - alt="Route Group を使ったルートの整理" - srcLight="/docs/light/route-group-organisation.png" - srcDark="/docs/dark/route-group-organisation.png" - width="1600" - height="930" -/> - -`(marketing)` や `(shop)` 内のルートが同じ URL 階層を共有しているとしても、それぞれのグループ内に `layout.js` ファイルを追加することで異なるレイアウトを作成できます。 - -<Image - alt="複数のレイアウトを持つ Route Group" - srcLight="/docs/light/route-group-multiple-layouts.png" - srcDark="/docs/dark/route-group-multiple-layouts.png" - width="1600" - height="768" -/> - -### 特定のセグメントをレイアウトに選択する {#opting-specific-segments-into-a-layout} - -特定のルートをレイアウトに選択するには、新しい Route Group（例：`(shop)`）を作成し、同じレイアウトを共有するルートをそのグループに移動します（例：`account` と `cart`）。グループ外のルートはレイアウトを共有しません（例：`checkout`）。 - -<Image - alt="オプトインレイアウトを持つ Route Group" - srcLight="/docs/light/route-group-opt-in-layouts.png" - srcDark="/docs/dark/route-group-opt-in-layouts.png" - width="1600" - height="930" -/> - -### 特定ルートにローディングスケルトンを選択する {#opting-for-loading-skeletons-on-a-specific-route} - -`loading.js` ファイルを使って特定のルートに [ローディングスケルトン](/docs/app/building-your-application/routing/loading-ui-and-streaming) を適用するには、新しい Route Group（例：`/(overview)`）を作成し、そのグループ内に `loading.tsx` を移動します。 - -<Image - alt="Route グループ内に loading.tsx と page.tsx が含まれるフォルダ構造" - srcLight="/docs/light/route-group-loading.png" - srcDark="/docs/dark/route-group-loading.png" - width="1600" - height="444" -/> - -これで、`loading.tsx` ファイルはダッシュボード → 概要ページにのみ適用され、他のダッシュボードページには影響を与えずに URL パスの構造も影響しません。 - -### 複数の root レイアウトを作成する {#creating-multiple-root-layouts} - -複数の [root レイアウト](/docs/app/building-your-application/routing/layouts-and-templates#root-layout-required) を作成するには、トップレベルの `layout.js` ファイルを削除し、各 Route Group 内に `layout.js` ファイルを追加します。これは、UI や体験が完全に異なるセクションにアプリケーションを分割するのに便利です。それぞれの root レイアウトに `<html>` と `<body>` タグを追加する必要があります。 - -<Image - alt="複数の root レイアウトを持つ Route Group" - srcLight="/docs/light/route-group-multiple-root-layouts.png" - srcDark="/docs/dark/route-group-multiple-root-layouts.png" - width="1600" - height="687" -/> - -上記の例では、`(marketing)` と `(shop)` はそれぞれ自身の root レイアウトを持っています。 - ---- +Route Groupは、フォルダ名を括弧で囲むことで作成できます：`(folderName)` > **Good to know**: > -> - Route Groups の命名は、組織のためのものであり、それ自体に特別な意味はありません。URL パスには影響を与えません。 -> - Route Group を含むルートは、他のルートと同じ URL パスに解決 **されないようにする必要があります。** 例えば、Route Groups は URL 構造に影響を与えないため、`(marketing)/about/page.js` と `(shop)/about/page.js` はどちらも `/about` に解決してエラーを引き起こします。 -> - 複数の root レイアウトをトップレベルの `layout.js` ファイルなしで使用する場合、ホームの `page.js` ファイルは Route Groups のひとつに定義する必要があります。例えば：`app/(marketing)/page.js`。 -> - **複数の root レイアウト間**をナビゲートすることは、（クライアントサイドのナビゲーションとは対照的に）**完全なページロード** を引き起こします。例えば、`app/(shop)/layout.js` を使用している `/cart` から、`app/(marketing)/layout.js` を使用している `/blog` へナビゲートすると完全なページロードが発生します。これは **複数の root レイアウトにのみ** 適用されます。 +> - Route Groupの命名は、組織化以外に特別な意味を持ちません。URLパスには影響を与えません。 +> - Route Groupを含むルートは、他のルートと同じURLパスに解決される**べきではありません**。例えば、Route GroupはURL構造に影響を与えないため、`(marketing)/about/page.js`と`(shop)/about/page.js`はどちらも`/about`に解決され、エラーを引き起こします。 +> - トップレベルの`layout.js`ファイルなしで複数のroot レイアウトを使用する場合、ホームの`page.js`ファイルはRoute Groupの1つに定義する必要があります。例：`app/(marketing)/page.js`。 +> - **複数のroot レイアウトをまたいで**ナビゲートすると、**フルページロード**が発生します（クライアントサイドのナビゲーションとは異なります）。例えば、`app/(shop)/layout.js`を使用する`/cart`から`app/(marketing)/layout.js`を使用する`/blog`にナビゲートすると、フルページロードが発生します。これは**複数のroot レイアウト**にのみ適用されます。 diff --git a/docs/01-app/03-building-your-application/06-optimizing/14-local-development.mdx b/docs/01-app/03-building-your-application/06-optimizing/14-local-development.mdx index b2949d98..9ba4766f 100644 --- a/docs/01-app/03-building-your-application/06-optimizing/14-local-development.mdx +++ b/docs/01-app/03-building-your-application/06-optimizing/14-local-development.mdx @@ -9,7 +9,7 @@ Next.jsは、優れた開発者体験を提供するように設計されてい `next dev`を使用した開発プロセスは、`next build`や`next start`とは異なります。 -`next dev`は、アプリケーション内のルートを開いたり、ナビゲートしたりする際にコンパイルを行います。これにより、アプリケーション内のすべてのルートがコンパイルされるのを待たずに開発サーバーを開始でき、より高速でメモリ使用量も少なくなります。本番ビルドを実行すると、ファイルの最小化やコンテンツハッシュの作成など、ローカル開発には不要な最適化が適用されます。 +`next dev`は、アプリケーション内のルートを開いたり、ナビゲートしたりする際にコンパイルします。これにより、アプリケーション内のすべてのルートがコンパイルされるのを待たずに開発サーバーを開始でき、より高速でメモリ使用量も少なくなります。本番ビルドを実行すると、ファイルの最小化やコンテンツハッシュの作成など、ローカル開発には不要な最適化が適用されます。 ## ローカル開発のパフォーマンス向上 {#improving-local-dev-performance} @@ -30,7 +30,7 @@ npm install next@latest npm run dev --turbopack ``` -[Turbopackについて詳しく学ぶ](https://nextjs.org/blog/turbopack-for-development-stable)。詳細については、[アップグレードガイド](/docs/app/building-your-application/upgrading)とコードモッドをご覧ください。 +[Turbopackについて詳しくはこちら](https://nextjs.org/blog/turbopack-for-development-stable)。詳細については、[アップグレードガイド](/docs/app/building-your-application/upgrading)とコードモッドをご覧ください。 ### 3. インポートを確認する {#3-check-your-imports} @@ -38,7 +38,7 @@ npm run dev --turbopack ### アイコンライブラリ {#icon-libraries} -`@material-ui/icons`や`react-icons`のようなライブラリは、数千のアイコンをインポートすることがありますが、実際には数個しか使用しないことがあります。必要なアイコンだけをインポートするようにしてください： +`@material-ui/icons`や`react-icons`のようなライブラリは、数千のアイコンをインポートすることがありますが、実際には数個しか使用しないことがあります。必要なアイコンだけをインポートするようにしてください。 ```jsx // これではなく: @@ -51,7 +51,7 @@ import Icon2 from 'react-icons/md/Icon2' `react-icons`のようなライブラリには、多くの異なるアイコンセットが含まれています。1つのセットを選び、そのセットを使用し続けてください。 -例えば、アプリケーションが`react-icons`を使用し、以下のすべてをインポートしている場合： +たとえば、アプリケーションが`react-icons`を使用し、以下のすべてをインポートしている場合： - `pi` (Phosphor Icons) - `md` (Material Design Icons) @@ -64,11 +64,11 @@ import Icon2 from 'react-icons/md/Icon2' 「バレルファイル」は、他のファイルから多くのアイテムをエクスポートするファイルです。これらは、モジュールスコープ内で副作用があるかどうかをインポートを使用して解析する必要があるため、ビルドを遅くする可能性があります。 -可能であれば、特定のファイルから直接インポートするようにしてください。[バレルファイルについて詳しく学ぶ](https://vercel.com/blog/how-we-optimized-package-imports-in-next-js)と、Next.jsにおける組み込みの最適化について学びましょう。 +可能であれば、特定のファイルから直接インポートするようにしてください。[バレルファイルについて詳しくはこちら](https://vercel.com/blog/how-we-optimized-package-imports-in-next-js)とNext.jsの組み込み最適化について学びましょう。 ### パッケージインポートの最適化 {#optimize-package-imports} -Next.jsは特定のパッケージのインポートを自動的に最適化できます。バレルファイルを利用するパッケージを使用している場合は、それらを`next.config.js`に追加してください： +Next.jsは特定のパッケージのインポートを自動的に最適化できます。バレルファイルを利用するパッケージを使用している場合は、それらを`next.config.js`に追加してください。 ```jsx module.exports = { @@ -114,13 +114,13 @@ Tailwind CSSバージョン3.4.8以降では、ビルドを遅くする可能性 カスタムwebpack設定を追加した場合、それがコンパイルを遅くしている可能性があります。 -ローカル開発に本当に必要かどうかを検討してください。特定のツールを本番ビルドのみに含めるか、Turbopackに移行して[loaders](/docs/app/api-reference/config/next-config-js/turbo#supported-loaders)を使用することを検討してください。 +ローカル開発に本当に必要かどうかを検討してください。特定のツールを本番ビルドのみに含めるか、Turbopackに移行して[loaders](/docs/app/api-reference/config/next-config-js/turbopack#supported-loaders)を使用することを検討してください。 ### 6. メモリ使用量の最適化 {#6-optimize-memory-usage} アプリが非常に大きい場合、より多くのメモリが必要になるかもしれません。 -[メモリ使用量の最適化について詳しく学ぶ](/docs/app/building-your-application/optimizing/memory-usage)。 +[メモリ使用量の最適化について詳しくはこちら](/docs/app/building-your-application/optimizing/memory-usage)。 ### 7. Server Componentsとデータフェッチ {#7-server-components-and-data-fetching} @@ -128,13 +128,13 @@ Server Componentsへの変更は、ページ全体を再レンダリングし、 実験的な`serverComponentsHmrCache`オプションを使用すると、ローカル開発中のホットモジュールリプレースメント（HMR）リフレッシュ間でServer Components内の`fetch`レスポンスをキャッシュできます。これにより、応答が高速化され、課金されるAPIコールのコストが削減されます。 -[実験的オプションについて詳しく学ぶ](/docs/app/api-reference/config/next-config-js/serverComponentsHmrCache)。 +[実験的オプションについて詳しくはこちら](/docs/app/api-reference/config/next-config-js/serverComponentsHmrCache)。 ## 問題を見つけるためのツール {#tools-for-finding-problems} ### 詳細なfetchログ {#detailed-fetch-logging} -開発中に何が起こっているのかをより詳細に知るために、このコマンドを使用してください： +開発中に何が起こっているのかをより詳細に確認するには、このコマンドを使用してください： ```bash next dev --verbose @@ -151,4 +151,4 @@ next dev --verbose NEXT_CPU_PROF=1 npm run dev ``` -3. このファイル（プロジェクトのメインフォルダにあります）と`.next/trace`ファイルをGitHubに新しいissueとして共有してください。 +3. このファイル（プロジェクトのメインフォルダにあります）と`.next/trace`ファイルをGitHubで新しいissueとして共有してください。 diff --git a/docs/01-app/03-building-your-application/07-configuring/05-mdx.mdx b/docs/01-app/03-building-your-application/07-configuring/05-mdx.mdx index 1535570f..22cb7647 100644 --- a/docs/01-app/03-building-your-application/07-configuring/05-mdx.mdx +++ b/docs/01-app/03-building-your-application/07-configuring/05-mdx.mdx @@ -4,7 +4,7 @@ nav_title: 'MDX' description: 'MDXを設定し、Next.jsアプリでの使用方法を学びましょう。' --- -{/* このドキュメントの内容はapp routerとpages routerの間で共有されています。Pages Routerに特化した内容を追加するには、`<PagesOnly>Content</PagesOnly>`コンポーネントを使用できます。共有されるコンテンツはコンポーネントでラップしないでください。 */} +{/* このドキュメントの内容はapp routerとpages routerの間で共有されています。Pages Routerに特有のコンテンツを追加するには、`<PagesOnly>Content</PagesOnly>`コンポーネントを使用できます。共有コンテンツはコンポーネントでラップしないでください。 */} [Markdown](https://daringfireball.net/projects/markdown/syntax)は、テキストをフォーマットするための軽量マークアップ言語です。プレーンテキストの構文を使用して書き、それを構造的に有効なHTMLに変換することができます。ウェブサイトやブログのコンテンツを書く際によく使用されます。 @@ -38,7 +38,7 @@ npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx ## `next.config.mjs`の設定 {#configure-next-config-mjs} -プロジェクトのルートにある`next.config.mjs`ファイルを更新して、MDXを使用するように設定します: +プロジェクトのrootにある`next.config.mjs`ファイルを更新して、MDXを使用するように設定します: ```js title="next.config.mjs" import createMDX from '@next/mdx' @@ -62,7 +62,7 @@ export default withMDX(nextConfig) ## `mdx-components.tsx`ファイルの追加 {#add-an-mdx-components-tsx-file} -プロジェクトのルートに`mdx-components.tsx`（または`.js`）ファイルを作成して、グローバルなMDXコンポーネントを定義します。例えば、`pages`や`app`と同じレベル、または該当する場合は`src`内に配置します。 +プロジェクトのrootに`mdx-components.tsx`（または`.js`）ファイルを作成して、グローバルなMDXコンポーネントを定義します。例えば、`pages`や`app`と同じレベル、または該当する場合は`src`内に配置します。 <Tabs> <TabItem value="tsx" label="TypeScript"> @@ -107,7 +107,7 @@ Next.jsのファイルベースのルーティングを使用するか、他の <AppOnly> -App Routerアプリでは、[メタデータ](/docs/app/building-your-application/optimizing/metadata)を使用することも含まれます。 +App Routerアプリでは、[metadata](/docs/app/building-your-application/optimizing/metadata)を使用することも含まれます。 `/app`ディレクトリ内に新しいMDXページを作成します: @@ -136,7 +136,7 @@ App Routerアプリでは、[メタデータ](/docs/app/building-your-applicatio </PagesOnly> -これらのファイル内でMDXを使用し、MDXページ内で直接Reactコンポーネントをインポートすることもできます: +これらのファイル内でMDXを使用し、MDXページ内でReactコンポーネントを直接インポートすることもできます: ```mdx import { MyComponent } from 'my-component' @@ -165,13 +165,13 @@ Checkout my React component: `/app`ディレクトリ内に新しいページを作成し、任意の場所にMDXファイルを作成します: ```txt - my-project - ├── app - │ └── mdx-page + . + ├── app/ + │ └── mdx-page/ │ └── page.(tsx/js) - ├── markdown + ├── markdown/ │ └── welcome.(mdx/md) - |── mdx-components.(tsx/js) + ├── mdx-components.(tsx/js) └── package.json ``` @@ -182,18 +182,18 @@ Checkout my React component: `/pages`ディレクトリ内に新しいページを作成し、任意の場所にMDXファイルを作成します: ```txt - my-project - ├── pages - │ └── mdx-page.(tsx/js) - ├── markdown + . + ├── markdown/ │ └── welcome.(mdx/md) - |── mdx-components.(tsx/js) + ├── pages/ + │ └── mdx-page.(tsx/js) + ├── mdx-components.(tsx/js) └── package.json ``` </PagesOnly> -これらのファイル内でMDXを使用し、MDXページ内で直接Reactコンポーネントをインポートすることもできます: +これらのファイル内でMDXを使用し、MDXページ内でReactコンポーネントを直接インポートすることもできます: <Tabs> <TabItem value="mdx" label="mdx"> @@ -297,7 +297,7 @@ export default function Page() { height="849" /> -[`generateStaticParams`](/docs/app/api-reference/functions/generate-static-params)を使用して、提供されたルートを事前レンダリングできます。`dynamicParams`を`false`に設定すると、`generateStaticParams`で定義されていないルートにアクセスすると404になります。 +[`generateStaticParams`](/docs/app/api-reference/functions/generate-static-params)を使用して、提供されたルートをプリレンダリングできます。`dynamicParams`を`false`に設定すると、`generateStaticParams`で定義されていないルートにアクセスすると404になります。 <Tabs> <TabItem value="tsx" label="TypeScript"> @@ -342,13 +342,13 @@ export const dynamicParams = false </TabItem> </Tabs> -> **Good to know**: インポート時に`.mdx`ファイル拡張子を指定してください。[モジュールパスエイリアス](/docs/app/getting-started/installation#set-up-absolute-imports-and-module-path-aliases)（例: `@/content`）を使用する必要はありませんが、インポートパスを簡素化します。 +> **Good to know**: インポート時に`.mdx`ファイル拡張子を指定してください。[モジュールパスエイリアス](/docs/app/getting-started/installation#set-up-absolute-imports-and-module-path-aliases)（例: `@/content`）を使用する必要はありませんが、インポートパスを簡略化できます。 </AppOnly> ## カスタムスタイルとコンポーネントの使用 {#using-custom-styles-and-components} -MarkdownはレンダリングされるとネイティブのHTML要素にマッピングされます。例えば、次のMarkdownを書くと: +Markdownはレンダリングされると、ネイティブのHTML要素にマッピングされます。例えば、次のMarkdownを書くと: ```md ## This is a heading {#this-is-a-heading} @@ -611,7 +611,7 @@ export default function MDXPage({ children }) { このプラグインは、Markdownのようなソースからのコンテンツブロックにタイポグラフィスタイルを追加するための`prose`クラスを追加します。 -[Tailwind typographyのインストール](https://github.com/tailwindlabs/tailwindcss-typography?tab=readme-ov-file#installation)を行い、[共有レイアウト](#shared-layouts)で使用して、必要な`prose`を追加します。 +[Tailwind typographyをインストール](https://github.com/tailwindlabs/tailwindcss-typography?tab=readme-ov-file#installation)し、[共有レイアウト](#shared-layouts)で使用して、必要な`prose`を追加します。 <AppOnly> @@ -700,13 +700,13 @@ export default function MDXPage({ children }) { ## Frontmatter {#frontmatter} -Frontmatterは、ページに関するデータを保存するために使用できるYAMLのようなキー/値のペアリングです。`@next/mdx`はデフォルトではFrontmatterをサポートしていませんが、MDXコンテンツにFrontmatterを追加するための多くのソリューションがあります。例えば: +Frontmatterは、ページに関するデータを保存するために使用できるYAMLのようなキー/値のペアリングです。`@next/mdx`はデフォルトではfrontmatterをサポートしていませんが、MDXコンテンツにfrontmatterを追加するための多くのソリューションがあります。例えば: - [remark-frontmatter](https://github.com/remarkjs/remark-frontmatter) - [remark-mdx-frontmatter](https://github.com/remcohaszing/remark-mdx-frontmatter) - [gray-matter](https://github.com/jonschlinkert/gray-matter) -`@next/mdx`は、他のJavaScriptコンポーネントと同様にエクスポートを使用することを許可しています: +`@next/mdx`は、他のJavaScriptコンポーネントと同様にエクスポートを使用することを**許可**しています: <Tabs> <TabItem value="mdx" label="mdx"> @@ -790,11 +790,11 @@ export default function Page() { </PagesOnly> -これの一般的な使用例は、MDXのコレクションを反復処理してデータを抽出したい場合です。例えば、すべてのブログ投稿からブログインデックスページを作成することです。Nodeの[`fs`モジュール](https://nodejs.org/api/fs.html)や[globby](https://www.npmjs.com/package/globby)などのパッケージを使用して、投稿のディレクトリを読み取り、メタデータを抽出できます。 +これの一般的な使用例は、MDXのコレクションを反復処理してデータを抽出する場合です。例えば、すべてのブログ投稿からブログインデックスページを作成する場合です。[Nodeの`fs`モジュール](https://nodejs.org/api/fs.html)や[globby](https://www.npmjs.com/package/globby)などのパッケージを使用して、投稿のディレクトリを読み取り、メタデータを抽出できます。 > **Good to know**: > -> - `fs`、`globby`などはサーバーサイドでのみ使用できます。 +> - `fs`、`globby`などの使用はサーバーサイドでのみ可能です。 > - 完全な動作例については、[Portfolio Starter Kit](https://vercel.com/templates/next.js/portfolio-starter-kit)テンプレートを参照してください。 ## remarkとrehypeプラグイン {#remark-and-rehype-plugins} @@ -811,7 +811,7 @@ import createMDX from '@next/mdx' /** @type {import('next').NextConfig} */ const nextConfig = { - // ファイルの.md拡張子を許可 + // ファイルの.mdおよび.mdx拡張子を許可 pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'], // 必要に応じて、他のNext.jsの設定を追加 } @@ -828,7 +828,7 @@ const withMDX = createMDX({ export default withMDX(nextConfig) ``` -### Turbopackでのプラグインの使用 {#using-plugins-with-turbopack} +### Turbopackでプラグインを使用する {#using-plugins-with-turbopack} [Turbopack](/docs/app/api-reference/turbopack)でプラグインを使用するには、最新の`@next/mdx`にアップグレードし、プラグイン名を文字列で指定します: @@ -852,7 +852,7 @@ export default withMDX(nextConfig) > **Good to know**: > -> シリアライズ可能なオプションを持たないremarkとrehypeプラグインは、[Turbopack](/docs/app/api-reference/turbopack)ではまだ使用できません。これは、[JavaScript関数をRustに渡すことができないため](https://github.com/vercel/next.js/issues/71819#issuecomment-2461802968)です。 +> シリアライズ可能なオプションを持たないremarkとrehypeプラグインは、[Turbopack](/docs/app/api-reference/turbopack)ではまだ使用できません。これは[JavaScript関数をRustに渡すことができないため](https://github.com/vercel/next.js/issues/71819#issuecomment-2461802968)です。 ## リモートMDX {#remote-mdx} @@ -952,7 +952,7 @@ export async function getStaticProps() { ## 深掘り: MarkdownをHTMLに変換する方法 {#deep-dive-how-do-you-transform-markdown-into-html} -ReactはMarkdownをネイティブに理解しません。Markdownのプレーンテキストは、まずHTMLに変換する必要があります。これは`remark`と`rehype`で実現できます。 +ReactはネイティブにMarkdownを理解しません。Markdownのプレーンテキストは、まずHTMLに変換する必要があります。これは`remark`と`rehype`を使用して達成できます。 `remark`はMarkdownに関するツールのエコシステムです。`rehype`はHTMLに関する同様のものです。例えば、次のコードスニペットはMarkdownをHTMLに変換します: @@ -979,11 +979,11 @@ async function main() { `remark`と`rehype`のエコシステムには、[シンタックスハイライト](https://github.com/atomiks/rehype-pretty-code)、[見出しのリンク](https://github.com/rehypejs/rehype-autolink-headings)、[目次の生成](https://github.com/remarkjs/remark-toc)などのプラグインがあります。 -上記のように`@next/mdx`を使用する場合、`remark`や`rehype`を直接使用する必要はありません。これらは自動的に処理されます。ここでは、`@next/mdx`パッケージが内部で行っていることをより深く理解するために説明しています。 +上記のように`@next/mdx`を使用する場合、`remark`や`rehype`を直接使用する必要は**ありません**。これは自動的に処理されます。ここでは、`@next/mdx`パッケージが内部で行っていることをより深く理解するために説明しています。 ## RustベースのMDXコンパイラの使用（実験的） {#using-the-rust-based-mdx-compiler-experimental} -Next.jsはRustで書かれた新しいMDXコンパイラをサポートしています。このコンパイラはまだ実験的であり、本番環境での使用は推奨されません。新しいコンパイラを使用するには、`next.config.js`を`withMDX`に渡すときに設定する必要があります: +Next.jsはRustで書かれた新しいMDXコンパイラをサポートしています。このコンパイラはまだ実験的であり、本番環境での使用は推奨されません。新しいコンパイラを使用するには、`withMDX`に渡すときに`next.config.js`を設定する必要があります: ```js title="next.config.js" module.exports = withMDX({ diff --git a/docs/01-app/03-building-your-application/11-upgrading/06-from-create-react-app.mdx b/docs/01-app/03-building-your-application/11-upgrading/06-from-create-react-app.mdx index 411dbf5c..24238c25 100644 --- a/docs/01-app/03-building-your-application/11-upgrading/06-from-create-react-app.mdx +++ b/docs/01-app/03-building-your-application/11-upgrading/06-from-create-react-app.mdx @@ -4,56 +4,54 @@ nav_title: 'CRAからの移行' description: '既存のReactアプリケーションをCreate React AppからNext.jsに移行する方法を学びます。' --- -このガイドは、既存のCreate React App（CRA）サイトをNext.jsに移行するのに役立ちます。 +このガイドでは、既存のCreate React App（CRA）サイトをNext.jsに移行する方法を説明します。 -## なぜ切り替えるのか？ {#why-switch} +## なぜ移行するのか？ {#why-switch} -Create React AppからNext.jsに切り替えたい理由はいくつかあります。 +Create React AppからNext.jsに移行したい理由はいくつかあります： ### 初期ページの読み込み時間が遅い {#slow-initial-page-loading-time} -Create React Appは純粋にクライアントサイドのReactを使用しています。クライアントサイドのみのアプリケーション、別名[シングルページアプリケーション（SPA）](/docs/app/building-your-application/upgrading/single-page-applications)は、初期ページの読み込み時間が遅くなることがよくあります。これはいくつかの理由で発生します。 +Create React Appは純粋にクライアントサイドのReactを使用しています。クライアントサイドのみのアプリケーション、別名[シングルページアプリケーション（SPA）](/docs/app/building-your-application/upgrading/single-page-applications)は、初期ページの読み込み時間が遅くなることがよくあります。これは以下の理由によります： 1. ブラウザは、Reactコードとアプリケーション全体のバンドルがダウンロードされて実行されるのを待つ必要があり、その後にコードがデータをロードするためのリクエストを送信できるようになります。 2. 新しい機能や依存関係を追加するたびに、アプリケーションコードが増加します。 ### 自動コード分割がない {#no-automatic-code-splitting} -前述の読み込み時間の遅さの問題は、コード分割によってある程度緩和できます。しかし、手動でコード分割を試みると、ネットワークウォーターフォールを誤って導入する可能性があります。Next.jsは、自動コード分割とtree-shakingをルーターとビルドパイプラインに組み込んでいます。 +前述の読み込み時間の遅さの問題は、コード分割によってある程度緩和できます。しかし、手動でコード分割を試みると、ネットワークウォーターフォールを意図せずに導入してしまうことがあります。Next.jsは、自動コード分割とtree-shakingをルーターとビルドパイプラインに組み込んでいます。 ### ネットワークウォーターフォール {#network-waterfalls} -パフォーマンスが悪化する一般的な原因は、アプリケーションがデータを取得するためにクライアントとサーバー間で順次リクエストを行うことです。[SPA](/docs/app/building-your-application/upgrading/single-page-applications)でのデータ取得のパターンの1つは、プレースホルダーをレンダリングし、コンポーネントがマウントされた後にデータを取得することです。残念ながら、子コンポーネントは親が自身のデータを読み込むのを完了した後にのみデータを取得し始めることができ、リクエストの「ウォーターフォール」を引き起こします。 +アプリケーションがデータを取得するためにクライアントとサーバー間で順次リクエストを行うと、パフォーマンスが低下することがあります。[SPA](/docs/app/building-your-application/upgrading/single-page-applications)でのデータ取得のパターンの1つは、プレースホルダーをレンダリングし、コンポーネントがマウントされた後にデータを取得することです。残念ながら、子コンポーネントは親が自身のデータを読み込んだ後でしかデータを取得できないため、リクエストの「ウォーターフォール」が発生します。 -Next.jsではクライアントサイドのデータ取得がサポートされていますが、Next.jsではデータ取得をサーバーに移動することもできます。これにより、クライアントとサーバー間のウォーターフォールが完全に排除されることがよくあります。 +Next.jsではクライアントサイドのデータ取得もサポートされていますが、データ取得をサーバーに移動することもできます。これにより、クライアントとサーバー間のウォーターフォールが完全に排除されることがよくあります。 ### 高速で意図的な読み込み状態 {#fast-and-intentional-loading-states} -[React Suspenseを通じたストリーミング](/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense)の組み込みサポートにより、ネットワークウォーターフォールを作成せずに、UIのどの部分を最初にどの順序で読み込むかを定義できます。 - -これにより、読み込みが速く、[レイアウトシフト](https://vercel.com/blog/how-core-web-vitals-affect-seo)を排除するページを構築できます。 +[React Suspenseを通じたストリーミング](/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense)の組み込みサポートにより、UIのどの部分を最初に、どの順序で読み込むかを定義できます。これにより、ネットワークウォーターフォールを作成せずにページを高速に読み込むことができ、[レイアウトシフト](https://vercel.com/blog/how-core-web-vitals-affect-seo)を排除できます。 ### データ取得戦略の選択 {#choose-the-data-fetching-strategy} -ニーズに応じて、Next.jsではページまたはコンポーネントレベルでデータ取得戦略を選択できます。たとえば、CMSからデータを取得し、ブログ投稿をビルド時（SSG）にレンダリングして高速な読み込み速度を実現したり、必要に応じてリクエスト時（SSR）にデータを取得したりできます。 +必要に応じて、Next.jsではページまたはコンポーネントレベルでデータ取得戦略を選択できます。たとえば、CMSからデータを取得し、ビルド時（SSG）にブログ投稿をレンダリングして高速な読み込み速度を実現したり、必要に応じてリクエスト時（SSR）にデータを取得したりできます。 ### ミドルウェア {#middleware} -[Next.js Middleware](/docs/app/building-your-application/routing/middleware)を使用すると、リクエストが完了する前にサーバー上でコードを実行できます。たとえば、認証が必要なページのミドルウェアでユーザーをログインページにリダイレクトすることで、認証されていないコンテンツのフラッシュを回避できます。また、A/Bテスト、実験、[国際化](/docs/app/building-your-application/routing/internationalization)などの機能にも使用できます。 +[Next.js Middleware](/docs/app/building-your-application/routing/middleware)を使用すると、リクエストが完了する前にサーバー上でコードを実行できます。たとえば、認証が必要なページでミドルウェアを使用してユーザーをログインページにリダイレクトすることで、未認証のコンテンツのフラッシュを回避できます。また、A/Bテスト、実験、[国際化](/docs/app/building-your-application/routing/internationalization)などの機能にも使用できます。 ### 組み込みの最適化 {#built-in-optimizations} -[画像](/docs/app/building-your-application/optimizing/images)、[フォント](/docs/app/building-your-application/optimizing/fonts)、および[サードパーティのスクリプト](/docs/app/building-your-application/optimizing/scripts)は、アプリケーションのパフォーマンスに大きな影響を与えることがよくあります。Next.jsには、これらを自動的に最適化するための専門のコンポーネントとAPIが含まれています。 +[画像](/docs/app/building-your-application/optimizing/images)、[フォント](/docs/app/building-your-application/optimizing/fonts)、および[サードパーティスクリプト](/docs/app/building-your-application/optimizing/scripts)は、アプリケーションのパフォーマンスに大きな影響を与えることがあります。Next.jsには、これらを自動的に最適化するための専用コンポーネントとAPIが含まれています。 ## 移行手順 {#migration-steps} -私たちの目標は、できるだけ早く動作するNext.jsアプリケーションを作成し、その後、Next.jsの機能を段階的に採用できるようにすることです。まず、既存のルーターをすぐに置き換えることなく、アプリケーションを純粋なクライアントサイドアプリケーション（[SPA](/docs/app/building-your-application/upgrading/single-page-applications)）として扱います。これにより、複雑さとマージの競合が軽減されます。 +私たちの目標は、できるだけ早く動作するNext.jsアプリケーションを作成し、その後、Next.jsの機能を段階的に採用できるようにすることです。まず、アプリケーションを純粋なクライアントサイドアプリケーション（[SPA](/docs/app/building-your-application/upgrading/single-page-applications)）として扱い、既存のルーターをすぐに置き換えないようにします。これにより、複雑さとマージの競合が軽減されます。 -> **注意**: `package.json`のカスタム`homepage`フィールド、カスタムサービスワーカー、特定のBabel/webpackの調整など、CRAの高度な設定を使用している場合は、Next.jsでこれらの機能を再現または適応するためのヒントについて、このガイドの最後の**追加の考慮事項**セクションを参照してください。 +> **注意**: `package.json`のカスタム`homepage`フィールド、カスタムサービスワーカー、特定のBabel/webpackの調整など、CRAの高度な設定を使用している場合は、このガイドの最後にある**追加の考慮事項**セクションを参照して、これらの機能をNext.jsで再現または適応するためのヒントを確認してください。 ### ステップ1: Next.jsの依存関係をインストールする {#step-1-install-the-next-js-dependency} -既存のプロジェクトにNext.jsをインストールします。 +既存のプロジェクトにNext.jsをインストールします： ```bash title="Terminal" npm install next@latest @@ -74,16 +72,16 @@ const nextConfig: NextConfig = { export default nextConfig ``` -> **注意**: `output: 'export'`を使用すると、静的エクスポートを行っていることを意味します。サーバーサイドの機能（SSRやAPIなど）にはアクセスできません。この行を削除して、Next.jsのサーバー機能を活用できます。 +> **注意**: `output: 'export'`を使用すると、静的エクスポートを行っていることを意味します。サーバーサイドの機能（SSRやAPIなど）にはアクセスできません。この行を削除すると、Next.jsのサーバー機能を活用できます。 -### ステップ3: Root レイアウトを作成する {#step-3-create-the-root-layout} +### ステップ3: root レイアウトを作成する {#step-3-create-the-root-layout} -Next.js [App Router](/docs/app)アプリケーションには、すべてのページをラップする[React Server Component](/docs/app/building-your-application/rendering/server-components)である[root レイアウト](/docs/app/building-your-application/routing/layouts-and-templates#root-layout-required)ファイルが含まれている必要があります。 +Next.js [App Router](/docs/app)アプリケーションには、すべてのページをラップする[React Server Component](/docs/app/building-your-application/rendering/server-components)である[ルートレイアウト](/docs/app/building-your-application/routing/layouts-and-templates#root-layout-required)ファイルが必要です。 -CRAアプリケーションでのroot レイアウトファイルに最も近いものは、`<html>`、`<head>`、および`<body>`タグを含む`public/index.html`です。 +CRAアプリケーションでのルートレイアウトファイルに最も近いものは、`<html>`、`<head>`、および`<body>`タグを含む`public/index.html`です。 -1. `src`ディレクトリ内に新しい`app`ディレクトリを作成します（または、`app`をルートに配置する場合はプロジェクトのルートに作成します）。 -2. `app`ディレクトリ内に`layout.tsx`（または`layout.js`）ファイルを作成します。 +1. `src`ディレクトリ内に新しい`app`ディレクトリを作成します（または、`app`をルートに配置する場合はプロジェクトルートに作成します）。 +2. `app`ディレクトリ内に`layout.tsx`（または`layout.js`）ファイルを作成します： <Tabs> <TabItem value="tsx" label="TypeScript"> @@ -163,11 +161,11 @@ export default function RootLayout({ children }) { </TabItem> </Tabs> -> **Good to know**: Next.jsは、CRAの`public/manifest.json`、追加のアイコン、および[テスト設定](/docs/app/building-your-application/testing)をデフォルトで無視します。これらが必要な場合、Next.jsは[Metadata API](/docs/app/building-your-application/optimizing/metadata)と[Testing](/docs/app/building-your-application/testing)のセットアップでサポートしています。 +> **Good to know**: Next.jsはデフォルトでCRAの`public/manifest.json`、追加のアイコン、および[テスト設定](/docs/app/building-your-application/testing)を無視します。これらが必要な場合、Next.jsには[Metadata API](/docs/app/building-your-application/optimizing/metadata)と[Testing](/docs/app/building-your-application/testing)のセットアップがサポートされています。 ### ステップ4: メタデータ {#step-4-metadata} -Next.jsは`<meta charset="UTF-8" />`と`<meta name="viewport" content="width=device-width, initial-scale=1" />`タグを自動的に含めるため、`<head>`から削除できます。 +Next.jsは自動的に`<meta charset="UTF-8" />`と`<meta name="viewport" content="width=device-width, initial-scale=1" />`タグを含めるため、`<head>`からこれらを削除できます： <Tabs> <TabItem value="tsx" label="TypeScript"> @@ -216,7 +214,7 @@ export default function RootLayout({ children }) { </TabItem> </Tabs> -`favicon.ico`、`icon.png`、`robots.txt`などの[メタデータファイル](/docs/app/building-your-application/optimizing/metadata#file-based-metadata)は、`app`ディレクトリのトップレベルに配置されている限り、アプリケーションの`<head>`タグに自動的に追加されます。すべての[サポートされているファイル](/docs/app/building-your-application/optimizing/metadata#file-based-metadata)を`app`ディレクトリに移動した後、それらの`<link>`タグを安全に削除できます。 +`favicon.ico`、`icon.png`、`robots.txt`などの[メタデータファイル](/docs/app/building-your-application/optimizing/metadata#file-based-metadata)は、`app`ディレクトリのトップレベルに配置されている限り、自動的にアプリケーションの`<head>`タグに追加されます。すべての[サポートされているファイル](/docs/app/building-your-application/optimizing/metadata#file-based-metadata)を`app`ディレクトリに移動した後、`<link>`タグを安全に削除できます： <Tabs> <TabItem value="tsx" label="TypeScript"> @@ -263,7 +261,7 @@ export default function RootLayout({ children }) { </TabItem> </Tabs> -最後に、Next.jsは[Metadata API](/docs/app/building-your-application/optimizing/metadata)を使用して最後の`<head>`タグを管理できます。最終的なメタデータ情報をエクスポートされた[`metadata`オブジェクト](/docs/app/api-reference/functions/generate-metadata#metadata-object)に移動します。 +最後に、Next.jsは[Metadata API](/docs/app/building-your-application/optimizing/metadata)を使用して最後の`<head>`タグを管理できます。最終的なメタデータ情報をエクスポートされた[`metadata`オブジェクト](/docs/app/api-reference/functions/generate-metadata#metadata-object)に移動します： <Tabs> <TabItem value="tsx" label="TypeScript"> @@ -314,13 +312,13 @@ export default function RootLayout({ children }) { </TabItem> </Tabs> -上記の変更により、`index.html`ですべてを宣言することから、フレームワークに組み込まれたNext.jsの規約ベースのアプローチ（[Metadata API](/docs/app/building-your-application/optimizing/metadata)）を使用するようにシフトしました。このアプローチにより、ページのSEOとWebの共有性をより簡単に向上させることができます。 +上記の変更により、`index.html`にすべてを宣言する方法から、フレームワークに組み込まれたNext.jsの規約ベースのアプローチ（[Metadata API](/docs/app/building-your-application/optimizing/metadata)）を使用する方法に移行しました。このアプローチにより、ページのSEOとWebの共有性をより簡単に向上させることができます。 ### ステップ5: スタイル {#step-5-styles} -CRAと同様に、Next.jsは[CSSモジュール](/docs/app/building-your-application/styling/css#css-modules)を標準でサポートしています。また、[グローバルCSSのインポート](/docs/app/building-your-application/styling/css#global-styles)もサポートしています。 +CRAと同様に、Next.jsは[CSSモジュール](/docs/app/building-your-application/styling/css#css-modules)をサポートしています。また、[グローバルCSSインポート](/docs/app/building-your-application/styling/css#global-styles)もサポートしています。 -グローバルCSSファイルがある場合は、`app/layout.tsx`にインポートします。 +グローバルCSSファイルがある場合は、`app/layout.tsx`にインポートします： <Tabs> <TabItem value="tsx" label="TypeScript"> @@ -353,11 +351,11 @@ export default function RootLayout({ Tailwind CSSを使用している場合は、[インストールドキュメント](/docs/app/building-your-application/styling/tailwind-css)を参照してください。 -### ステップ6: エントリーポイントページを作成する {#step-6-create-the-entrypoint-page} +### ステップ6: エントリポイントページを作成する {#step-6-create-the-entrypoint-page} -Create React Appは`src/index.tsx`（または`index.js`）をエントリーポイントとして使用します。Next.js（App Router）では、`app`ディレクトリ内の各フォルダーがルートに対応し、各フォルダーには`page.tsx`が必要です。 +Create React Appは`src/index.tsx`（または`index.js`）をエントリポイントとして使用します。Next.js（App Router）では、`app`ディレクトリ内の各フォルダがルートに対応し、各フォルダには`page.tsx`が必要です。 -アプリをSPAとして保持し、**すべて**のルートをインターセプトしたいので、[optional catch-all route](/docs/app/building-your-application/routing/dynamic-routes#optional-catch-all-segments)を使用します。 +アプリをSPAとして保持し、**すべて**のルートをインターセプトしたいので、[オプションのcatch-allルート](/docs/app/building-your-application/routing/dynamic-routes#optional-catch-all-segments)を使用します。 1. **`app`内に`[[...slug]]`ディレクトリを作成します。** @@ -368,7 +366,7 @@ app ┣ layout.tsx ``` -2. **`page.tsx`に次の内容を追加します。** +2. **`page.tsx`に以下を追加します**： <Tabs> <TabItem value="tsx" label="TypeScript"> @@ -379,7 +377,7 @@ export function generateStaticParams() { } export default function Page() { - return '...' // 後で更新します + return '...' // これを更新します } ``` @@ -392,20 +390,20 @@ export function generateStaticParams() { } export default function Page() { - return '...' // 後で更新します + return '...' // これを更新します } ``` </TabItem> </Tabs> -これはNext.jsに、空のスラッグ（`/`）に対して単一のルートを生成するように指示し、**すべて**のルートを同じページにマッピングします。このページは[Server Component](/docs/app/building-your-application/rendering/server-components)であり、静的HTMLにプリレンダリングされます。 +これはNext.jsに、空のスラッグ（`/`）に対して単一のルートを生成するよう指示し、**すべて**のルートを同じページにマッピングします。このページは[Server Component](/docs/app/building-your-application/rendering/server-components)であり、静的HTMLにプリレンダリングされます。 -### ステップ7: クライアント専用のエントリーポイントを追加する {#step-7-add-a-client-only-entrypoint} +### ステップ7: クライアント専用のエントリポイントを追加する {#step-7-add-a-client-only-entrypoint} -次に、CRAのroot Appコンポーネントを[Client Component](/docs/app/building-your-application/rendering/client-components)内に埋め込み、すべてのロジックをクライアントサイドに保持します。Next.jsを初めて使用する場合、クライアントコンポーネント（デフォルトでは）はまだサーバーでプリレンダリングされていることを知っておく価値があります。クライアントサイドのJavaScriptを実行する追加の機能を持っていると考えることができます。 +次に、CRAのルートAppコンポーネントを[Client Component](/docs/app/building-your-application/rendering/client-components)内に埋め込み、すべてのロジックをクライアントサイドに保持します。Next.jsを初めて使用する場合、クライアントコンポーネント（デフォルトでは）もサーバーでプリレンダリングされることを知っておくと良いでしょう。クライアントサイドのJavaScriptを実行する追加の機能を持っていると考えることができます。 -`app/[[...slug]]/`に`client.tsx`（または`client.js`）を作成します。 +`app/[[...slug]]/`に`client.tsx`（または`client.js`）を作成します： <Tabs> <TabItem value="tsx" label="TypeScript"> @@ -443,7 +441,7 @@ export function ClientOnly() { - `'use client'`ディレクティブは、このファイルを**Client Component**にします。 - `dynamic`インポートと`ssr: false`は、`<App />`コンポーネントのサーバーサイドレンダリングを無効にし、純粋にクライアント専用（SPA）にします。 -次に、`page.tsx`（または`page.js`）を更新して新しいコンポーネントを使用します。 +次に、`page.tsx`（または`page.js`）を更新して新しいコンポーネントを使用します： <Tabs> <TabItem value="tsx" label="TypeScript"> @@ -480,7 +478,7 @@ export default function Page() { ### ステップ8: 静的画像インポートを更新する {#step-8-update-static-image-imports} -CRAでは、画像ファイルをインポートすると、その公開URLが文字列として返されます。 +CRAでは、画像ファイルをインポートすると、その公開URLが文字列として返されます： ```tsx import image from './img.png' @@ -492,11 +490,11 @@ export default function App() { Next.jsでは、静的画像インポートはオブジェクトを返します。このオブジェクトはNext.jsの[`<Image>`コンポーネント](/docs/app/api-reference/components/image)で直接使用することができ、または既存の`<img>`タグでオブジェクトの`src`プロパティを使用することができます。 -`<Image>`コンポーネントには[自動画像最適化](/docs/app/building-your-application/optimizing/images)の追加の利点があります。`<Image>`コンポーネントは、画像の寸法に基づいて結果の`<img>`の`width`と`height`属性を自動的に設定します。これにより、画像が読み込まれるときのレイアウトシフトが防止されます。ただし、アプリに寸法の一方のみがスタイルされ、他方が`auto`にスタイルされていない画像が含まれている場合、問題が発生する可能性があります。`auto`にスタイルされていない場合、寸法は`<img>`の寸法属性の値にデフォルト設定され、画像が歪んで表示される可能性があります。 +`<Image>`コンポーネントには[自動画像最適化](/docs/app/building-your-application/optimizing/images)の利点があります。`<Image>`コンポーネントは、画像の寸法に基づいて結果の`<img>`の`width`と`height`属性を自動的に設定します。これにより、画像が読み込まれる際のレイアウトシフトを防ぎます。ただし、アプリに寸法の一方のみがスタイル設定され、他方が`auto`に設定されていない画像が含まれている場合、問題が発生する可能性があります。`auto`に設定されていない場合、寸法は`<img>`の寸法属性の値にデフォルト設定され、画像が歪んで表示される可能性があります。 -`<img>`タグを保持することで、アプリケーションの変更を減らし、上記の問題を防ぐことができます。その後、[ローダーを設定する](/docs/app/building-your-application/optimizing/images#loaders)ことで画像を最適化するために`<Image>`コンポーネントに移行するか、または自動画像最適化を備えたデフォルトのNext.jsサーバーに移行することができます。 +`<img>`タグを保持することで、アプリケーションの変更量を減らし、上記の問題を防ぐことができます。その後、[ローダーを設定する](/docs/app/building-your-application/optimizing/images#loaders)ことで画像を最適化するために`<Image>`コンポーネントに移行するか、または自動画像最適化を備えたデフォルトのNext.jsサーバーに移行することができます。 -**`/public`からインポートされた画像の絶対インポートパスを相対インポートに変換します。** +**`/public`からインポートされた画像の絶対インポートパスを相対インポートに変換します：** ```tsx // 変更前 @@ -506,7 +504,7 @@ import logo from '/logo.png' import logo from '../public/logo.png' ``` -**画像オブジェクト全体ではなく、画像の`src`プロパティを`<img>`タグに渡します。** +**画像オブジェクト全体ではなく、画像の`src`プロパティを`<img>`タグに渡します：** ```tsx // 変更前 @@ -518,7 +516,7 @@ import logo from '../public/logo.png' または、ファイル名に基づいて画像アセットの公開URLを参照することもできます。たとえば、`public/logo.png`はアプリケーションの`/logo.png`で画像を提供し、これが`src`値になります。 -> **警告:** TypeScriptを使用している場合、`src`プロパティにアクセスするときに型エラーが発生する可能性があります。これを修正するには、`tsconfig.json`ファイルの[`include`配列](https://www.typescriptlang.org/tsconfig#include)に`next-env.d.ts`を追加する必要があります。Next.jsは、ステップ9でアプリケーションを実行するときにこのファイルを自動的に生成します。 +> **警告**: TypeScriptを使用している場合、`src`プロパティにアクセスすると型エラーが発生する可能性があります。これを修正するには、`tsconfig.json`ファイルの[`include`配列](https://www.typescriptlang.org/tsconfig#include)に`next-env.d.ts`を追加する必要があります。Next.jsは、ステップ9でアプリケーションを実行するときにこのファイルを自動的に生成します。 ### ステップ9: 環境変数を移行する {#step-9-migrate-environment-variables} @@ -528,7 +526,7 @@ Next.jsはCRAと同様に[環境変数](/docs/app/building-your-application/conf ### ステップ10: `package.json`のスクリプトを更新する {#step-10-update-scripts-in-package-json} -`package.json`のスクリプトをNext.jsのコマンドに更新します。また、`.next`と`next-env.d.ts`を`.gitignore`に追加します。 +`package.json`のスクリプトをNext.jsのコマンドに更新します。また、`.next`と`next-env.d.ts`を`.gitignore`に追加します： ```json title="package.json" { @@ -546,29 +544,29 @@ Next.jsはCRAと同様に[環境変数](/docs/app/building-your-application/conf next-env.d.ts ``` -次のコマンドを実行できます。 +次のコマンドを実行できます： ```bash npm run dev ``` -[http://localhost:3000](http://localhost:3000)を開きます。Next.js（SPAモード）でアプリケーションが実行されているのが確認できるはずです。 +[http://localhost:3000](http://localhost:3000)を開きます。Next.jsでアプリケーションが（SPAモードで）実行されているのが確認できるはずです。 ### ステップ11: クリーンアップ {#step-11-clean-up} -Create React Appに特有のアーティファクトを削除できます。 +Create React Appに特有のアーティファクトを削除できます： - `public/index.html` - `src/index.tsx` - `src/react-app-env.d.ts` - `reportWebVitals`のセットアップ -- `react-scripts`の依存関係（`package.json`からアンインストールします） +- `react-scripts`の依存関係（`package.json`からアンインストール） ## 追加の考慮事項 {#additional-considerations} ### CRAでカスタム`homepage`を使用する {#using-a-custom-homepage-in-cra} -CRAの`package.json`で`homepage`フィールドを使用してアプリを特定のサブパスで提供していた場合、Next.jsの[`basePath`設定](/docs/app/api-reference/config/next-config-js/basePath)を使用して`next.config.ts`でそれを再現できます。 +CRAの`package.json`で`homepage`フィールドを使用してアプリを特定のサブパスで提供していた場合、Next.jsの`next.config.ts`で[`basePath`設定](/docs/app/api-reference/config/next-config-js/basePath)を使用してそれを再現できます： ```ts title="next.config.ts" import { NextConfig } from 'next' @@ -587,7 +585,7 @@ CRAのサービスワーカー（例：`create-react-app`の`serviceWorker.js` ### APIリクエストのプロキシ {#proxying-api-requests} -CRAアプリが`package.json`の`proxy`フィールドを使用してバックエンドサーバーへのリクエストを転送していた場合、`next.config.ts`で[Next.jsのリライト](/docs/app/api-reference/config/next-config-js/rewrites)を使用してこれを再現できます。 +CRAアプリで`package.json`の`proxy`フィールドを使用してバックエンドサーバーへのリクエストを転送していた場合、`next.config.ts`で[Next.jsのリライト](/docs/app/api-reference/config/next-config-js/rewrites)を使用してこれを再現できます： ```ts title="next.config.ts" import { NextConfig } from 'next' @@ -606,7 +604,7 @@ const nextConfig: NextConfig = { ### カスタムWebpack / Babel設定 {#custom-webpack-babel-config} -CRAでカスタムのwebpackまたはBabel設定を持っていた場合、`next.config.ts`でNext.jsの設定を拡張できます。 +CRAでカスタムのwebpackまたはBabel設定を持っていた場合、`next.config.ts`でNext.jsの設定を拡張できます： ```ts title="next.config.ts" import { NextConfig } from 'next' @@ -625,7 +623,7 @@ export default nextConfig ### TypeScriptのセットアップ {#typescript-setup} -Next.jsは`tsconfig.json`がある場合、自動的にTypeScriptをセットアップします。`tsconfig.json`の`include`配列に`next-env.d.ts`がリストされていることを確認してください。 +Next.jsは`tsconfig.json`がある場合、自動的にTypeScriptをセットアップします。`tsconfig.json`の`include`配列に`next-env.d.ts`がリストされていることを確認してください： ```json { @@ -635,7 +633,7 @@ Next.jsは`tsconfig.json`がある場合、自動的にTypeScriptをセットア ## バンドラーの互換性 {#bundler-compatibility} -Create React AppとNext.jsの両方がデフォルトでwebpackをバンドリングに使用します。Next.jsはまた、ローカル開発を高速化するために[Turbopack](/docs/app/api-reference/config/next-config-js/turbo)を提供しています。 +Create React AppとNext.jsの両方はデフォルトでwebpackをバンドリングに使用します。Next.jsはまた、ローカル開発をより高速にするための[Turbopack](/docs/app/api-reference/config/next-config-js/turbopack)を提供しています： ```bash next dev --turbopack @@ -645,15 +643,15 @@ CRAから高度なwebpack設定を移行する必要がある場合は、[カス ## 次のステップ {#next-steps} -すべてが正常に動作した場合、現在、シングルページアプリケーションとして動作するNext.jsアプリケーションがあります。まだNext.jsのサーバーサイドレンダリングやファイルベースのルーティングなどの機能を活用していませんが、段階的に行うことができます。 +すべてが正常に動作した場合、現在、シングルページアプリケーションとして動作するNext.jsアプリケーションがあります。まだNext.jsの機能（サーバーサイドレンダリングやファイルベースのルーティングなど）を活用していませんが、これらを段階的に行うことができます： -- **React Routerから**[Next.js App Router](/docs/app/building-your-application/routing)に移行して、以下を実現します。 +- **React Routerから移行**して、以下のために[Next.js App Router](/docs/app/building-your-application/routing)を使用します： - 自動コード分割 - [ストリーミングサーバーレンダリング](/docs/app/building-your-application/routing/loading-ui-and-streaming) - [React Server Components](/docs/app/building-your-application/rendering/server-components) -- **画像を最適化**するために[`<Image>`コンポーネント](/docs/app/building-your-application/optimizing/images)を使用します。 -- **フォントを最適化**するために[`next/font`](/docs/app/building-your-application/optimizing/fonts)を使用します。 -- **サードパーティのスクリプトを最適化**するために[`<Script>`コンポーネント](/docs/app/building-your-application/optimizing/scripts)を使用します。 -- **ESLintを有効化**して、Next.js推奨ルールを使用し、`npx next lint`を実行してプロジェクトのニーズに合わせて設定します。 +- [`<Image>`コンポーネント](/docs/app/building-your-application/optimizing/images)で**画像を最適化**する +- [`next/font`](/docs/app/building-your-application/optimizing/fonts)で**フォントを最適化**する +- [`<Script>`コンポーネント](/docs/app/building-your-application/optimizing/scripts)で**サードパーティスクリプトを最適化**する +- `npx next lint`を実行してNext.js推奨ルールを有効にし、プロジェクトのニーズに合わせて設定することで**ESLintを有効にする** -> **注意**: 静的エクスポート（`output: 'export'`）を使用すると、`useParams`フックや他のサーバー機能が[現在サポートされていません](https://github.com/vercel/next.js/issues/54393)。Next.jsのすべての機能を使用するには、`next.config.ts`から`output: 'export'`を削除してください。 +> **注意**: 静的エクスポート（`output: 'export'`）を使用すると、`useParams`フックやその他のサーバー機能が[現在サポートされていません](https://github.com/vercel/next.js/issues/54393)。Next.jsのすべての機能を使用するには、`next.config.ts`から`output: 'export'`を削除してください。 diff --git a/docs/01-app/04-deep-dive/index.mdx b/docs/01-app/04-deep-dive/index.mdx new file mode 100644 index 00000000..055382fc --- /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 89% 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..da1480ec 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} @@ -103,9 +103,9 @@ const { pending } = useLinkStatus() ### 新しいクエリパラメータでのナビゲーション時のユーザーエクスペリエンスの向上 {#improving-the-user-experience-when-navigating-with-new-query-parameters} -この例では、カテゴリ間のナビゲーションがクエリ文字列（例：?category=books）を更新します。しかし、ページが応答しないように見えることがあります。これは、`<PageSkeleton />`フォールバックが既存のコンテンツを置き換えないためです（[不要な読み込みインジケーターの防止](https://react.dev/reference/react/useTransition#preventing-unwanted-loading-indicators)を参照）。 +この例では、カテゴリ間のナビゲーションがクエリ文字列（例：?category=books）を更新します。しかし、ページが応答しないように見えることがあります。これは、`<PageSkeleton />`フォールバックが既存のコンテンツを置き換えないためです（詳細は[不要な読み込みインジケーターの防止](https://react.dev/reference/react/useTransition#preventing-unwanted-loading-indicators)を参照してください）。 -`useLinkStatus`フックを使用して、アクティブなリンクの横に軽量な読み込みインジケーターをレンダリングし、データがフェッチされている間にユーザーに即時のフィードバックを提供できます。 +`useLinkStatus`フックを使用して、アクティブなリンクの横に軽量な読み込みインジケーターをレンダリングし、データが取得されている間、ユーザーに即時のフィードバックを提供できます。 <Tabs> <TabItem value="tsx" label="TypeScript"> @@ -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/turbopack.mdx similarity index 54% rename from docs/01-app/04-api-reference/05-config/01-next-config-js/turbo.mdx rename to docs/01-app/05-api-reference/05-config/01-next-config-js/turbopack.mdx index 9767bd22..e870ac2e 100644 --- a/docs/01-app/04-api-reference/05-config/01-next-config-js/turbo.mdx +++ b/docs/01-app/05-api-reference/05-config/01-next-config-js/turbopack.mdx @@ -1,12 +1,11 @@ --- -title: 'turbo' -description: 'Turbopack固有のオプションでNext.jsを設定する' -version: 'experimental' +title: 'turbopack' +description: 'Next.jsをTurbopack固有のオプションで設定する' --- {/* このドキュメントの内容はapp routerとpages routerの間で共有されています。Pages Routerに特有の内容を追加するには、`<PagesOnly>Content</PagesOnly>`コンポーネントを使用できます。共有される内容はコンポーネントでラップしないでください。 */} -`turbo`オプションを使用すると、さまざまなファイルを変換し、モジュールの解決方法を変更するために[Turbopack](/docs/app/api-reference/turbopack)をカスタマイズできます。 +`turbopack`オプションを使用すると、さまざまなファイルを変換し、モジュールの解決方法を変更するために[Turbopack](/docs/app/api-reference/turbopack)をカスタマイズできます。 <Tabs> <TabItem value="ts" label="TypeScript"> @@ -15,10 +14,8 @@ version: 'experimental' import type { NextConfig } from 'next' const nextConfig: NextConfig = { - experimental: { - turbo: { - // ... - }, + turbopack: { + // ... }, } @@ -31,10 +28,8 @@ export default nextConfig ```js title="next.config.js" switcher /** @type {import('next').NextConfig} */ const nextConfig = { - experimental: { - turbo: { - // ... - }, + turbopack: { + // ... }, } @@ -48,24 +43,22 @@ module.exports = nextConfig > > - Next.jsのTurbopackは、組み込み機能に対してローダーやローダー設定を必要としません。TurbopackはCSSと最新のJavaScriptのコンパイルをサポートしているため、`@babel/preset-env`を使用している場合、`css-loader`、`postcss-loader`、`babel-loader`は不要です。 -## リファレンス {#reference} +## 参照 {#reference} ### オプション {#options} -`turbo`設定で利用可能なオプションは次のとおりです： +`turbopack`設定で利用可能なオプションは次のとおりです： | オプション | 説明 | | ------------------- | -------------------------------------------------------------------------------- | +| `root` | アプリケーションのrootディレクトリを設定します。絶対パスである必要があります。 | | `rules` | Turbopackを使用する際に適用されるサポートされているwebpackローダーのリストです。 | -| `resolveAlias` | エイリアス化されたインポートをモジュールにマッピングして、代わりにロードします。 | +| `resolveAlias` | エイリアスされたインポートをモジュールにマッピングして、代わりにロードします。 | | `resolveExtensions` | ファイルをインポートする際に解決する拡張子のリストです。 | -| `moduleIdStrategy` | モジュールIDを割り当てます。 | -| `treeShaking` | Turbopackの開発サーバーとビルドのためのtree shakingを有効にします。 | -| `memoryLimit` | turboのターゲットメモリ制限（バイト単位）です。 | ### サポートされているローダー {#supported-loaders} -次のローダーは、Turbopackのwebpackローダー実装で動作することが確認されています： +Turbopackのwebpackローダー実装で動作することが確認されているローダーは次のとおりです： - [`babel-loader`](https://www.npmjs.com/package/babel-loader) - [`@svgr/webpack`](https://www.npmjs.com/package/@svgr/webpack) @@ -77,13 +70,36 @@ module.exports = nextConfig ## 例 {#examples} +### rootディレクトリ {#root-directory} + +Turbopackはrootディレクトリを使用してモジュールを解決します。プロジェクトのroot外のファイルは解決されません。 + +Next.jsはプロジェクトのrootディレクトリを自動的に検出します。以下のファイルのいずれかを探すことで行います： + +- `pnpm-lock.yaml` +- `package-lock.json` +- `yarn.lock` +- `bun.lock` +- `bun.lockb` + +異なるプロジェクト構造を持っている場合、たとえばワークスペースを使用していない場合は、`root`オプションを手動で設定できます： + +```js title="next.config.js" +const path = require('path') +module.exports = { + turbopack: { + root: path.join(__dirname, '..'), + }, +} +``` + ### webpackローダーの設定 {#configuring-webpack-loaders} -組み込みのサポートを超えるローダーが必要な場合、多くのwebpackローダーはすでにTurbopackと連携しています。現在、いくつかの制限があります： +組み込みのサポートを超えるローダーサポートが必要な場合、多くのwebpackローダーはすでにTurbopackと連携しています。現在、いくつかの制限があります： - webpackローダーAPIのコアサブセットのみが実装されています。現在、一部の人気のあるローダーに対して十分なカバレッジがあり、将来的にAPIサポートを拡大する予定です。 - JavaScriptコードを返すローダーのみがサポートされています。スタイルシートや画像のようなファイルを変換するローダーは現在サポートされていません。 -- webpackローダーに渡されるオプションは、プレーンなJavaScriptプリミティブ、オブジェクト、および配列でなければなりません。たとえば、`require()`プラグインモジュールをオプション値として渡すことはできません。 +- webpackローダーに渡されるオプションは、純粋なJavaScriptプリミティブ、オブジェクト、および配列でなければなりません。たとえば、`require()`プラグインモジュールをオプション値として渡すことはできません。 ローダーを設定するには、インストールしたローダーの名前と任意のオプションを`next.config.js`に追加し、ファイル拡張子をローダーのリストにマッピングします。 @@ -91,20 +107,18 @@ module.exports = nextConfig ```js title="next.config.js" module.exports = { - experimental: { - turbo: { - rules: { - '*.svg': { - loaders: ['@svgr/webpack'], - as: '*.js', - }, + turbopack: { + rules: { + '*.svg': { + loaders: ['@svgr/webpack'], + as: '*.js', }, }, }, } ``` -> **Good to know**: Next.jsバージョン13.4.4以前では、`turbo.rules`は`turbo.loaders`と呼ばれ、`.mdx`のようなファイル拡張子のみを受け入れていました。 +> **Good to know**: Next.jsバージョン13.4.4以前では、`turbo.rules`は`turbo.loaders`と呼ばれ、`*.mdx`の代わりに`.mdx`のようなファイル拡張子のみを受け入れていました。 ### エイリアスの解決 {#resolving-aliases} @@ -114,12 +128,10 @@ Turbopackは、webpackの[`resolve.alias`](https://webpack.js.org/configuration/ ```js title="next.config.js" module.exports = { - experimental: { - turbo: { - resolveAlias: { - underscore: 'lodash', - mocha: { browser: 'mocha/browser-entry.js' }, - }, + turbopack: { + resolveAlias: { + underscore: 'lodash', + mocha: { browser: 'mocha/browser-entry.js' }, }, }, } @@ -127,59 +139,29 @@ module.exports = { これは、`underscore`パッケージのインポートを`lodash`パッケージにエイリアスします。つまり、`import underscore from 'underscore'`は`underscore`の代わりに`lodash`モジュールをロードします。 -Turbopackは、Node.jsの[条件付きエクスポート](https://nodejs.org/docs/latest-v18.x/api/packages.html#conditional-exports)に似た条件付きエイリアスもサポートしています。現在、`browser`条件のみがサポートされています。上記の例では、Turbopackがブラウザ環境をターゲットにする場合、`mocha`モジュールのインポートは`mocha/browser-entry.js`にエイリアスされます。 +Turbopackは、Node.jsの[条件付きエクスポート](https://nodejs.org/docs/latest-v18.x/api/packages.html#conditional-exports)に似た条件付きエイリアスもこのフィールドを通じてサポートしています。現在、`browser`条件のみがサポートされています。上記の例では、Turbopackがブラウザ環境をターゲットにする場合、`mocha`モジュールのインポートは`mocha/browser-entry.js`にエイリアスされます。 ### カスタム拡張子の解決 {#resolving-custom-extensions} Turbopackは、webpackの[`resolve.extensions`](https://webpack.js.org/configuration/resolve/#resolveextensions)設定に似たカスタム拡張子でモジュールを解決するように設定できます。 -解決する拡張子を設定するには、`next.config.js`の`resolveExtensions`フィールドを使用します： +拡張子を解決するには、`next.config.js`の`resolveExtensions`フィールドを使用します： ```js title="next.config.js" module.exports = { - experimental: { - turbo: { - resolveExtensions: [ - '.mdx', - '.tsx', - '.ts', - '.jsx', - '.js', - '.mjs', - '.json', - ], - }, + turbopack: { + resolveExtensions: ['.mdx', '.tsx', '.ts', '.jsx', '.js', '.mjs', '.json'], }, } ``` これにより、元の解決拡張子が提供されたリストで上書きされます。デフォルトの拡張子を含めることを忘れないでください。 -webpackからTurbopackへのアプリの移行方法についての詳細とガイダンスは、[Turbopackのwebpack互換性に関するドキュメント](https://turbo.build/pack/docs/migrating-from-webpack)を参照してください。 - -### モジュールIDの割り当て {#assigning-module-ids} - -Turbopackは現在、モジュールIDを割り当てるための2つの戦略をサポートしています： - -- `'named'`は、モジュールのパスと機能に基づいて読みやすいモジュールIDを割り当てます。 -- `'deterministic'`は、小さなハッシュ化された数値のモジュールIDを割り当て、ビルド間でほぼ一貫しているため、長期的なキャッシュに役立ちます。 - -設定されていない場合、Turbopackは開発ビルドには`'named'`を、プロダクションビルドには`'deterministic'`を使用します。 - -モジュールID戦略を設定するには、`next.config.js`の`moduleIdStrategy`フィールドを使用します： - -```js title="next.config.js" -module.exports = { - experimental: { - turbo: { - moduleIdStrategy: 'deterministic', - }, - }, -} -``` +webpackからTurbopackにアプリを移行する方法についての詳細とガイダンスについては、[Turbopackのwebpack互換性に関するドキュメント](https://turbo.build/pack/docs/migrating-from-webpack)を参照してください。 ## バージョン履歴 {#version-history} -| バージョン | 変更内容 | -| ---------- | -------------------------------------- | -| `13.0.0` | `experimental.turbo`が導入されました。 | +| バージョン | 変更内容 | +| ---------- | --------------------------------------------------- | +| `15.3.0` | `experimental.turbo`が`turbopack`に変更されました。 | +| `13.0.0` | `experimental.turbo`が導入されました。 | diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/typedRoutes.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/typedRoutes.mdx similarity index 100% rename from docs/01-app/04-api-reference/05-config/01-next-config-js/typedRoutes.mdx rename to docs/01-app/05-api-reference/05-config/01-next-config-js/typedRoutes.mdx diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/typescript.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/typescript.mdx similarity index 100% rename from docs/01-app/04-api-reference/05-config/01-next-config-js/typescript.mdx rename to docs/01-app/05-api-reference/05-config/01-next-config-js/typescript.mdx diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/urlImports.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/urlImports.mdx similarity index 100% rename from docs/01-app/04-api-reference/05-config/01-next-config-js/urlImports.mdx rename to docs/01-app/05-api-reference/05-config/01-next-config-js/urlImports.mdx diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/useCache.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/useCache.mdx similarity index 100% rename from docs/01-app/04-api-reference/05-config/01-next-config-js/useCache.mdx rename to docs/01-app/05-api-reference/05-config/01-next-config-js/useCache.mdx diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/useLightningcss.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/useLightningcss.mdx similarity index 100% rename from docs/01-app/04-api-reference/05-config/01-next-config-js/useLightningcss.mdx rename to docs/01-app/05-api-reference/05-config/01-next-config-js/useLightningcss.mdx diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/viewTransition.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/viewTransition.mdx similarity index 100% rename from docs/01-app/04-api-reference/05-config/01-next-config-js/viewTransition.mdx rename to docs/01-app/05-api-reference/05-config/01-next-config-js/viewTransition.mdx diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/webVitalsAttribution.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/webVitalsAttribution.mdx similarity index 100% rename from docs/01-app/04-api-reference/05-config/01-next-config-js/webVitalsAttribution.mdx rename to docs/01-app/05-api-reference/05-config/01-next-config-js/webVitalsAttribution.mdx diff --git a/docs/01-app/04-api-reference/05-config/01-next-config-js/webpack.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/webpack.mdx similarity index 100% rename from docs/01-app/04-api-reference/05-config/01-next-config-js/webpack.mdx rename to docs/01-app/05-api-reference/05-config/01-next-config-js/webpack.mdx diff --git a/docs/01-app/04-api-reference/05-config/02-typescript.mdx b/docs/01-app/05-api-reference/05-config/02-typescript.mdx similarity index 100% rename from docs/01-app/04-api-reference/05-config/02-typescript.mdx rename to docs/01-app/05-api-reference/05-config/02-typescript.mdx diff --git a/docs/01-app/04-api-reference/05-config/03-eslint.mdx b/docs/01-app/05-api-reference/05-config/03-eslint.mdx similarity index 100% rename from docs/01-app/04-api-reference/05-config/03-eslint.mdx rename to docs/01-app/05-api-reference/05-config/03-eslint.mdx diff --git a/docs/01-app/04-api-reference/05-config/index.mdx b/docs/01-app/05-api-reference/05-config/index.mdx similarity index 100% rename from docs/01-app/04-api-reference/05-config/index.mdx rename to docs/01-app/05-api-reference/05-config/index.mdx diff --git a/docs/01-app/04-api-reference/06-cli/create-next-app.mdx b/docs/01-app/05-api-reference/06-cli/create-next-app.mdx similarity index 100% rename from docs/01-app/04-api-reference/06-cli/create-next-app.mdx rename to docs/01-app/05-api-reference/06-cli/create-next-app.mdx diff --git a/docs/01-app/04-api-reference/06-cli/index.mdx b/docs/01-app/05-api-reference/06-cli/index.mdx similarity index 100% rename from docs/01-app/04-api-reference/06-cli/index.mdx rename to docs/01-app/05-api-reference/06-cli/index.mdx diff --git a/docs/01-app/04-api-reference/06-cli/next.mdx b/docs/01-app/05-api-reference/06-cli/next.mdx similarity index 100% rename from docs/01-app/04-api-reference/06-cli/next.mdx rename to docs/01-app/05-api-reference/06-cli/next.mdx diff --git a/docs/01-app/04-api-reference/07-edge.mdx b/docs/01-app/05-api-reference/07-edge.mdx similarity index 100% rename from docs/01-app/04-api-reference/07-edge.mdx rename to docs/01-app/05-api-reference/07-edge.mdx diff --git a/docs/01-app/04-api-reference/08-turbopack.mdx b/docs/01-app/05-api-reference/08-turbopack.mdx similarity index 71% rename from docs/01-app/04-api-reference/08-turbopack.mdx rename to docs/01-app/05-api-reference/08-turbopack.mdx index 245404de..de7b12f2 100644 --- a/docs/01-app/04-api-reference/08-turbopack.mdx +++ b/docs/01-app/05-api-reference/08-turbopack.mdx @@ -3,16 +3,16 @@ title: 'Turbopack' description: 'Turbopackは、JavaScriptとTypeScriptに最適化されたインクリメンタルバンドラーで、Rustで書かれ、Next.jsに組み込まれています。' --- -{/* このドキュメントの内容は、app routerとpages routerの間で共有されています。Pages Routerに特化したコンテンツを追加するには、`<PagesOnly>Content</PagesOnly>`コンポーネントを使用できます。共有コンテンツはコンポーネントでラップしないでください。 */} +{/* このドキュメントの内容は、app routerとpages routerの両方で共有されています。Pages Routerに特化した内容を追加するには、`<PagesOnly>Content</PagesOnly>`コンポーネントを使用できます。共有されるコンテンツはコンポーネントでラップしないでください。 */} Turbopackは、JavaScriptとTypeScriptに最適化された**インクリメンタルバンドラー**で、Rustで書かれ、**Next.js**に組み込まれています。Turbopackを使用することで、Pages RouterとApp Routerの両方で**非常に高速な**ローカル開発体験を得ることができます。 -## なぜTurbopackなのか？ {#why-turbopack} +## なぜTurbopackなのか {#why-turbopack} 私たちは、Next.jsのパフォーマンスを向上させるためにTurbopackを開発しました。以下の点を含みます： - **統一されたグラフ:** Next.jsは複数の出力環境（例：クライアントとサーバー）をサポートしています。複数のコンパイラを管理し、バンドルをつなぎ合わせるのは面倒です。Turbopackは、すべての環境に対して**単一の統一されたグラフ**を使用します。 -- **バンドリング vs ネイティブESM:** 一部のツールは開発時にバンドリングをスキップし、ブラウザのネイティブESMに依存します。これは小規模なアプリには適していますが、ネットワークリクエストが多すぎるため、大規模なアプリでは遅くなる可能性があります。Turbopackは開発時に**バンドル**しますが、大規模なアプリを高速に保つために最適化されています。 +- **バンドリング vs ネイティブESM:** 一部のツールは開発中にバンドリングをスキップし、ブラウザのネイティブESMに依存します。これは小規模なアプリには適していますが、ネットワークリクエストが多すぎるため、大規模なアプリでは遅くなる可能性があります。Turbopackは開発中に**バンドル**しますが、大規模なアプリを高速に保つために最適化されています。 - **インクリメンタル計算:** Turbopackは作業をコア間で並列化し、結果を関数レベルまで**キャッシュ**します。一度作業が完了すると、Turbopackはそれを繰り返しません。 - **遅延バンドリング:** Turbopackは、開発サーバーによって実際に要求されたものだけをバンドルします。この遅延アプローチにより、初期のコンパイル時間とメモリ使用量を削減できます。 @@ -30,30 +30,30 @@ Next.jsプロジェクトでTurbopackを有効にするには、開発サーバ } ``` -現在、Turbopackは`next dev`のみをサポートしています。ビルド（`next build`）は**まだ**サポートされていません。Turbopackが安定性に近づくにつれて、プロダクションサポートに向けて積極的に取り組んでいます。 +現在、Turbopackは`next dev`のみをサポートしています。ビルド（`next build`）は**まだ**サポートされていません。Turbopackが安定に近づくにつれて、プロダクションサポートに向けて積極的に取り組んでいます。 ## サポートされている機能 {#supported-features} -Next.jsのTurbopackは、一般的なユースケースに対して**ゼロコンフィグレーション**です。以下は、標準でサポートされている機能の概要と、必要に応じてTurbopackをさらに構成する方法に関するいくつかの参考情報です。 +Next.jsのTurbopackは、一般的なユースケースに対して**ゼロコンフィグレーション**です。以下は、標準でサポートされている機能の概要と、必要に応じてTurbopackをさらに設定する方法のいくつかの参考情報です。 ### 言語機能 {#language-features} -| 機能 | ステータス | 備考 | -| --------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| **JavaScript & TypeScript** | **サポート済み** | SWCを内部で使用しています。型チェックはTurbopackでは行われません（`tsc --watch`を実行するか、IDEに型チェックを依存してください）。 | -| **ECMAScript (ESNext)** | **サポート済み** | Turbopackは最新のECMAScript機能をサポートしており、SWCのカバレッジに一致しています。 | -| **CommonJS** | **サポート済み** | `require()`構文は標準で処理されます。 | -| **ESM** | **サポート済み** | 静的および動的な`import`が完全にサポートされています。 | -| **Babel** | 部分的にサポート外 | TurbopackにはデフォルトでBabelは含まれていません。ただし、[Turbopackの設定を通じて`babel-loader`を構成することができます](/docs/app/api-reference/config/next-config-js/turbo#configuring-webpack-loaders)。 | +| 機能 | ステータス | 備考 | +| --------------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **JavaScript & TypeScript** | **サポート済み** | 内部でSWCを使用しています。型チェックはTurbopackでは行われません（`tsc --watch`を実行するか、IDEに型チェックを依存してください）。 | +| **ECMAScript (ESNext)** | **サポート済み** | Turbopackは最新のECMAScript機能をサポートしており、SWCのカバレッジに一致しています。 | +| **CommonJS** | **サポート済み** | `require()`構文は標準で処理されます。 | +| **ESM** | **サポート済み** | 静的および動的な`import`が完全にサポートされています。 | +| **Babel** | 部分的にサポートされていません | TurbopackにはデフォルトでBabelが含まれていません。ただし、[Turbopackの設定を通じて`babel-loader`を設定することができます](/docs/app/api-reference/config/next-config-js/turbopack#configuring-webpack-loaders)。 | ### フレームワークとReactの機能 {#framework-and-react-features} -| 機能 | ステータス | 備考 | -| --------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------ | -| **JSX / TSX** | **サポート済み** | SWCがJSX/TSXのコンパイルを処理します。 | -| **Fast Refresh** | **サポート済み** | 設定は不要です。 | -| **React Server Components (RSC)** | **サポート済み** | Next.jsのApp Router用です。Turbopackは正しいサーバー/クライアントのバンドリングを保証します。 | -| **root レイアウトの作成** | サポート外 | App Routerでのroot レイアウトの自動作成はサポートされていません。Turbopackは手動での作成を指示します。 | +| 機能 | ステータス | 備考 | +| --------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------ | +| **JSX / TSX** | **サポート済み** | SWCがJSX/TSXのコンパイルを処理します。 | +| **Fast Refresh** | **サポート済み** | 設定は不要です。 | +| **React Server Components (RSC)** | **サポート済み** | Next.js App Router用です。Turbopackは正しいサーバー/クライアントのバンドリングを保証します。 | +| **root レイアウトの作成** | サポートされていません | App Routerでのroot レイアウトの自動作成はサポートされていません。Turbopackは手動での作成を指示します。 | ### CSSとスタイリング {#css-and-styling} @@ -77,12 +77,12 @@ Next.jsのTurbopackは、一般的なユースケースに対して**ゼロコ ### モジュール解決 {#module-resolution} -| 機能 | ステータス | 備考 | -| ------------------ | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **パスエイリアス** | **サポート済み** | `tsconfig.json`の`paths`と`baseUrl`を読み取り、Next.jsの動作に一致します。 | -| **手動エイリアス** | **サポート済み** | [`next.config.js`で`resolveAlias`を構成します](/docs/app/api-reference/config/next-config-js/turbo#resolving-aliases)（`webpack.resolve.alias`に類似）。 | -| **カスタム拡張子** | **サポート済み** | [`next.config.js`で`resolveExtensions`を構成します](/docs/app/api-reference/config/next-config-js/turbo#resolving-custom-extensions)。 | -| **AMD** | 部分的にサポート済み | 基本的な変換は動作しますが、高度なAMDの使用は制限されています。 | +| 機能 | ステータス | 備考 | +| ------------------ | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **パスエイリアス** | **サポート済み** | `tsconfig.json`の`paths`と`baseUrl`を読み取り、Next.jsの動作に一致します。 | +| **手動エイリアス** | **サポート済み** | [`next.config.js`で`resolveAlias`を設定します](/docs/app/api-reference/config/next-config-js/turbopack#resolving-aliases)（`webpack.resolve.alias`に類似）。 | +| **カスタム拡張子** | **サポート済み** | [`next.config.js`で`resolveExtensions`を設定します](/docs/app/api-reference/config/next-config-js/turbopack#resolving-custom-extensions)。 | +| **AMD** | 部分的にサポート済み | 基本的な変換は動作しますが、高度なAMDの使用は制限されています。 | ### パフォーマンスとFast Refresh {#performance-and-fast-refresh} @@ -96,13 +96,13 @@ Next.jsのTurbopackは、一般的なユースケースに対して**ゼロコ 一部の機能はまだ実装されていないか、計画されていません： - **プロダクションビルド** (`next build`) - Turbopackは現在`next dev`のみをサポートしています。プロダクションビルドのサポートは積極的に開発中です。 + Turbopackは現在、`next dev`のみをサポートしています。プロダクションビルドのサポートは積極的に開発中です。 - **レガシーCSSモジュール機能** - スタンドアロンの`:local`および`:global`擬似クラス（関数バリアントの`:global(...)`のみがサポートされています）。 - `@value`ルール（CSS変数に置き換えられました）。 - - `:import`および`:export`のICSSルール。 + - `:import`および`:export` ICSSルール。 - **`next.config.js`での`webpack()`設定** - Turbopackはwebpackを置き換えるため、`webpack()`設定は認識されません。代わりに[`experimental.turbo`設定](/docs/app/api-reference/config/next-config-js/turbo)を使用してください。 + Turbopackはwebpackを置き換えるため、`webpack()`設定は認識されません。代わりに[`experimental.turbo`設定](/docs/app/api-reference/config/next-config-js/turbopack)を使用してください。 - **AMP** Next.jsでのTurbopackサポートは計画されていません。 - **Yarn PnP** @@ -118,19 +118,19 @@ Next.jsのTurbopackは、一般的なユースケースに対して**ゼロコ - `experimental.fallbackNodePolyfills` これらは将来的に実装する予定です。 -各機能フラグとそのステータスの詳細な内訳については、[Turbopack APIリファレンス](/docs/app/api-reference/config/next-config-js/turbo)を参照してください。 +各機能フラグとそのステータスの詳細な内訳については、[Turbopack APIリファレンス](/docs/app/api-reference/config/next-config-js/turbopack)を参照してください。 ## 設定 {#configuration} -Turbopackは、`next.config.js`（または`next.config.ts`）の`experimental.turbo`キーの下で構成できます。設定オプションには以下が含まれます： +Turbopackは、`next.config.js`（または`next.config.ts`）の`turbopack`キーの下で設定できます。設定オプションには以下が含まれます： - **`rules`** - ファイル変換のための追加の[webpackローダー](/docs/app/api-reference/config/next-config-js/turbo#configuring-webpack-loaders)を定義します。 + ファイル変換のための追加の[webpackローダー](/docs/app/api-reference/config/next-config-js/turbopack#configuring-webpack-loaders)を定義します。 - **`resolveAlias`** - 手動エイリアスを作成します（webpackの`resolve.alias`に類似）。 + 手動エイリアスを作成します（webpackの`resolve.alias`のように）。 - **`resolveExtensions`** モジュール解決のためのファイル拡張子を変更または拡張します。 -- **`moduleIdStrategy`** +- **`moduleIds`** モジュールIDの生成方法を設定します（`'named'` vs `'deterministic'`）。 - **`treeShaking`** 開発および将来のプロダクションビルドでのツリーシェイキングを有効または無効にします。 @@ -139,19 +139,17 @@ Turbopackは、`next.config.js`（または`next.config.ts`）の`experimental.t ```js title="next.config.js" module.exports = { - experimental: { - turbo: { - // 例：エイリアスとカスタムファイル拡張子の追加 - resolveAlias: { - underscore: 'lodash', - }, - resolveExtensions: ['.mdx', '.tsx', '.ts', '.jsx', '.js', '.json'], + turbopack: { + // 例: エイリアスとカスタムファイル拡張子の追加 + resolveAlias: { + underscore: 'lodash', }, + resolveExtensions: ['.mdx', '.tsx', '.ts', '.jsx', '.js', '.json'], }, } ``` -より詳細な設定例については、[Turbopack設定ドキュメント](/docs/app/api-reference/config/next-config-js/turbo)を参照してください。 +より詳細な設定例については、[Turbopack設定ドキュメント](/docs/app/api-reference/config/next-config-js/turbopack)を参照してください。 ## パフォーマンスデバッグのためのトレースファイルの生成 {#generating-trace-files-for-performance-debugging} @@ -161,10 +159,10 @@ module.exports = { NEXT_TURBOPACK_TRACING=1 next dev --turbopack ``` -これにより、`.next/trace-turbopack`ファイルが生成されます。そのファイルを[Next.jsリポジトリ](https://github.com/vercel/next.js)でGitHubの問題を作成する際に含めてください。調査の手助けになります。 +これにより、`.next/trace-turbopack`ファイルが生成されます。そのファイルを[Next.jsリポジトリ](https://github.com/vercel/next.js)でGitHubの問題を作成する際に含めてください。調査の手助けとなります。 ## まとめ {#summary} -Turbopackは、特に大規模なアプリケーションにおいて、ローカル開発とビルドを高速化するために設計された**Rustベース**の**インクリメンタル**バンドラーです。Next.jsに統合されており、ゼロコンフィグのCSS、React、TypeScriptサポートを提供します。 +Turbopackは、特に大規模なアプリケーションに対して、ローカル開発とビルドを高速化するために設計された**Rustベース**の**インクリメンタル**バンドラーです。Next.jsに統合されており、ゼロコンフィグのCSS、React、TypeScriptサポートを提供します。 -Turbopackの改善とプロダクションビルドサポートの追加に向けて、今後の更新をお楽しみに。それまでの間、`next dev --turbopack`を試して、フィードバックをお寄せください。 +Turbopackの改善とプロダクションビルドサポートの追加に向けて、今後の更新にご期待ください。その間、`next dev --turbopack`を試してみて、フィードバックをお寄せください。 diff --git a/docs/01-app/04-api-reference/index.mdx b/docs/01-app/05-api-reference/index.mdx similarity index 100% rename from docs/01-app/04-api-reference/index.mdx rename to docs/01-app/05-api-reference/index.mdx diff --git a/docs/index.mdx b/docs/index.mdx index 13308bc1..4933d880 100644 --- a/docs/index.mdx +++ b/docs/index.mdx @@ -1,75 +1,62 @@ --- -title: 'イントロダクション' +title: 'Introduction' description: 'Next.js ドキュメントへようこそ。' +related: + title: 'Next Steps' + description: 'インストールガイドに従って、Next.js を始めましょう。' + links: + - app/getting-started/installation --- Next.js ドキュメントへようこそ！ -{/* NOTE: このinfoは手動で追加しています。自動翻訳等で更新され消えてしまった場合、必要に応じて再度追加しなおしてください */} -:::info[はじめに] -本サイトは [Next.js](https://nextjs.org) 公式ドキュメントの日本語翻訳サイトです。 -Next.js の公式 X アカウントにも[ポスト](https://twitter.com/nextjs/status/1746921179879735677)頂きました。 +## Next.js とは？ {#what-is-next-js} -現在、本サイトでは <NextJsReleaseVersionLink /> のアップデートに追従し、その内容を翻訳しています。 +Next.js は、フルスタックの Web アプリケーションを構築するための React フレームワークです。ユーザーインターフェースを構築するために React コンポーネントを使用し、Next.js を追加機能や最適化のために利用します。 -<NextJsGitHubHashLink label="翻訳している公式ドキュメントの commit hash：" /> -::: +Next.js は、内部でバンドリングやコンパイルなど、React に必要なツールを抽象化し、自動的に設定します。これにより、設定に時間を費やすことなく、アプリケーションの構築に集中できます。 -## Next.js とは？{#what-is-next-js} - -Next.js は、フルスタック Web アプリケーションを構築するための React フレームワークです。ユーザーインターフェースを構築するために React コンポーネントを使用し、Next.js を使用して追加の機能や最適化を行います。 - -Next.js は、内部でバンドルやコンパイルなどの React に必要なツールを抽象化し、自動的に設定します。これにより、設定に時間を費やす代わりに、アプリケーションの構築に集中できます。 - -個人開発者でもチームの一員でも、Next.js はインタラクティブでダイナミック、そして高速な React アプリケーションの構築を支援します。 +個人の開発者であれ、大規模なチームの一員であれ、Next.js はインタラクティブで動的、かつ高速な React アプリケーションの構築を支援します。 ## 主な機能 {#main-features} -Next.js の主な機能のいくつかは次のとおりです： +Next.js の主な機能には以下のものがあります： -| 機能 | 説明 | -| --------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [ルーティング](/docs/app/building-your-application/routing) | layout、入れ子になったルーティング、ロード状態、エラーハンドリングなどをサポートする Server Components 上に構築されたファイルシステムベースのルーターです。 | -| [レンダリング](/docs/app/building-your-application/rendering) | クライアントサイドとサーバーサイドのレンダリングを Client と Server Components で行います。静的および動的レンダリングによってサーバー上でさらに最適化されています。Edge と Node.js ランタイムでストリーミングされます。 | -| [データ取得](/docs/app/building-your-application/data-fetching) | Server Components で async/await によるデータ取得の簡素化、リクエストメモ化、データキャッシュ、再検証のための拡張された `fetch` API を提供します。 | -| [スタイリング](/docs/app/building-your-application/styling) | CSS Modules、Tailwind CSS、CSS-in-JS など、好みのスタイリング方法をサポートします | -| [最適化](/docs/app/building-your-application/optimizing) | 画像、フォント、スクリプトの最適化を通じて、アプリケーションのコア Web バイタルとユーザーエクスペリエンスを向上させます。 | -| [TypeScript](/docs/app/api-reference/config/typescript) | TypeScript のサポートの改善、より良い型チェックとより効率的なコンパイル、カスタム TypeScript プラグインと型チェッカーを備えています。 | +| 機能 | 説明 | +| ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [Routing](/docs/app/building-your-application/routing) | Server Components 上に構築されたファイルシステムベースのルーターで、レイアウト、ネストされたルーティング、ローディング状態、エラーハンドリングなどをサポートします | +| [Rendering](/docs/app/building-your-application/rendering) | Client-side と Server-side Rendering を Client と Server Components で行います。Next.js でサーバー上での静的および動的レンダリングがさらに最適化されています。Edge と Node.js ランタイムでのストリーミングも可能です | +| [Data Fetching](/docs/app/building-your-application/data-fetching) | Server Components での async/await を使用した簡素化されたデータフェッチングと、リクエストメモ化、データキャッシュ、再検証のための拡張された `fetch` API を提供します | +| [Styling](/docs/app/building-your-application/styling) | CSS Modules、Tailwind CSS、CSS-in-JS など、お好みのスタイリング方法をサポートします | +| [Optimizations](/docs/app/building-your-application/optimizing) | アプリケーションの Core Web Vitals とユーザーエクスペリエンスを向上させるための画像、フォント、スクリプトの最適化を行います | +| [TypeScript](/docs/app/api-reference/config/typescript) | TypeScript のサポートが向上し、型チェックが改善され、より効率的なコンパイルが可能になりました。また、カスタム TypeScript プラグインと型チェッカーも提供されます | -## このドキュメントの使い方 {#how-to-use-these-docs} +## ドキュメントの使い方 {#how-to-use-these-docs} -画面の左側には、ドキュメントのナビゲーションバーがあります。ドキュメントのページは順序よく整理されており、基本から高度な内容へと進むことができますので、アプリケーションを構築する際にはステップごとに進めることができます。しかし、任意の順序で読むことも、特定のユースケースに当てはまるページにスキップすることも可能です。 +画面の左側にはドキュメントのナビバーがあります。ドキュメントのページは基本から応用まで順序よく整理されており、アプリケーションを構築する際にステップバイステップで進めることができます。ただし、どの順序でも読むことができ、あなたのユースケースに適したページにスキップすることも可能です。 -画面の右側には、ページ内のセクション間を簡単に移動できる目次があります。ページをすばやく見つける必要がある場合は、画面上部の検索バーまたは検索ショートカット（`Ctrl+K` または `Cmd+K`）を使用できます。 +画面の右側には、ページ内のセクション間を簡単に移動できる目次があります。ページをすばやく見つけたい場合は、上部の検索バーや検索ショートカット（`Ctrl+K` または `Cmd+K`）を使用してください。 -始めるには、[インストレーション](/docs/app/getting-started/installation)ガイドをチェックしてください。 +始めるには、[インストール](/docs/app/getting-started/installation)ガイドをチェックしてください。 ## App Router と Pages Router {#app-router-vs-pages-router} -{/* NOTE: このwarningは手動で追加しています。自動翻訳等で更新され消えてしまった場合、必要に応じて再度追加しなおしてください */} -:::warning[ご注意ください] - -現在、本サイトでは App Router に関するドキュメントのみ翻訳して公開しております。 -そのため、以下に記載のドロップダウンメニューは本サイトにはございません。 - -::: - -Next.js には、App Router と Pages Router の2種類のルーターがあります。App Router は、Server Components やストリーミングなどの React の最新機能を使用できる新しいルーターです。Pages Router はオリジナルの Next.js ルーターで、サーバーレンダリングされた React アプリケーションを構築でき、古い Next.js アプリケーションに対するサポートを引き続き提供しています。 +Next.js には、App Router と Pages Router の2つの異なるルーターがあります。App Router は、Server Components やストリーミングなど、React の最新機能を使用できる新しいルーターです。Pages Router は、サーバーレンダリングされた React アプリケーションを構築するための元々の Next.js ルーターで、古い Next.js アプリケーションのために引き続きサポートされています。 -サイドバーの上部には、**App Router** と **Pages Router** の機能を切り替えるドロップダウンメニューが表示されています。各ディレクトリ固有の機能があるため、どのタブが選択されているかを把握することが重要です。 +サイドバーの上部には、**App Router** と **Pages Router** の機能を切り替えることができるドロップダウンメニューがあります。各ディレクトリに固有の機能があるため、どのタブが選択されているかを把握することが重要です。 -ページ上部のパンくずリストは、App Router ドキュメントか Pages Router ドキュメントを表示しているかどうかを示します。 +ページの上部にあるパンくずリストも、App Router ドキュメントを見ているのか、Pages Router ドキュメントを見ているのかを示します。 ## 前提知識 {#pre-requisite-knowledge} -私たちのドキュメントは初心者向けに設計されていますが、Next.js 機能に焦点を当て続けるために基準を設定する必要があります。新しい概念を導入する際には、関連するドキュメントへのリンクを必ず提供します。 +私たちのドキュメントは初心者に優しい設計ですが、Next.js の機能に集中できるように基礎を確立する必要があります。新しい概念を紹介する際には、関連するドキュメントへのリンクを提供するようにします。 -私たちのドキュメントを最大限に活用するには、HTML、CSS、および React の基本的な理解を持っていることをお勧めします。React スキルを復習する必要がある場合は、基本を紹介する [React 基礎コース](https://nextjs.org/learn/react-foundations)を確認してください。その後、ダッシュボードアプリケーションを構築して Next.js をさらに詳しく学びます[build a dashboard application](https://nextjs.org/learn/dashboard-app)。 +ドキュメントを最大限に活用するには、HTML、CSS、React の基本的な理解が推奨されます。React のスキルを磨く必要がある場合は、[React Foundations Course](https://nextjs.org/learn/react-foundations) をチェックして、基礎を学んでください。その後、[ダッシュボードアプリケーションを構築](https://nextjs.org/learn/dashboard-app)して、Next.js についてさらに学びましょう。 ## アクセシビリティ {#accessibility} -ドキュメントを読みながらスクリーンリーダーを使用する場合、最適なアクセシビリティを得るために Firefox と NVDA、または Safari と VoiceOver を使用することをお勧めします。 +ドキュメントを読む際にスクリーンリーダーを使用する場合、最適なアクセシビリティのために Firefox と NVDA、または Safari と VoiceOver を使用することをお勧めします。 -## コミュニティに参加しよう {#join-our-community} +## コミュニティに参加する {#join-our-community} -Next.js に関連する質問があれば、[GitHub Discussions](https://github.com/vercel/next.js/discussions)、[Discord](https://discord.com/invite/bUG2bvbtHy)、[X (Twitter)](https://x.com/nextjs)、[Reddit](https://www.reddit.com/r/nextjs) で、私たちのコミュニティにいつでも聞いてください。 +Next.js に関連する質問がある場合は、[GitHub Discussions](https://github.com/vercel/next.js/discussions)、[Discord](https://discord.com/invite/bUG2bvbtHy)、[X (Twitter)](https://x.com/nextjs)、[Reddit](https://www.reddit.com/r/nextjs) でコミュニティにいつでも質問できます。 diff --git a/kj-diff.json b/kj-diff.json index 09f29f50..b4282e48 100644 --- a/kj-diff.json +++ b/kj-diff.json @@ -1,11 +1,162 @@ { "submodule": "next.js", "hash": { - "previous": "c08d75d102da5b5a894330c7159120e8b0251768", - "current": "f6557ffc0f85558c2db3a6c3cdc75f2ac3b3bb92" + "previous": "f6557ffc0f85558c2db3a6c3cdc75f2ac3b3bb92", + "current": "5104b5eb0656d04951ea139b142f1baa2e227fa6" }, "diffs": [ - "M\tdocs/01-app/04-api-reference/02-components/link.mdx", - "A\tdocs/01-app/04-api-reference/04-functions/use-link-status.mdx" + "M\tdocs/01-app/01-getting-started/01-installation.mdx", + "M\tdocs/01-app/01-getting-started/02-project-structure.mdx", + "M\tdocs/01-app/01-getting-started/03-layouts-and-pages.mdx", + "M\tdocs/01-app/01-getting-started/04-images-and-fonts.mdx", + "M\tdocs/01-app/01-getting-started/05-css.mdx", + "M\tdocs/01-app/01-getting-started/06-fetching-data.mdx", + "M\tdocs/01-app/01-getting-started/07-updating-data.mdx", + "M\tdocs/01-app/01-getting-started/08-error-handling.mdx", + "M\tdocs/01-app/01-getting-started/10-metadata-and-og-images.mdx", + "M\tdocs/01-app/01-getting-started/12-upgrading.mdx", + "M\tdocs/01-app/03-building-your-application/01-routing/03-layouts-and-templates.mdx", + "M\tdocs/01-app/03-building-your-application/01-routing/08-route-groups.mdx", + "M\tdocs/01-app/03-building-your-application/06-optimizing/14-local-development.mdx", + "M\tdocs/01-app/03-building-your-application/07-configuring/05-mdx.mdx", + "M\tdocs/01-app/03-building-your-application/11-upgrading/06-from-create-react-app.mdx", + "D\tdocs/01-app/04-api-reference/04-functions/use-link-status.mdx", + "D\tdocs/01-app/04-api-reference/05-config/01-next-config-js/turbo.mdx", + "D\tdocs/01-app/04-api-reference/08-turbopack.mdx", + "A\tdocs/01-app/04-deep-dive/index.mdx", + "R100\tdocs/01-app/04-api-reference/01-directives/index.mdx\tdocs/01-app/05-api-reference/01-directives/index.mdx", + "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", + "A\tdocs/01-app/05-api-reference/05-config/01-next-config-js/turbopack.mdx", + "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/typedRoutes.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/typedRoutes.mdx", + "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/typescript.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/typescript.mdx", + "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/urlImports.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/urlImports.mdx", + "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/useCache.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/useCache.mdx", + "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/useLightningcss.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/useLightningcss.mdx", + "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/viewTransition.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/viewTransition.mdx", + "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/webVitalsAttribution.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/webVitalsAttribution.mdx", + "R100\tdocs/01-app/04-api-reference/05-config/01-next-config-js/webpack.mdx\tdocs/01-app/05-api-reference/05-config/01-next-config-js/webpack.mdx", + "R100\tdocs/01-app/04-api-reference/05-config/02-typescript.mdx\tdocs/01-app/05-api-reference/05-config/02-typescript.mdx", + "R100\tdocs/01-app/04-api-reference/05-config/03-eslint.mdx\tdocs/01-app/05-api-reference/05-config/03-eslint.mdx", + "R100\tdocs/01-app/04-api-reference/05-config/index.mdx\tdocs/01-app/05-api-reference/05-config/index.mdx", + "R100\tdocs/01-app/04-api-reference/06-cli/create-next-app.mdx\tdocs/01-app/05-api-reference/06-cli/create-next-app.mdx", + "R100\tdocs/01-app/04-api-reference/06-cli/index.mdx\tdocs/01-app/05-api-reference/06-cli/index.mdx", + "R100\tdocs/01-app/04-api-reference/06-cli/next.mdx\tdocs/01-app/05-api-reference/06-cli/next.mdx", + "R100\tdocs/01-app/04-api-reference/07-edge.mdx\tdocs/01-app/05-api-reference/07-edge.mdx", + "A\tdocs/01-app/05-api-reference/08-turbopack.mdx", + "R100\tdocs/01-app/04-api-reference/index.mdx\tdocs/01-app/05-api-reference/index.mdx", + "M\tdocs/index.mdx" ] } diff --git a/next.js b/next.js index f6557ffc..5104b5eb 160000 --- a/next.js +++ b/next.js @@ -1 +1 @@ -Subproject commit f6557ffc0f85558c2db3a6c3cdc75f2ac3b3bb92 +Subproject commit 5104b5eb0656d04951ea139b142f1baa2e227fa6 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