diff --git a/docs/01-app/01-getting-started/01-installation.mdx b/docs/01-app/01-getting-started/01-installation.mdx index c977dbf1..46b161e7 100644 --- a/docs/01-app/01-getting-started/01-installation.mdx +++ b/docs/01-app/01-getting-started/01-installation.mdx @@ -1,25 +1,27 @@ --- -title: '新しい Next.js プロジェクトをセットアップする方法' +title: '新しい Next.js プロジェクトのセットアップ方法' nav_title: 'インストール' -description: '`create-next-app` CLIを使用して新しい Next.js アプリケーションを作成し、TypeScript、ESLint、およびモジュールパスエイリアスを設定します。' +description: '`create-next-app` CLIを使用して新しい Next.js アプリケーションを作成し、TypeScript、ESLint、モジュールパスエイリアスを設定します。' --- -{/* このドキュメントの内容は、app router と pages router の間で共有されています。Pages Router に特有のコンテンツを追加するには、`Content` コンポーネントを使用できます。共有コンテンツはコンポーネントでラップしないでください。 */} +{/* このドキュメントの内容は、app router と pages router の両方で共有されています。Pages Router に特有の内容を追加するには、`Content` コンポーネントを使用できます。共有される内容はコンポーネントでラップしないでください。 */} ## システム要件 {#system-requirements} +始める前に、システムが次の要件を満たしていることを確認してください: + - [Node.js 18.18](https://nodejs.org/) 以降 -- macOS、Windows（WSLを含む）、Linuxがサポートされています +- macOS、Windows（WSLを含む）、またはLinux ## 自動インストール {#automatic-installation} -新しい Next.js アプリを始めるには、すべてを自動的にセットアップする [`create-next-app`](/docs/app/api-reference/cli/create-next-app) を使用することをお勧めします。プロジェクトを作成するには、次のコマンドを実行します： +新しい Next.js アプリを作成する最も簡単な方法は、すべてを自動的にセットアップしてくれる [`create-next-app`](/docs/app/api-reference/cli/create-next-app) を使用することです。プロジェクトを作成するには、次のコマンドを実行します: ```bash title="Terminal" npx create-next-app@latest ``` -インストール時に、次のプロンプトが表示されます： +インストール時に、次のプロンプトが表示されます: ```txt title="Terminal" What is your project named? my-app @@ -33,17 +35,17 @@ Would you like to customize the import alias (`@/*` by default)? No / Yes What import alias would you like configured? @/* ``` -プロンプトの後、[`create-next-app`](/docs/app/api-reference/cli/create-next-app) はプロジェクト名のフォルダーを作成し、必要な依存関係をインストールします。 +プロンプトの後、[`create-next-app`](/docs/app/api-reference/cli/create-next-app) はプロジェクト名のフォルダを作成し、必要な依存関係をインストールします。 ## 手動インストール {#manual-installation} -新しい Next.js アプリを手動で作成するには、必要なパッケージをインストールします： +新しい Next.js アプリを手動で作成するには、必要なパッケージをインストールします: ```bash title="Terminal" npm install next@latest react@latest react-dom@latest ``` -`package.json` ファイルを開き、次の `scripts` を追加します： +次に、以下のスクリプトを `package.json` ファイルに追加します: ```json title="package.json" { @@ -56,30 +58,20 @@ npm install next@latest react@latest react-dom@latest } ``` -これらのスクリプトは、アプリケーション開発のさまざまな段階を指します： +これらのスクリプトは、アプリケーション開発のさまざまな段階を指します: -- `dev`: Next.js を開発モードで開始するために [`next dev`](/docs/app/api-reference/cli/next#next-dev-options) を実行します -- `build`: 本番使用のためにアプリケーションをビルドするために [`next build`](/docs/app/api-reference/cli/next#next-build-options) を実行します -- `start`: Next.js の本番サーバーを開始するために [`next start`](/docs/app/api-reference/cli/next#next-start-options) を実行します -- `lint`: Next.js の組み込み ESLint 設定をセットアップするために [`next lint`](/docs/app/api-reference/cli/next#next-lint-options) を実行します +- `next dev`: 開発サーバーを起動します +- `next build`: アプリケーションを本番用にビルドします +- `next start`: 本番サーバーを起動します +- `next lint`: ESLint を実行します -### `app` ディレクトリを作成する {#create-the-app-directory} +### `app` ディレクトリの作成 {#create-the-app-directory} Next.js はファイルシステムルーティングを使用しているため、アプリケーション内のルートはファイルの構造によって決まります。 -`app` フォルダーを作成し、`layout.tsx` と `page.tsx` ファイルを追加します。これらはユーザーがアプリケーションの root (`/`) を訪れたときにレンダリングされます。 - -App フォルダ構造 - -`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 dev` で開発サーバーを実行すると、Next.js が自動的にこのファイルを作成します。 > - プロジェクトの root に [`src` ディレクトリ](/docs/app/building-your-application/configuring/src-directory) を使用して、アプリケーションのコードを設定ファイルから分離することができます。 -### `pages` ディレクトリを作成する {#create-the-pages-directory} +### `pages` ディレクトリの作成 {#create-the-pages-directory} Next.js はファイルシステムルーティングを使用しているため、アプリケーション内のルートはファイルの構造によって決まります。 -プロジェクトの root に `pages` ディレクトリを作成します。次に、`pages` フォルダー内に `index.tsx` ファイルを追加します。これがホームページ (`/`) になります： +プロジェクトの root に `pages` ディレクトリを作成します。次に、`pages` フォルダ内に `index.tsx` ファイルを追加します。これがホームページ (`/`) になります: @@ -173,7 +175,7 @@ export default function Page() { -次に、`pages/` 内に `_app.tsx` ファイルを追加して、グローバルレイアウトを定義します。 [カスタム App ファイル](https://nextjs.org/docs/canary/pages/building-your-application/routing/custom-app) について詳しく学びましょう。 +次に、`pages/` 内に `_app.tsx` ファイルを追加して、グローバルレイアウトを定義します。[カスタム App ファイル](https://nextjs.org/docs/canary/pages/building-your-application/routing/custom-app) について詳しく学びましょう。 @@ -198,7 +200,7 @@ export default function App({ Component, pageProps }) { -最後に、`pages/` 内に `_document.tsx` ファイルを追加して、サーバーからの初期応答を制御します。 [カスタム Document ファイル](https://nextjs.org/docs/canary/pages/building-your-application/routing/custom-document) について詳しく学びましょう。 +最後に、`pages/` 内に `_document.tsx` ファイルを追加して、サーバーからの初期レスポンスを制御します。[カスタム Document ファイル](https://nextjs.org/docs/canary/pages/building-your-application/routing/custom-document) について詳しく学びましょう。 @@ -243,53 +245,78 @@ export default function Document() { -### `public` フォルダーを作成する（オプション） {#create-the-public-folder-optional} +### `public` フォルダの作成（オプション） {#create-the-public-folder-optional} + +プロジェクトの root に [`public` フォルダ](/docs/app/building-your-application/optimizing/static-assets) を作成して、画像やフォントなどの静的アセットを保存します。`public` 内のファイルは、ベースURL (`/`) から始まるコードで参照できます。 + +これらのアセットは root パス (`/`) を使用して参照できます。たとえば、`public/profile.png` は `/profile.png` として参照できます: + + + + +```tsx title="app/page.tsx" highlight={4} switcher +import Image from 'next/image' + +export default function Page() { + return 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 でプラグインを有効にするには： +VS Code でプラグインを有効にするには: 1. コマンドパレットを開く（`Ctrl/⌘` + `Shift` + `P`） 2. 「TypeScript: Select TypeScript Version」を検索 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" { @@ -305,7 +332,7 @@ Next.js には組み込みの ESLint があり、新しいプロジェクトを npm run lint ``` -次のようなプロンプトが表示されます： +次のようなプロンプトが表示されます: > ? How would you like to configure ESLint? > @@ -313,29 +340,31 @@ npm run lint > Base > Cancel -- **Strict**: Next.js の基本 ESLint 設定に加えて、より厳しい Core Web Vitals ルールセットを含みます。ESLint を初めて設定する開発者に推奨される設定です。 -- **Base**: Next.js の基本 ESLint 設定を含みます。 -- **Cancel**: ESLint 設定を含みません。独自のカスタム ESLint 設定を設定する予定がある場合にのみ、このオプションを選択してください。 +- **Strict**: Next.js の基本的な ESLint 設定に加えて、より厳格な Core Web Vitals ルールセットを含みます。初めて ESLint を設定する開発者に推奨される設定です。 +- **Base**: Next.js の基本的な ESLint 設定を含みます。 +- **Cancel**: 設定をスキップします。独自のカスタム ESLint 設定を設定する予定の場合、このオプションを選択します。 -2つの設定オプションのいずれかが選択されると、Next.js は自動的に `eslint` と `eslint-config-next` をアプリケーションの依存関係としてインストールし、選択した設定を含む `.eslintrc.json` ファイルをプロジェクトの root に作成します。 +`Strict` または `Base` が選択されると、Next.js は自動的に `eslint` と `eslint-config-next` をアプリケーションの依存関係としてインストールし、選択した設定を含む `.eslintrc.json` ファイルをプロジェクトの root に作成します。 ESLint を実行してエラーをキャッチしたいときは、`next lint` を実行できます。ESLint が設定されると、ビルド（`next build`）のたびに自動的に実行されます。エラーはビルドを失敗させますが、警告は失敗しません。 -プロジェクトで ESLint を設定する方法については、[ESLint プラグイン](/docs/app/api-reference/config/next-config-js/eslint) ページを参照してください。 +詳細は [ESLint プラグイン](/docs/app/api-reference/config/next-config-js/eslint) ページを参照してください。 -## 絶対インポートとモジュールパスエイリアスを設定する {#set-up-absolute-imports-and-module-path-aliases} +## 絶対インポートとモジュールパスエイリアスの設定 {#set-up-absolute-imports-and-module-path-aliases} -Next.js には、`tsconfig.json` および `jsconfig.json` ファイルの `"paths"` および `"baseUrl"` オプションのサポートが組み込まれています。これらのオプションを使用すると、プロジェクトディレクトリを絶対パスにエイリアス化し、モジュールのインポートを簡単にします。例えば： +Next.js には、`tsconfig.json` および `jsconfig.json` ファイルの `"paths"` および `"baseUrl"` オプションのサポートが組み込まれています。 + +これらのオプションを使用すると、プロジェクトディレクトリを絶対パスにエイリアス化し、モジュールのインポートをより簡単かつクリーンにすることができます。たとえば: ```jsx -// 以前 +// Before import { Button } from '../../../components/button' -// 以降 +// After import { Button } from '@/components/button' ``` -絶対インポートを設定するには、`tsconfig.json` または `jsconfig.json` ファイルに `baseUrl` 設定オプションを追加します。例えば： +絶対インポートを設定するには、`tsconfig.json` または `jsconfig.json` ファイルに `baseUrl` 設定オプションを追加します。たとえば: ```json title="tsconfig.json or jsconfig.json" { @@ -347,7 +376,7 @@ import { Button } from '@/components/button' `baseUrl` パスの設定に加えて、`"paths"` オプションを使用してモジュールパスを `"alias"` することができます。 -例えば、次の設定は `@/components/*` を `components/*` にマッピングします： +たとえば、次の設定は `@/components/*` を `components/*` にマッピングします: ```json title="tsconfig.json or jsconfig.json" { @@ -361,41 +390,4 @@ import { Button } from '@/components/button' } ``` -各 `"paths"` は `baseUrl` の場所に対して相対的です。例えば： - - - - -```tsx title="src/app/page.tsx" switcher -import Button from '@/components/button' -import '@/styles/styles.css' - -export default function HomePage() { - return ( -
-

Hello World

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

Hello World

-
- ) -} -``` - - - +各 `"paths"` は `baseUrl` の場所に対して相対的です。 diff --git a/docs/01-app/01-getting-started/02-project-structure.mdx b/docs/01-app/01-getting-started/02-project-structure.mdx index 513f00ba..a0885150 100644 --- a/docs/01-app/01-getting-started/02-project-structure.mdx +++ b/docs/01-app/01-getting-started/02-project-structure.mdx @@ -1,10 +1,10 @@ --- -title: 'プロジェクトの構造と組織化' +title: 'プロジェクト構造と組織化' nav_title: 'プロジェクト構造' -description: 'Next.jsにおけるフォルダとファイルの規約の概要と、プロジェクトの組織化方法について。' +description: 'Next.jsにおけるフォルダとファイルの規約の概要、およびプロジェクトの組織化方法について説明します。' --- -このページでは、Next.jsにおけるフォルダとファイルの規約の概要と、プロジェクトを組織化するためのヒントを提供します。 +このページでは、Next.jsにおける**すべての**フォルダとファイルの規約の概要と、プロジェクトを組織化するための推奨事項を提供します。 ## フォルダとファイルの規約 {#folder-and-file-conventions} @@ -44,7 +44,7 @@ description: 'Next.jsにおけるフォルダとファイルの規約の概要 | [`.env.development`](/docs/app/building-your-application/configuring/environment-variables) | 開発環境変数 | | [`.eslintrc.json`](/docs/app/api-reference/config/eslint) | ESLintの設定ファイル | | `.gitignore` | 無視するGitファイルとフォルダ | -| `next-env.d.ts` | Next.jsのTypeScript宣言ファイル | +| `next-env.d.ts` | Next.js用のTypeScript宣言ファイル | | `tsconfig.json` | TypeScriptの設定ファイル | | `jsconfig.json` | JavaScriptの設定ファイル | @@ -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} -| | | -| --------------------------------------------------------------------------------- | -------------------------------------------------------- | -| [`(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} @@ -158,26 +158,30 @@ 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` -- `error.js`（React error boundary） -- `loading.js`（React suspense boundary） -- `not-found.js`（React error boundary） -- `page.js`またはネストされた`layout.js` +- `error.js` (React error boundary) +- `loading.js` (React suspense boundary) +- `not-found.js` (React error boundary) +- `page.js` またはネストされた `layout.js` ファイル規約のためのコンポーネント階層 -ネストされたルートでは、セグメントのコンポーネントは親セグメントのコンポーネントの**内側**にネストされます。 +コンポーネントはネストされたルートで再帰的にレンダリングされ、ルートセグメントのコンポーネントは親セグメントのコンポーネントの**内側**にネストされます。 ネストされたファイル規約のコンポーネント階層 -## プロジェクトの組織化 {#organizing-your-project} - -[フォルダとファイルの規約](/docs/app/getting-started/project-structure)とは別に、Next.jsはプロジェクトファイルの組織化や配置について特に意見を持っていません。しかし、プロジェクトを組織化するためのいくつかの機能を提供しています。 - ### コロケーション {#colocation} `app`ディレクトリでは、ネストされたフォルダがルート構造を定義します。各フォルダは、URLパスの対応するセグメントにマッピングされるルートセグメントを表します。 -しかし、ルート構造がフォルダを通じて定義されているにもかかわらず、`page.js`または`route.js`ファイルがルートセグメントに追加されるまで、ルートは**公開されません**。 +ただし、ルート構造はフォルダを通じて定義されますが、`page.js`または`route.js`ファイルがルートセグメントに追加されるまで、ルートは**公開されません**。 ルートセグメントにpage.jsまたはroute.jsファイルが追加されるまでルートが公開されないことを示す図。 -そして、ルートが公開されるときでも、クライアントに送信されるのは`page.js`または`route.js`によって返される**コンテンツのみ**です。 +そして、ルートが公開されると、`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} @@ -253,24 +251,24 @@ description: 'Next.jsにおけるフォルダとファイルの規約の概要 height="849" /> -`app`ディレクトリ内のファイルは[デフォルトで安全に配置できる](#colocation)ため、コロケーションにはプライベートフォルダは必要ありません。しかし、以下のような場合に役立ちます： +`app`ディレクトリ内のファイルは[デフォルトで安全に配置できる](#colocation)ため、コロケーションにはプライベートフォルダは必要ありません。ただし、以下の目的で役立ちます： - UIロジックをルーティングロジックから分離する -- プロジェクト全体とNext.jsエコシステム内で内部ファイルを一貫して整理する -- コードエディタでファイルをソートおよびグループ化する -- 将来のNext.jsファイル規約との潜在的な命名の競合を回避する +- プロジェクト全体およびNext.jsエコシステム内で内部ファイルを一貫して整理する +- コードエディタでファイルを整理およびグループ化する +- 将来のNext.jsファイル規約との潜在的な命名競合を回避する > **Good to know**: > > - フレームワークの規約ではありませんが、プライベートフォルダの外のファイルを同じアンダースコアパターンを使用して「プライベート」としてマークすることも検討できます。 > - フォルダ名の前に`%5F`（アンダースコアのURLエンコード形式）を付けることで、アンダースコアで始まるURLセグメントを作成できます：`%5FfolderName`。 -> - プライベートフォルダを使用しない場合は、Next.jsの[特別なファイル規約](/docs/app/getting-started/project-structure#routing-files)を知っておくと、予期しない命名の競合を防ぐのに役立ちます。 +> - プライベートフォルダを使用しない場合は、予期しない命名競合を防ぐためにNext.jsの[特別なファイル規約](/docs/app/getting-started/project-structure#routing-files)を知っておくと役立ちます。 ### ルートグループ {#route-groups} ルートグループは、フォルダを括弧で囲むことで作成できます：`(folderName)` -これは、フォルダが組織的な目的であり、ルートのURLパスに**含まれるべきではない**ことを示します。 +これは、フォルダが組織目的であり、ルートのURLパスに**含まれない**ことを示します。 ルートグループを使用したフォルダ構造の例 -ルートグループは以下のような場合に役立ちます： +ルートグループは以下の目的で役立ちます： -- [URLパスに影響を与えずにルートをグループ化する](/docs/app/building-your-application/routing/route-groups#organize-routes-without-affecting-the-url-path) 例：サイトセクション、意図、チームごとに +- サイトセクション、意図、またはチームごとにルートを整理する。例：マーケティングページ、管理ページなど - 同じルートセグメントレベルでネストされたレイアウトを有効にする： - - [複数のroot レイアウトを含む、同じセグメントで複数のネストされたレイアウトを作成する](/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts) - - [共通セグメント内のルートのサブセットにレイアウトを追加する](/docs/app/building-your-application/routing/route-groups#opting-specific-segments-into-a-layout) + - [同じセグメントで複数のネストされたレイアウトを作成する、複数のrootレイアウトを含む](#creating-multiple-root-layouts) + - [共通セグメント内のルートのサブセットにレイアウトを追加する](#opting-specific-segments-into-a-layout) ### `src`ディレクトリ {#src-directory} -Next.jsは、アプリケーションコード（`app`を含む）をオプションの[`src`ディレクトリ](/docs/app/building-your-application/configuring/src-directory)内に保存することをサポートしています。これにより、アプリケーションコードをプロジェクトの設定ファイルから分離できます。設定ファイルは主にプロジェクトのrootに存在します。 +Next.jsは、アプリケーションコード（`app`を含む）をオプションの[`src`ディレクトリ](/docs/app/building-your-application/configuring/src-directory)内に保存することをサポートしています。これにより、プロジェクトの設定ファイルが主にプロジェクトのrootに存在するのに対し、アプリケーションコードを分離できます。 `src`ディレクトリを使用したフォルダ構造の例 -### 一般的な戦略 {#common-strategies} +### 例 {#examples} -次のセクションでは、一般的な戦略の非常に高レベルな概要を示します。最も簡単な結論は、自分とチームに合った戦略を選び、プロジェクト全体で一貫性を保つことです。 +以下のセクションでは、一般的な戦略の非常に高レベルな概要を示します。最も簡単な結論は、あなたとあなたのチームに合った戦略を選び、プロジェクト全体で一貫性を保つことです。 > **Good to know**: 以下の例では、`components`と`lib`フォルダを一般的なプレースホルダーとして使用しています。これらの名前には特別なフレームワークの意味はなく、プロジェクトによっては`ui`、`utils`、`hooks`、`styles`などの他のフォルダを使用することがあります。 -#### プロジェクトファイルを`app`の外に保存する {#store-project-files-outside-of-app} +#### プロジェクトファイルを`app`の外に保管する {#store-project-files-outside-of-app} -この戦略では、すべてのアプリケーションコードをプロジェクトの**root**にある共有フォルダに保存し、`app`ディレクトリを純粋にルーティングの目的で使用します。 +この戦略では、すべてのアプリケーションコードをプロジェクトの**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内にプロジェクトファイルを保存したフォルダ構造の例 -#### プロジェクトファイルを機能またはルートごとに分割する {#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..a3988e47 100644 --- a/docs/01-app/01-getting-started/03-layouts-and-pages.mdx +++ b/docs/01-app/01-getting-started/03-layouts-and-pages.mdx @@ -1,21 +1,21 @@ --- title: 'レイアウトとページの作成方法' nav_title: 'レイアウトとページ' -description: '最初のページとレイアウトを作成し、それらをリンクします。' +description: '最初のページとレイアウトを作成し、それらをリンクする方法を学びます。' related: title: 'APIリファレンス' - description: 'このページで紹介されている機能について詳しくは、APIリファレンスをお読みください。' + description: 'このページで言及されている機能について、APIリファレンスを読んでさらに学びましょう。' links: - - app/api-reference/file-conventions/layout - - app/api-reference/file-conventions/page - - app/api-reference/components/link + - 'app/api-reference/file-conventions/layout' + - 'app/api-reference/file-conventions/page' + - 'app/api-reference/components/link' --- -Next.jsは**ファイルシステムベースのルーティング**を使用しており、フォルダとファイルを使用してルートを定義できます。このページでは、レイアウトとページの作成方法、およびそれらをリンクする方法を説明します。 +Next.jsは**ファイルシステムベースのルーティング**を使用しており、フォルダとファイルを使ってルートを定義できます。このページでは、レイアウトとページの作成方法、およびそれらをリンクする方法を案内します。 ## ページの作成 {#creating-a-page} -**ページ**は特定のルートでレンダリングされるUIです。ページを作成するには、`app`ディレクトリ内に[`page`ファイル](/docs/app/api-reference/file-conventions/page)を追加し、Reactコンポーネントをデフォルトエクスポートします。たとえば、インデックスページ（`/`）を作成するには： +**ページ**は特定のルートでレンダリングされるUIです。ページを作成するには、`app`ディレクトリ内に[`page`ファイル](/docs/app/api-reference/file-conventions/page)を追加し、Reactコンポーネントをデフォルトエクスポートします。たとえば、インデックスページ（`/`）を作成するには以下のようにします： page.js 特殊ファイル -上記のレイアウトは、`app`ディレクトリのルートに定義されているため、[root レイアウト](/docs/app/api-reference/file-conventions/layout#root-layouts)と呼ばれます。root レイアウトは**必須**であり、`html`および`body`タグを含める必要があります。 +上記のレイアウトは、`app`ディレクトリのrootに定義されているため、[root レイアウト](/docs/app/api-reference/file-conventions/layout#root-layouts)と呼ばれます。root レイアウトは**必須**であり、`html`および`body`タグを含める必要があります。 ## ネストされたルートの作成 {#creating-a-nested-route} @@ -115,10 +115,10 @@ export default function DashboardLayout({ children }) { Next.jsでは： -- **フォルダ**は、URLセグメントにマッピングされるルートセグメントを定義するために使用されます。 +- **フォルダ**は、URLセグメントにマップされるルートセグメントを定義するために使用されます。 - **ファイル**（`page`や`layout`など）は、セグメントに表示されるUIを作成するために使用されます。 -ネストされたルートを作成するには、フォルダを互いにネストできます。たとえば、`/blog`のルートを追加するには、`app`ディレクトリに`blog`というフォルダを作成します。次に、`/blog`を公開するには、`page`ファイルを追加します： +ネストされたルートを作成するには、フォルダを互いにネストできます。たとえば、`/blog`のルートを追加するには、`app`ディレクトリに`blog`というフォルダを作成します。次に、`/blog`を公開アクセス可能にするために、`page.tsx`ファイルを追加します： blogフォルダとpage.jsファイルを示すファイル階層 ```tsx title="app/blog/page.tsx" switcher +// ダミーインポート import { getPosts } from '@/lib/posts' import { Post } from '@/ui/post' @@ -154,6 +155,7 @@ export default async function Page() { ```jsx title="app/blog/[slug]/page.js" switcher +// ダミーインポート import { getPosts } from '@/lib/posts' import { Post } from '@/ui/post' @@ -173,10 +175,10 @@ export default async function Page() { -フォルダをネストし続けて、ネストされたルートを作成できます。たとえば、特定のブログ投稿のルートを作成するには、`blog`内に新しい`[slug]`フォルダを作成し、`page`ファイルを追加します： +フォルダをさらにネストして、ネストされたルートを作成し続けることができます。たとえば、特定のブログ投稿のルートを作成するには、`blog`内に新しい`[slug]`フォルダを作成し、`page`ファイルを追加します： slugフォルダとpage.jsファイルをネストしたblogフォルダを示すファイル階層 -> **Good to know**: フォルダ名を角括弧で囲む（例：`[slug]`）と、データから複数のページを生成するための特別な[dynamic route segment](/docs/app/building-your-application/routing/dynamic-routes)が作成されます。これは、ブログ投稿や商品ページなどに便利です。 +フォルダ名を角括弧で囲む（例：`[slug]`）と、[dynamic route segment](/docs/app/building-your-application/routing/dynamic-routes)が作成され、データから複数のページを生成するために使用されます。例：ブログ投稿、商品ページなど。 ## レイアウトのネスト {#nesting-layouts} -デフォルトでは、フォルダ階層内のレイアウトもネストされており、`children`プロップを介して子レイアウトをラップします。特定のルートセグメント（フォルダ）内に`layout`を追加することで、レイアウトをネストできます。 +デフォルトでは、フォルダ階層内のレイアウトもネストされており、`children` propを介して子レイアウトをラップします。特定のルートセグメント（フォルダ）内に`layout`を追加することで、レイアウトをネストできます。 たとえば、`/blog`ルートのレイアウトを作成するには、`blog`フォルダ内に新しい`layout`ファイルを追加します。 root レイアウトがblogレイアウトをラップしているファイル階層`コンポーネント](/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..540112e0 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 @@ -6,32 +6,20 @@ related: title: 'APIリファレンス' description: 'このページで言及されている機能について詳しくは、APIリファレンスをお読みください。' links: - - app/api-reference/components/font - - app/api-reference/components/image + - 'app/api-reference/components/font' + - 'app/api-reference/components/image' --- -Next.jsには、パフォーマンスとユーザーエクスペリエンスを向上させるための自動画像およびフォント最適化機能が備わっています。このページでは、それらの使い方を説明します。 - -## 静的アセットの取り扱い {#handling-static-assets} - -画像やフォントなどの静的ファイルは、ルートディレクトリ内の`public`というフォルダに保存できます。`public`内のファイルは、ベースURL（`/`）から始まるコードで参照できます。 - -アプリとパブリックフォルダを示すフォルダ構造 +Next.jsには自動的な画像とフォントの最適化機能が備わっています。このページでは、それらの使い方を説明します。 ## 画像の最適化 {#optimizing-images} -Next.jsの[``](/docs/app/building-your-application/optimizing/images)コンポーネントは、HTMLの``要素を拡張して以下を提供します： +Next.jsの[``](/docs/app/building-your-application/optimizing/images)コンポーネントは、HTMLの``要素を拡張して以下の機能を提供します： -- **サイズの最適化：** WebPなどの最新の画像フォーマットを使用して、各デバイスに適したサイズの画像を自動的に提供します +- **サイズの最適化：** 各デバイスに対して適切なサイズの画像を自動的に提供し、WebPのような最新の画像フォーマットを使用します - **視覚的安定性：** 画像の読み込み時に[レイアウトシフト](https://web.dev/articles/cls)を自動的に防ぎます -- **高速なページ読み込み：** ネイティブブラウザの遅延読み込みを使用して、画像がビューポートに入ったときにのみ画像を読み込み、オプションでぼかしプレースホルダーを使用します -- **アセットの柔軟性：** リモートサーバーに保存されている画像でも、オンデマンドで画像をリサイズします +- **ページの高速読み込み：** ネイティブブラウザの遅延読み込みを使用して、画像がビューポートに入ったときにのみ読み込み、オプションでぼかしプレースホルダーを使用します +- **アセットの柔軟性：** リモートサーバーに保存された画像であっても、オンデマンドで画像をリサイズします ``を使用するには、`next/image`からインポートし、コンポーネント内でレンダリングします。 @@ -60,11 +48,19 @@ export default function Page() { -`src`プロパティは、[ローカル](#local-images)または[リモート](#remote-images)の画像にすることができます。 +`src`プロパティは[ローカル](#local-images)または[リモート](#remote-images)の画像を指定できます。 ### ローカル画像 {#local-images} -ローカル画像を使用するには、[`public`フォルダ](#handling-static-assets)から`.jpg`、`.png`、または`.webp`画像ファイルを`import`します。 +静的ファイル（画像やフォントなど）は、ルートディレクトリの`public`というフォルダに保存できます。`public`内のファイルは、ベースURL（`/`）から始めてコードで参照できます。 + +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" // 読み込み中のぼかしをオプションで表示 /> ) } @@ -111,11 +107,11 @@ export default function Page() { -Next.jsは、インポートされたファイルに基づいて画像の固有の[`width`](/docs/app/api-reference/components/image#width)と[`height`](/docs/app/api-reference/components/image#height)を自動的に決定します。これらの値は、画像の比率を決定し、画像の読み込み中に[Cumulative Layout Shift](https://web.dev/articles/cls)を防ぐために使用されます。 +Next.jsは、インポートされたファイルに基づいて画像の本来の[`width`](/docs/app/api-reference/components/image#width)と[`height`](/docs/app/api-reference/components/image#height)を自動的に決定します。これらの値は、画像の比率を決定し、画像の読み込み中に[Cumulative Layout Shift](https://web.dev/articles/cls)を防ぐために使用されます。 ### リモート画像 {#remote-images} -リモート画像を使用するには、`src`プロパティにURL文字列を指定できます。 +リモート画像を使用するには、`src`プロパティにURL文字列を指定します。 @@ -156,9 +152,9 @@ export default function Page() { -Next.jsはビルドプロセス中にリモートファイルにアクセスできないため、[`width`](/docs/app/api-reference/components/image#width)、[`height`](/docs/app/api-reference/components/image#height)、およびオプションの[`blurDataURL`](/docs/app/api-reference/components/image#blurdataurl) propsを手動で指定する必要があります。`width`と`height`属性は、画像の正しいアスペクト比を推測し、画像の読み込みによるレイアウトシフトを回避するために使用されます。 +Next.jsはビルドプロセス中にリモートファイルにアクセスできないため、[`width`](/docs/app/api-reference/components/image#width)、[`height`](/docs/app/api-reference/components/image#height)、およびオプションの[`blurDataURL`](/docs/app/api-reference/components/image#blurdataurl)のpropsを手動で指定する必要があります。`width`と`height`は、画像の正しいアスペクト比を推測し、画像の読み込みによるレイアウトシフトを防ぐために使用されます。 -次に、リモートサーバーからの画像を安全に許可するために、[`next.config.js`](/docs/app/api-reference/config/next-config-js)でサポートされるURLパターンのリストを定義する必要があります。悪意のある使用を防ぐために、できるだけ具体的にしてください。たとえば、次の設定では、特定のAWS S3バケットからの画像のみが許可されます： +リモートサーバーからの画像を安全に許可するには、[`next.config.js`](/docs/app/api-reference/config/next-config-js)でサポートされるURLパターンのリストを定義する必要があります。悪意のある使用を防ぐために、できるだけ具体的に指定してください。たとえば、次の設定では、特定のAWS S3バケットからの画像のみを許可します： @@ -209,7 +205,7 @@ module.exports = { [`next/font`](/docs/app/api-reference/components/font)モジュールは、フォントを自動的に最適化し、外部ネットワークリクエストを削除してプライバシーとパフォーマンスを向上させます。 -これは、*任意の*フォントファイルに対する**組み込みの自動セルフホスティング**を含んでいます。これにより、レイアウトシフトなしでWebフォントを最適に読み込むことができます。 +これは、任意のフォントファイルに対して**組み込みのセルフホスティング**を含んでいます。これにより、レイアウトシフトなしでWebフォントを最適に読み込むことができます。 `next/font`を使用するには、[`next/font/local`](#local-fonts)または[`next/font/google`](#google-fonts)からインポートし、適切なオプションで関数として呼び出し、フォントを適用したい要素の`className`を設定します。例えば： @@ -305,12 +301,12 @@ export default function RootLayout({ children }) { -最高のパフォーマンスと柔軟性を得るために、[可変フォント](https://fonts.google.com/variablefonts)を使用することをお勧めします。しかし、可変フォントを使用できない場合は、**ウェイトを指定する必要があります**： +最良のパフォーマンスと柔軟性を得るために、[可変フォント](https://fonts.google.com/variablefonts)の使用をお勧めします。しかし、可変フォントを使用できない場合は、ウェイトを指定する必要があります： -```tsx title="app/layout.tsx" switcher +```tsx title="app/layout.tsx" highlight={4} switcher import { Roboto } from 'next/font/google' const roboto = Roboto({ @@ -334,7 +330,7 @@ export default function RootLayout({ -```jsx title="app/layout.js" highlight={1,3-5,9} switcher +```jsx title="app/layout.js" highlight={4} switcher import { Roboto } from 'next/font/google' const roboto = Roboto({ @@ -356,7 +352,7 @@ export default function RootLayout({ children }) { ### ローカルフォント {#local-fonts} -ローカルフォントを使用するには、`next/font/local`からフォントをインポートし、[`public`フォルダ](#handling-static-assets)内のローカルフォントファイルの`src`を指定します。 +ローカルフォントを使用するには、`next/font/local`からフォントをインポートし、ローカルフォントファイルの[`src`](/docs/app/api-reference/components/font#src)を指定します。 diff --git a/docs/01-app/01-getting-started/05-css.mdx b/docs/01-app/01-getting-started/05-css.mdx index 49ca35c7..cc19dc78 100644 --- a/docs/01-app/01-getting-started/05-css.mdx +++ b/docs/01-app/01-getting-started/05-css.mdx @@ -1,7 +1,7 @@ --- 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リファレンスをお読みください。' @@ -19,11 +19,11 @@ 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`ディレクトリ内の任意のコンポーネントにインポートします： @@ -62,7 +62,7 @@ export default function Page({ children }) { グローバルCSSを使用して、アプリケーション全体にスタイルを適用できます。 -グローバルスタイルを使用するには、新しいCSSファイルを作成します。例えば、`app/global.css`： +グローバルスタイルを使用するには、`app/global.css`ファイルを作成し、root レイアウトでインポートして、アプリケーション内の**すべてのルート**にスタイルを適用します： ```css title="app/global.css" body { @@ -72,8 +72,6 @@ body { } ``` -ファイルをroot レイアウト（`app/layout.js`）にインポートして、アプリケーション内の**すべてのルート**にスタイルを適用します： - @@ -113,7 +111,7 @@ export default function RootLayout({ children }) { -> **Good to know:** グローバルスタイルは、`app`ディレクトリ内の任意のレイアウト、ページ、またはコンポーネントにインポートできます。ただし、Next.jsはReactの組み込みのスタイルシートサポートを使用してSuspenseと統合します。この組み込みサポートは、ルート間を移動する際にスタイルシートを削除しません。そのため、*本当に*グローバルなCSSにはグローバルスタイルを使用し、スコープされたCSSには[CSS Modules](#css-modules)を使用することをお勧めします。 +> **Good to know:** グローバルスタイルは、`app`ディレクトリ内の任意のレイアウト、ページ、またはコンポーネントにインポートできます。ただし、Next.jsはReactの組み込みのスタイルシートサポートを使用してSuspenseと統合するため、現在のところ、ルート間を移動する際にスタイルシートが削除されず、競合が発生する可能性があります。*本当に*グローバルなCSSにはグローバルスタイルを使用し、スコープされたCSSには[CSS Modules](#css-modules)を使用することをお勧めします。 ## Tailwind CSS {#tailwind-css} @@ -124,7 +122,7 @@ export default function RootLayout({ children }) { Tailwindを使用し始めるには、必要なTailwind CSSパッケージをインストールします： ```bash title="Terminal" -npm install -D tailwindcss @tailwindcss/postcss postcss +npm install tailwindcss @tailwindcss/postcss postcss ``` ### Tailwindの設定 {#configuring-tailwind} @@ -148,14 +146,13 @@ export default { @import 'tailwindcss'; ``` -次に、スタイルを[ルートレイアウト](/docs/app/api-reference/file-conventions/layout#root-layouts)にインポートします： +その後、スタイルを[ルートレイアウト](/docs/app/api-reference/file-conventions/layout#root-layouts)にインポートします： ```tsx title="app/layout.tsx" switcher import type { Metadata } from 'next' - // これらのスタイルはアプリケーション内のすべてのルートに適用されます import './globals.css' @@ -201,7 +198,7 @@ export default function RootLayout({ children }) { -最後に、アプリケーション内でTailwindのユーティリティクラスを書き始めることができます。 +その後、アプリケーション内でTailwindのユーティリティクラスを書き始めることができます。 @@ -277,9 +274,9 @@ export default nextConfig ## CSS-in-JS {#css-in-js} -> **Warning:** ランタイムJavaScriptを必要とするCSS-in-JSライブラリは、現在React Server Componentsではサポートされていません。CSS-in-JSをServer ComponentsやStreamingなどの新しいReact機能と共に使用するには、ライブラリの作者が最新のReactバージョンをサポートする必要があります。 +> **Warning:** ランタイムJavaScriptを必要とするCSS-in-JSライブラリは、現在React Server Componentsではサポートされていません。Server ComponentsやStreamingなどの新しいReact機能とCSS-in-JSを使用するには、ライブラリの作者が最新のReactバージョンをサポートする必要があります。 -次のライブラリは、`app`ディレクトリ内の**Client Components**でサポートされています（アルファベット順）： +以下のライブラリは、`app`ディレクトリ内の**Client Components**でサポートされています（アルファベット順）： - [`ant-design`](https://ant.design/docs/react/use-with-next#using-app-router) - [`chakra-ui`](https://chakra-ui.com/docs/get-started/frameworks/next-app) 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..ee483956 100644 --- a/docs/01-app/01-getting-started/06-fetching-data.mdx +++ b/docs/01-app/01-getting-started/06-fetching-data.mdx @@ -1,10 +1,10 @@ --- -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' @@ -16,14 +16,14 @@ related: ### 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をpropとしてClient Componentに渡します： @@ -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-loadingjs)を使用する +2. Reactの[``コンポーネント](#with-suspense)を使用する -### `loading.js` を使用する {#with-loading-js} +### `loading.js`を使用する {#with-loading-js} -ページと同じフォルダに `loading.js` ファイルを作成して、データが取得されている間に**ページ全体**をストリーミングできます。例えば、`app/blog/page.js` をストリーミングするには、`app/blog` フォルダ内にファイルを追加します。 +ページと同じフォルダに`loading.js`ファイルを作成して、データが取得されている間に**ページ全体**をストリーミングできます。例えば、`app/blog/page.js`をストリーミングするには、`app/blog`フォルダ内にファイルを追加します。 loading.js ファイルを含むブログフォルダ構造Loading... } ``` @@ -319,7 +319,7 @@ export default function Loading() { ```jsx title="app/blog/loading.js" switcher export default function Loading() { - // ここで読み込み中の UI を定義します + // ここでLoading UIを定義 return
Loading...
} ``` @@ -327,31 +327,31 @@ export default function Loading() { -ナビゲーション時に、ユーザーはページがレンダリングされている間にレイアウトと[読み込み状態](#creating-meaningful-loading-states)をすぐに見ることができます。レンダリングが完了すると、新しいコンテンツが自動的に入れ替わります。 +ナビゲーション時に、ユーザーはページがレンダリングされている間、レイアウトと[ローディング状態](#creating-meaningful-loading-states)をすぐに見ることができます。レンダリングが完了すると、新しいコンテンツが自動的に入れ替わります。 読み込み中の UI -舞台裏では、`loading.js` は `layout.js` 内にネストされ、`page.js` ファイルとその下のすべての子を自動的に `` boundary でラップします。 +裏側では、`loading.js`は`layout.js`内にネストされ、`page.js`ファイルとその下のすべての子を自動的に`` boundaryでラップします。 loading.js の概要 -このアプローチはルートセグメント（レイアウトとページ）に適していますが、より細かいストリーミングには `` を使用できます。 +このアプローチはルートセグメント（レイアウトとページ）に適していますが、より細かいストリーミングには``を使用できます。 -### `` を使用する {#with-suspense} +### ``を使用する {#with-suspense} -`` を使用すると、ページのどの部分をストリーミングするかをより細かく制御できます。例えば、`` boundary の外にあるページコンテンツをすぐに表示し、boundary 内のブログ投稿のリストをストリーミングできます。 +``を使用すると、ページのどの部分をストリーミングするかをより細かく制御できます。例えば、`` boundaryの外にあるページコンテンツをすぐに表示し、boundary内のブログ投稿のリストをストリーミングできます。 @@ -370,7 +370,7 @@ export default function BlogPage() {

Read the latest posts below.

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

Read the latest posts below.

- {/* boundary でラップされたコンテンツはストリーミングされます */} + {/* boundaryでラップされたコンテンツはストリーミングされます */} }> @@ -410,8 +410,8 @@ export default function BlogPage() { -### 意味のある読み込み状態の作成 {#creating-meaningful-loading-states} +### 意味のあるローディング状態の作成 {#creating-meaningful-loading-states} -インスタント読み込み状態は、ナビゲーション後にユーザーにすぐに表示されるフォールバック UI です。最良のユーザーエクスペリエンスを提供するために、意味のある読み込み状態を設計し、アプリが応答していることをユーザーに理解させることをお勧めします。例えば、スケルトンやスピナー、またはカバーフォトやタイトルなどの将来の画面の小さくても意味のある部分を使用できます。 +インスタントローディング状態は、ナビゲーション後にユーザーにすぐに表示されるフォールバックUIです。最良のユーザーエクスペリエンスを提供するために、意味のあるローディング状態を設計し、アプリが応答していることをユーザーに理解させることをお勧めします。例えば、スケルトンやスピナー、またはカバーフォトやタイトルなどの将来の画面の小さくても意味のある部分を使用できます。 -開発中は、[React Devtools](https://react.dev/learn/react-developer-tools)を使用してコンポーネントの読み込み状態をプレビューおよび検査できます。 +開発中は、[React Devtools](https://react.dev/learn/react-developer-tools)を使用してコンポーネントのローディング状態をプレビューおよび検査できます。 diff --git a/docs/01-app/01-getting-started/07-updating-data.mdx b/docs/01-app/01-getting-started/07-updating-data.mdx index 17f369cd..71214a58 100644 --- a/docs/01-app/01-getting-started/07-updating-data.mdx +++ b/docs/01-app/01-getting-started/07-updating-data.mdx @@ -15,28 +15,50 @@ Next.jsでは、Reactの[Server Functions](https://react.dev/reference/rsc/serve ## Server Functionsの作成 {#creating-server-functions} -Server Functionは、[`use server`](https://react.dev/reference/rsc/use-server)ディレクティブを使用して定義できます。このディレクティブを**非同期**関数の先頭に置くことで、その関数をServer Functionとしてマークするか、別のファイルの先頭に置いてそのファイルのすべてのエクスポートをマークします。ほとんどの場合、別のファイルを使用することをお勧めします。 +Server Functionは、[`use server`](https://react.dev/reference/rsc/use-server)ディレクティブを使用して定義できます。このディレクティブを**非同期**関数の先頭に置くことで、その関数をServer Functionとしてマークするか、別のファイルの先頭に置いてそのファイルのすべてのエクスポートをマークします。 ```ts title="app/lib/actions.ts" switcher -'use server' +export async function createPost(formData: FormData) { + 'use server' + const title = formData.get('title') + const content = formData.get('content') + + // データを更新 + // キャッシュを再検証 +} -export async function createPost(formData: FormData) {} +export async function deletePost(formData: FormData) { + 'use server' + const id = formData.get('id') -export async function deletePost(formData: FormData) {} + // データを更新 + // キャッシュを再検証 +} ``` ```js title="app/lib/actions.js" switcher -'use server' +export async function createPost(formData) { + 'use server' + const title = formData.get('title') + const content = formData.get('content') -export async function createPost(formData) {} + // データを更新 + // キャッシュを再検証 +} -export async function deletePost(formData) {} +export async function deletePost(formData) { + 'use server' + const id = formData.get('id') + + // データを更新 + // キャッシュを再検証 +} ``` @@ -44,7 +66,7 @@ export async function deletePost(formData) {} ### Server Components {#server-components} -Server Functionsは、関数本体の先頭に`"use server"`ディレクティブを追加することでServer Componentsにインライン化できます： +Server Functionsは、関数本体の先頭に`"use server"`ディレクティブを追加することで、Server Componentsにインライン化できます： @@ -52,9 +74,8 @@ Server Functionsは、関数本体の先頭に`"use server"`ディレクティ ```tsx title="app/page.tsx" switcher export default function Page() { // Server Action - async function createPost() { + async function createPost(formData: FormData) { 'use server' - // データを更新 // ... } @@ -68,9 +89,8 @@ export default function Page() { ```jsx title="app/page.js" switcher export default function Page() { // Server Action - async function createPost() { + async function createPost(formData: FormData) { 'use server' - // データを更新 // ... } @@ -83,7 +103,7 @@ export default function Page() { ### Client Components {#client-components} -Client ComponentsでServer Functionsを定義することはできません。ただし、`"use server"`ディレクティブが先頭にあるファイルからインポートすることで、Client Componentsで呼び出すことができます： +Client ComponentsでServer Functionsを定義することはできません。ただし、`"use server"`ディレクティブがファイルの先頭にあるファイルからインポートすることで、Client Componentsで呼び出すことができます： @@ -139,12 +159,12 @@ export function Button() { Server Functionを呼び出す主な方法は2つあります： -1. ServerおよびClient Components内の[フォーム](#forms) -2. Client Components内の[イベントハンドラ](#event-handlers) +1. ServerおよびClient Componentsでの[フォーム](#forms) +2. Client Componentsでの[イベントハンドラ](#event-handlers) ### フォーム {#forms} -ReactはHTMLの[`
`](https://react.dev/reference/react-dom/components/form)要素を拡張して、Server FunctionをHTMLの`action`プロップで呼び出せるようにしています。 +ReactはHTMLの[``](https://react.dev/reference/react-dom/components/form)要素を拡張して、Server FunctionをHTMLの`action`プロパティで呼び出せるようにしています。 フォームで呼び出されると、関数は自動的に[`FormData`](https://developer.mozilla.org/docs/Web/API/FormData/FormData)オブジェクトを受け取ります。ネイティブの[`FormData`メソッド](https://developer.mozilla.org/en-US/docs/Web/API/FormData#instance_methods)を使用してデータを抽出できます： @@ -218,11 +238,11 @@ export async function createPost(formData) { -> **Good to know:** `action`プロップに渡されると、Server Functionsは*Server Actions*とも呼ばれます。 +> **Good to know:** `action`プロパティに渡されると、Server Functionsは*Server Actions*とも呼ばれます。 ### イベントハンドラ {#event-handlers} -Client Component内で`onClick`などのイベントハンドラを使用してServer Functionを呼び出すことができます。 +Client Componentで`onClick`などのイベントハンドラを使用してServer Functionを呼び出すことができます。 @@ -283,9 +303,11 @@ export default function LikeButton({ initialLikes }) { +## 例 {#examples} + ### 保留状態の表示 {#showing-a-pending-state} -Server Functionを実行している間、Reactの[`useActionState`](https://react.dev/reference/react/useActionState)フックを使用してローディングインジケーターを表示できます。このフックは`pending`ブール値を返します： +Server Functionを実行中に、Reactの[`useActionState`](https://react.dev/reference/react/useActionState)フックを使用してローディングインジケータを表示できます。このフックは`pending`ブール値を返します： @@ -340,11 +362,10 @@ export function Button() { ```ts title="app/lib/actions.ts" switcher -'use server' - import { revalidatePath } from 'next/cache' export async function createPost(formData: FormData) { + 'use server' // データを更新 // ... @@ -358,11 +379,10 @@ export async function createPost(formData: FormData) { ```js title="app/actions.js" switcher -'use server' - import { revalidatePath } from 'next/cache' export async function createPost(formData) { + 'use server' // データを更新 // ... revalidatePath('/posts') diff --git a/docs/01-app/01-getting-started/08-error-handling.mdx b/docs/01-app/01-getting-started/08-error-handling.mdx index bd34e23f..c346a13d 100644 --- a/docs/01-app/01-getting-started/08-error-handling.mdx +++ b/docs/01-app/01-getting-started/08-error-handling.mdx @@ -3,8 +3,8 @@ title: 'エラーの処理方法' nav_title: 'エラー処理' description: '予期されたエラーの表示方法とキャッチされない例外の処理方法を学びます。' related: - title: 'APIリファレンス' - description: 'このページで言及されている機能について詳しくは、APIリファレンスを参照してください。' + title: 'API リファレンス' + description: 'このページで言及されている機能について詳しく知るには、API リファレンスをお読みください。' links: - app/api-reference/functions/redirect - app/api-reference/file-conventions/error @@ -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`を使用してエラーメッセージを表示できます。 @@ -134,7 +136,7 @@ export function Form() { ### Server Components {#server-components} -Server Component内でデータを取得する際、レスポンスを使用してエラーメッセージを条件付きでレンダリングしたり、[`redirect`](/docs/app/api-reference/functions/redirect)を使用したりできます。 +Server Component内でデータをフェッチする際、レスポンスを使用してエラーメッセージを条件付きでレンダリングしたり、[`redirect`](/docs/app/api-reference/functions/redirect)を使用したりできます。 @@ -237,11 +239,11 @@ export default function NotFound() { ## キャッチされない例外の処理 {#handling-uncaught-exceptions} -キャッチされない例外は、アプリケーションの通常のフロー中に発生すべきでないバグや問題を示す予期しないエラーです。これらはエラーをスローすることで処理され、その後error boundaryによってキャッチされます。 +キャッチされない例外は、アプリケーションの通常のフロー中に発生すべきではないバグや問題を示す予期しないエラーです。これらはエラーをスローすることで処理され、その後error boundaryによってキャッチされます。 ### ネストされたerror boundary {#nested-error-boundaries} -Next.jsはキャッチされない例外を処理するためにerror boundaryを使用します。error boundaryは子コンポーネント内のエラーをキャッチし、クラッシュしたコンポーネントツリーの代わりにフォールバックUIを表示します。 +Next.jsは、キャッチされない例外を処理するためにerror boundaryを使用します。error boundaryは、その子コンポーネント内のエラーをキャッチし、クラッシュしたコンポーネントツリーの代わりにフォールバックUIを表示します。 ルートセグメント内に[`error.js`](/docs/app/api-reference/file-conventions/error)ファイルを追加し、Reactコンポーネントをエクスポートすることでerror boundaryを作成します。 diff --git a/docs/01-app/01-getting-started/10-metadata-and-og-images.mdx b/docs/01-app/01-getting-started/10-metadata-and-og-images.mdx index 65fb0278..463f4d33 100644 --- a/docs/01-app/01-getting-started/10-metadata-and-og-images.mdx +++ b/docs/01-app/01-getting-started/10-metadata-and-og-images.mdx @@ -13,11 +13,11 @@ related: - 'app/api-reference/functions/image-response' --- -メタデータAPIを使用すると、SEOの向上やWebの共有性を高めるためにアプリケーションのメタデータを定義できます。以下を含みます： +メタデータAPIは、SEOの向上やWebの共有性を高めるためにアプリケーションのメタデータを定義するために使用できます。以下を含みます： 1. [静的な `metadata` オブジェクト](#static-metadata) 2. [動的な `generateMetadata` 関数](#generated-metadata) -3. 静的または動的に生成された[favicon](#favicons)や[OG画像](#static-open-graph-images)を追加するための特別な[ファイル規約](/docs/app/api-reference/file-conventions/metadata) +3. 静的または動的に生成された[favicon](#favicons)や[OG画像](#static-open-graph-images)を追加するために使用できる特別な[ファイル規約](/docs/app/api-reference/file-conventions/metadata) 上記のすべてのオプションを使用すると、Next.jsはページに関連する``タグを自動的に生成し、ブラウザの開発者ツールで確認できます。 @@ -25,15 +25,15 @@ related: ルートがメタデータを定義していない場合でも、常に追加されるデフォルトの`meta`タグが2つあります： -- [meta charsetタグ](https://developer.mozilla.org/docs/Web/HTML/Element/meta#attr-charset)は、Webサイトの文字エンコーディングを設定します -- [meta viewportタグ](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag)は、異なるデバイスに合わせてWebサイトのビューポート幅とスケールを設定します +- [meta charsetタグ](https://developer.mozilla.org/docs/Web/HTML/Element/meta#attr-charset)は、ウェブサイトの文字エンコーディングを設定します +- [meta viewportタグ](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag)は、異なるデバイスに合わせてウェブサイトのビューポート幅とスケールを設定します ```html ``` -他のメタデータフィールドは、`Metadata`オブジェクト（[静的メタデータ](#static-metadata)用）または`generateMetadata`関数（[生成されたメタデータ](#generated-metadata)用）で定義できます。 +他のメタデータフィールドは、`Metadata`オブジェクト（[静的メタデータ](#static-metadata)の場合）または`generateMetadata`関数（[生成されたメタデータ](#generated-metadata)の場合）で定義できます。 ## 静的メタデータ {#static-metadata} @@ -129,20 +129,20 @@ export default function Page({ params, searchParams }) {} -Next.jsは、メタデータをUIとは別にストリームし、解決され次第HTMLにメタデータを注入します。 +Next.jsは、UIとは別にメタデータをストリームし、解決され次第HTMLにメタデータを注入します。 ### データリクエストのメモ化 {#memoizing-data-requests} -メタデータとページ自体の両方に**同じ**データを取得する必要がある場合があります。重複したリクエストを避けるために、Reactの[`cache`関数](https://react.dev/reference/react/cache)を使用して戻り値をメモ化し、データを一度だけ取得します。たとえば、メタデータとページの両方にブログ投稿情報を取得するには： +メタデータとページ自体の両方に対して**同じ**データを取得する必要がある場合があります。重複したリクエストを避けるために、Reactの[`cache`関数](https://react.dev/reference/react/cache)を使用して戻り値をメモ化し、データを一度だけ取得します。たとえば、メタデータとページの両方に対してブログ投稿情報を取得するには： -```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 @@ -229,7 +229,7 @@ Faviconsは、ブックマークや検索結果でサイトを表す小さなア ## 静的Open Graph画像 {#static-open-graph-images} -Open Graph（OG）画像は、ソーシャルメディアでサイトを表す画像です。アプリケーションに静的なOG画像を追加するには、`opengraph-image.png`ファイルをアプリフォルダのrootに作成します。 +Open Graph (OG)画像は、ソーシャルメディアでサイトを表す画像です。アプリケーションに静的なOG画像を追加するには、アプリフォルダのrootに`opengraph-image.png`ファイルを作成します。 Appフォルダ内の特別なファイルとしてのOG画像、レイアウトファイルとページファイルの隣に配置 -`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に変換します。 -> - flexboxとCSSプロパティのサブセットのみがサポートされています。高度なレイアウト（例：`display: grid`）は機能しません。 +> - 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..9d3849c7 100644 --- a/docs/01-app/03-building-your-application/01-routing/03-layouts-and-templates.mdx +++ b/docs/01-app/03-building-your-application/01-routing/03-layouts-and-templates.mdx @@ -1,15 +1,15 @@ --- -title: 'Layouts and Templates' +title: 'LayoutsとTemplates' description: 'Next.jsで最初の共有レイアウトを作成します。' --- -特別なファイルである[layout.js](#layouts)と[template.js](#templates)を使用すると、ルート間で共有されるUIを作成できます。このページでは、これらの特別なファイルをどのように、そしていつ使用するかを案内します。 +特別なファイルである[layout.js](#layouts)と[template.js](#templates)を使用すると、ルート間で共有されるUIを作成できます。このページでは、これらの特別なファイルをどのように、そしていつ使用するかについて説明します。 ## Layouts {#layouts} レイアウトは、複数のルート間で**共有**されるUIです。ナビゲーション時に、レイアウトは状態を保持し、インタラクティブなままで、再レンダリングされません。レイアウトは[ネスト](#nesting-layouts)することもできます。 -`layout.js`ファイルからReactコンポーネントをデフォルトエクスポートすることで、レイアウトを定義できます。コンポーネントは、レンダリング中に子レイアウト（存在する場合）またはページで埋められる`children`プロップを受け入れる必要があります。 +`layout.js`ファイルからReactコンポーネントをデフォルトエクスポートすることで、レイアウトを定義できます。このコンポーネントは、レンダリング中に子レイアウト（存在する場合）またはページで埋められる`children` propを受け入れる必要があります。 たとえば、レイアウトは`/dashboard`および`/dashboard/settings`ページと共有されます： @@ -62,7 +62,7 @@ export default function DashboardLayout({ -### Root Layout (必須) {#root-layout-required} +### Root Layout（必須） {#root-layout-required} root レイアウトは`app`ディレクトリのトップレベルで定義され、すべてのルートに適用されます。このレイアウトは**必須**であり、`html`および`body`タグを含める必要があります。これにより、サーバーから返される初期HTMLを変更できます。 @@ -107,7 +107,7 @@ export default function RootLayout({ children }) { ### ネストされたレイアウト {#nesting-layouts} -デフォルトでは、フォルダ階層内のレイアウトは**ネスト**されており、`children`プロップを介して子レイアウトをラップします。特定のルートセグメント（フォルダ）内に`layout.js`を追加することで、レイアウトをネストできます。 +デフォルトでは、フォルダ階層内のレイアウトは**ネスト**されており、`children` propを介して子レイアウトをラップします。特定のルートセグメント（フォルダ）内に`layout.js`を追加することで、レイアウトをネストできます。 たとえば、`/dashboard`ルートのレイアウトを作成するには、`dashboard`フォルダ内に新しい`layout.js`ファイルを追加します： @@ -158,28 +158,28 @@ export default function DashboardLayout({ children }) { > **Good to know**: > -> - レイアウトには`.js`、`.jsx`、または`.tsx`ファイル拡張子を使用できます。 +> - Layoutsには`.js`、`.jsx`、または`.tsx`ファイル拡張子を使用できます。 > - ``および``タグを含めることができるのはroot レイアウトのみです。 > - 同じフォルダに`layout.js`と`page.js`ファイルが定義されている場合、レイアウトはページをラップします。 -> - レイアウトはデフォルトで[Server Components](/docs/app/building-your-application/rendering/server-components)ですが、[Client Component](/docs/app/building-your-application/rendering/client-components)に設定できます。 +> - レイアウトはデフォルトで[Server Components](/docs/app/building-your-application/rendering/server-components)ですが、[Client Component](/docs/app/building-your-application/rendering/client-components)に設定することもできます。 > - レイアウトはデータを取得できます。詳細は[データ取得](/docs/app/building-your-application/data-fetching)セクションを参照してください。 > - 親レイアウトとその子の間でデータを渡すことはできません。ただし、ルートで同じデータを複数回取得することができ、Reactはパフォーマンスに影響を与えることなく[リクエストを自動的に重複排除](/docs/app/building-your-application/caching#request-memoization)します。 -> - レイアウトは`pathname`にアクセスできません（[詳細はこちら](/docs/app/api-reference/file-conventions/layout)）。ただし、インポートされたClient Componentsは[`usePathname`](/docs/app/api-reference/functions/use-pathname)フックを使用してパス名にアクセスできます。 +> - レイアウトは`pathname`にアクセスできません（[詳細はこちら](/docs/app/api-reference/file-conventions/layout)）。ただし、インポートされたClient Componentsは[`usePathname`](/docs/app/api-reference/functions/use-pathname)フックを使用して`pathname`にアクセスできます。 > - レイアウトは自分自身の下のルートセグメントにアクセスできません。すべてのルートセグメントにアクセスするには、Client Componentで[`useSelectedLayoutSegment`](/docs/app/api-reference/functions/use-selected-layout-segment)または[`useSelectedLayoutSegments`](/docs/app/api-reference/functions/use-selected-layout-segments)を使用できます。 > - [Route Groups](/docs/app/building-your-application/routing/route-groups)を使用して、特定のルートセグメントを共有レイアウトに含めたり除外したりできます。 -> - [Route Groups](/docs/app/building-your-application/routing/route-groups)を使用して、複数のroot レイアウトを作成できます。[こちらの例](/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts)を参照してください。 -> - **`pages`ディレクトリからの移行：** root レイアウトは[`_app.js`](https://nextjs.org/docs/canary/pages/building-your-application/routing/custom-app)および[`_document.js`](https://nextjs.org/docs/canary/pages/building-your-application/routing/custom-document)ファイルを置き換えます。[移行ガイドを参照](/docs/app/building-your-application/upgrading/app-router-migration#migrating-_documentjs-and-_appjs)。 +> - [Route Groups](/docs/app/building-your-application/routing/route-groups)を使用して、複数のroot レイアウトを作成できます。[こちらの例](/docs/app/getting-started/project-structure#creating-multiple-root-layouts)を参照してください。 +> - **`pages`ディレクトリからの移行：** root レイアウトは[`_app.js`](https://nextjs.org/docs/canary/pages/building-your-application/routing/custom-app)および[`_document.js`](https://nextjs.org/docs/canary/pages/building-your-application/routing/custom-document)ファイルを置き換えます。[移行ガイドを参照](/docs/app/building-your-application/upgrading/app-router-migration#migrating-_documentjs-and-_appjs)してください。 ## Templates {#templates} -テンプレートは、レイアウトと同様に子レイアウトやページをラップします。ルート間で持続し、状態を保持するレイアウトとは異なり、テンプレートはナビゲーション時にその子の新しいインスタンスを作成します。つまり、ユーザーがテンプレートを共有するルート間をナビゲートすると、子の新しいインスタンスがマウントされ、DOM要素が再作成され、Client Componentsの状態は**保持されず**、エフェクトが再同期されます。 +Templatesは、子レイアウトまたはページをラップする点でレイアウトに似ています。ルート間で持続し状態を保持するレイアウトとは異なり、Templatesはナビゲーション時にその子の新しいインスタンスを作成します。つまり、ユーザーがTemplatesを共有するルート間をナビゲートすると、子の新しいインスタンスがマウントされ、DOM要素が再作成され、Client Componentsの状態は**保持されず**、エフェクトが再同期されます。 -これらの特定の動作が必要な場合があり、テンプレートはレイアウトよりも適したオプションとなるでしょう。たとえば： +これらの特定の動作が必要な場合があり、Templatesはレイアウトよりも適したオプションとなることがあります。たとえば： -- ナビゲーション時に`useEffect`を再同期するため。 -- ナビゲーション時に子Client Componentsの状態をリセットするため。 +- ナビゲーション時に`useEffect`を再同期するため +- ナビゲーション時に子Client Componentsの状態をリセットするため -テンプレートは、`template.js`ファイルからデフォルトのReactコンポーネントをエクスポートすることで定義できます。コンポーネントは`children`プロップを受け入れる必要があります。 +Templateは、`template.js`ファイルからデフォルトのReactコンポーネントをエクスポートすることで定義できます。このコンポーネントは`children` propを受け入れる必要があります。 template.js special file` HTML要素を変更できます。 +[Metadata API](/docs/app/building-your-application/optimizing/metadata)を使用して、`title`や`meta`などの`` HTML要素を変更できます。 メタデータは、[`layout.js`](/docs/app/api-reference/file-conventions/layout)または[`page.js`](/docs/app/api-reference/file-conventions/page)ファイルで[`metadata`オブジェクト](/docs/app/api-reference/functions/generate-metadata#the-metadata-object)または[`generateMetadata`関数](/docs/app/api-reference/functions/generate-metadata#generatemetadata-function)をエクスポートすることで定義できます。 @@ -266,7 +266,7 @@ export default function Page() { [usePathname()](/docs/app/api-reference/functions/use-pathname)フックを使用して、ナビゲーションリンクがアクティブかどうかを判断できます。 -`usePathname()`はクライアントフックであるため、ナビゲーションリンクをClient Componentに抽出し、レイアウトやテンプレートにインポートする必要があります： +`usePathname()`はクライアントフックであるため、ナビゲーションリンクをClient Componentに抽出し、レイアウトまたはテンプレートにインポートする必要があります： diff --git a/docs/01-app/03-building-your-application/01-routing/08-route-groups.mdx b/docs/01-app/03-building-your-application/01-routing/08-route-groups.mdx index 6959daee..037678d7 100644 --- a/docs/01-app/03-building-your-application/01-routing/08-route-groups.mdx +++ b/docs/01-app/03-building-your-application/01-routing/08-route-groups.mdx @@ -1,93 +1,27 @@ --- title: 'Route Groups' -description: 'Route Groups を使用して、Next.js アプリケーションを異なるセクションに分割することができます。' +description: 'Route Groupsは、Next.jsアプリケーションを異なるセクションに分割するために使用できます。' --- -`app` ディレクトリ内では、通常入れ子構造のフォルダが URL パスにマッピングされます。しかし、フォルダを **Route Group** としてマークすることで、そのフォルダがルートの URL パスに含まれないようにできます。 +`app`ディレクトリ内では、ネストされたフォルダは通常、URLパスにマッピングされます。しかし、フォルダを**Route Group**としてマークすることで、そのフォルダがルートのURLパスに含まれないようにすることができます。 -これにより、URL パスの構造に影響を与えずに、ルートセグメントとプロジェクトファイルを論理的なグループに整理することができます。 +これにより、URLパスの構造に影響を与えることなく、ルートセグメントやプロジェクトファイルを論理的なグループに整理することができます。 -Route groups は以下の用途に役立ちます： +Route Groupsは以下の用途に役立ちます： -- URL パスに影響を与えずにルートをグループ化する例として、サイトのセクションごと、意図ごと、チームごとなどにグループ化する [ルートをグループ化する](#organize-routes-without-affecting-the-url-path) -- 同じルートセグメントレベルで [ネストされたレイアウト](/docs/app/building-your-application/routing/layouts-and-templates) を有効にする： - - [複数の root レイアウトを含む、同一セグメント内で複数のネストされたレイアウトを作成する](#creating-multiple-root-layouts) - - [共通セグメント内のルートのサブセットにレイアウトを追加する](#opting-specific-segments-into-a-layout) -- [共通セグメント内の特定ルートにローディングスケルトンを追加する](#opting-for-loading-skeletons-on-a-specific-route) +- サイトのセクション、意図、チームごとにルートをグループ化する +- 同じルートセグメントレベルでネストされたレイアウトを有効にする： + - 同じセグメント内で複数のネストされたレイアウトを作成する（複数のroot レイアウトを含む） + - 特定のセグメントをレイアウトに選択する +- 特定のルートでローディングスケルトンを選択する ## 規約 {#convention} -Route group は、フォルダ名を括弧で囲むことで作成できます：`(folderName)` - -## 例 {#examples} - -### URL パスに影響を与えずにルートを管理する {#organize-routes-without-affecting-the-url-path} - -URL に影響を与えずにルートを管理するには、関連しているルートをまとめておくためのグループを作成します。括弧内のフォルダは URL から省略されます（例えば、`(marketing)` や `(shop)` など）。 - -Route Group を使ったルートの整理 - -`(marketing)` や `(shop)` 内のルートが同じ URL 階層を共有しているとしても、それぞれのグループ内に `layout.js` ファイルを追加することで異なるレイアウトを作成できます。 - -複数のレイアウトを持つ Route Group - -### 特定のセグメントをレイアウトに選択する {#opting-specific-segments-into-a-layout} - -特定のルートをレイアウトに選択するには、新しい Route Group（例：`(shop)`）を作成し、同じレイアウトを共有するルートをそのグループに移動します（例：`account` と `cart`）。グループ外のルートはレイアウトを共有しません（例：`checkout`）。 - -オプトインレイアウトを持つ Route Group - -### 特定ルートにローディングスケルトンを選択する {#opting-for-loading-skeletons-on-a-specific-route} - -`loading.js` ファイルを使って特定のルートに [ローディングスケルトン](/docs/app/building-your-application/routing/loading-ui-and-streaming) を適用するには、新しい Route Group（例：`/(overview)`）を作成し、そのグループ内に `loading.tsx` を移動します。 - -Route グループ内に loading.tsx と page.tsx が含まれるフォルダ構造 - -これで、`loading.tsx` ファイルはダッシュボード → 概要ページにのみ適用され、他のダッシュボードページには影響を与えずに URL パスの構造も影響しません。 - -### 複数の root レイアウトを作成する {#creating-multiple-root-layouts} - -複数の [root レイアウト](/docs/app/building-your-application/routing/layouts-and-templates#root-layout-required) を作成するには、トップレベルの `layout.js` ファイルを削除し、各 Route Group 内に `layout.js` ファイルを追加します。これは、UI や体験が完全に異なるセクションにアプリケーションを分割するのに便利です。それぞれの root レイアウトに `` と `` タグを追加する必要があります。 - -複数の root レイアウトを持つ Route Group - -上記の例では、`(marketing)` と `(shop)` はそれぞれ自身の root レイアウトを持っています。 - ---- +Route Groupは、フォルダ名を括弧で囲むことで作成できます: `(folderName)` > **Good to know**: > -> - Route Groups の命名は、組織のためのものであり、それ自体に特別な意味はありません。URL パスには影響を与えません。 -> - Route Group を含むルートは、他のルートと同じ URL パスに解決 **されないようにする必要があります。** 例えば、Route Groups は URL 構造に影響を与えないため、`(marketing)/about/page.js` と `(shop)/about/page.js` はどちらも `/about` に解決してエラーを引き起こします。 -> - 複数の root レイアウトをトップレベルの `layout.js` ファイルなしで使用する場合、ホームの `page.js` ファイルは Route Groups のひとつに定義する必要があります。例えば：`app/(marketing)/page.js`。 -> - **複数の root レイアウト間**をナビゲートすることは、（クライアントサイドのナビゲーションとは対照的に）**完全なページロード** を引き起こします。例えば、`app/(shop)/layout.js` を使用している `/cart` から、`app/(marketing)/layout.js` を使用している `/blog` へナビゲートすると完全なページロードが発生します。これは **複数の root レイアウトにのみ** 適用されます。 +> - Route Groupの命名は、組織化以外に特別な意味を持ちません。URLパスには影響を与えません。 +> - Route Groupを含むルートは、他のルートと同じURLパスに解決される**べきではありません**。たとえば、Route GroupはURL構造に影響を与えないため、`(marketing)/about/page.js`と`(shop)/about/page.js`はどちらも`/about`に解決され、エラーが発生します。 +> - トップレベルの`layout.js`ファイルを使用せずに複数のroot レイアウトを使用する場合、ホームの`page.js`ファイルはRoute Groupの1つに定義する必要があります。例：`app/(marketing)/page.js`。 +> - **複数のroot レイアウトをまたいでナビゲートする**と、**フルページロード**が発生します（クライアントサイドのナビゲーションとは異なります）。たとえば、`app/(shop)/layout.js`を使用する`/cart`から`app/(marketing)/layout.js`を使用する`/blog`にナビゲートすると、フルページロードが発生します。これは**複数のroot レイアウト**にのみ適用されます。 diff --git a/docs/01-app/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..c8e36155 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} @@ -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) @@ -62,9 +62,9 @@ import Icon2 from 'react-icons/md/Icon2' ### バレルファイル {#barrel-files} -「バレルファイル」は、他のファイルから多くのアイテムをエクスポートするファイルです。これらは、モジュールスコープ内で副作用があるかどうかをインポートを使用して解析する必要があるため、ビルドを遅くする可能性があります。 +"バレルファイル"は、他のファイルから多くのアイテムをエクスポートするファイルです。これらは、モジュールスコープで副作用があるかどうかをインポートを使用してコンパイラが解析する必要があるため、ビルドを遅くする可能性があります。 -可能であれば、特定のファイルから直接インポートするようにしてください。[バレルファイルについて詳しく学ぶ](https://vercel.com/blog/how-we-optimized-package-imports-in-next-js)と、Next.jsにおける組み込みの最適化について学びましょう。 +可能であれば、特定のファイルから直接インポートするようにしてください。[バレルファイルについて詳しくはこちら](https://vercel.com/blog/how-we-optimized-package-imports-in-next-js)とNext.jsの組み込み最適化について学びましょう。 ### パッケージインポートの最適化 {#optimize-package-imports} @@ -99,12 +99,12 @@ Tailwind CSSバージョン3.4.8以降では、ビルドを遅くする可能性 } ``` -2. 不要なファイルのスキャンを避けます： +2. 不要なファイルのスキャンを避ける： ```jsx module.exports = { content: [ - // より良い例 - 'src'フォルダのみをスキャン + // より良い - 'src'フォルダのみをスキャン '../../packages/ui/src/**/*.{js,ts,jsx,tsx}', ], } @@ -114,27 +114,27 @@ Tailwind CSSバージョン3.4.8以降では、ビルドを遅くする可能性 カスタムwebpack設定を追加した場合、それがコンパイルを遅くしている可能性があります。 -ローカル開発に本当に必要かどうかを検討してください。特定のツールを本番ビルドのみに含めるか、Turbopackに移行して[loaders](/docs/app/api-reference/config/next-config-js/turbo#supported-loaders)を使用することを検討してください。 +ローカル開発に本当に必要かどうかを検討してください。特定のツールを本番ビルドのみに含めるか、Turbopackに移行して[loaders](/docs/app/api-reference/config/next-config-js/turbopack#supported-loaders)を使用することを検討してください。 ### 6. メモリ使用量の最適化 {#6-optimize-memory-usage} アプリが非常に大きい場合、より多くのメモリが必要になるかもしれません。 -[メモリ使用量の最適化について詳しく学ぶ](/docs/app/building-your-application/optimizing/memory-usage)。 +[メモリ使用量の最適化について詳しくはこちら](/docs/app/building-your-application/optimizing/memory-usage)。 ### 7. Server Componentsとデータフェッチ {#7-server-components-and-data-fetching} Server Componentsへの変更は、ページ全体を再レンダリングし、新しいデータをコンポーネントに表示するためにローカルで再レンダリングを引き起こします。 -実験的な`serverComponentsHmrCache`オプションを使用すると、ローカル開発中のホットモジュールリプレースメント（HMR）リフレッシュ間でServer Components内の`fetch`レスポンスをキャッシュできます。これにより、応答が高速化され、課金されるAPIコールのコストが削減されます。 +実験的な`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..3f1669fe 100644 --- a/docs/01-app/03-building-your-application/07-configuring/05-mdx.mdx +++ b/docs/01-app/03-building-your-application/07-configuring/05-mdx.mdx @@ -1,10 +1,10 @@ --- title: 'MarkdownとMDX' nav_title: 'MDX' -description: 'MDXを設定し、Next.jsアプリでの使用方法を学びましょう。' +description: 'MDXを設定し、Next.jsアプリで使用する方法を学びます。' --- -{/* このドキュメントの内容はapp routerとpages routerの間で共有されています。Pages Routerに特化した内容を追加するには、`Content`コンポーネントを使用できます。共有されるコンテンツはコンポーネントでラップしないでください。 */} +{/* このドキュメントの内容はapp routerとpages routerの間で共有されています。Pages Routerに特化したコンテンツを追加するには、`Content`コンポーネントを使用できます。共有コンテンツはコンポーネントでラップしないでください。 */} [Markdown](https://daringfireball.net/projects/markdown/syntax)は、テキストをフォーマットするための軽量マークアップ言語です。プレーンテキストの構文を使用して書き、それを構造的に有効なHTMLに変換することができます。ウェブサイトやブログのコンテンツを書く際によく使用されます。 @@ -22,7 +22,7 @@ I **love** using [Next.js](https://nextjs.org/) [MDX](https://mdxjs.com/)は、Markdownのスーパーセットであり、Markdownファイル内で直接[JSX](https://react.dev/learn/writing-markup-with-jsx)を書くことができます。これは、動的なインタラクティビティを追加し、Reactコンポーネントをコンテンツ内に埋め込む強力な方法です。 -Next.jsは、アプリケーション内のローカルMDXコンテンツと、サーバー上で動的にフェッチされるリモートMDXファイルの両方をサポートできます。Next.jsプラグインは、MarkdownとReactコンポーネントをHTMLに変換する処理を行い、Server Components（App Routerでのデフォルト）での使用もサポートしています。 +Next.jsは、アプリケーション内のローカルMDXコンテンツと、サーバー上で動的に取得されるリモートMDXファイルの両方をサポートできます。Next.jsプラグインは、MarkdownとReactコンポーネントをHTMLに変換する処理を行い、Server Components（App Routerでのデフォルト）での使用もサポートしています。 > **Good to know**: 完全な動作例については、[Portfolio Starter Kit](https://vercel.com/templates/next.js/portfolio-starter-kit)テンプレートを参照してください。 @@ -38,7 +38,7 @@ npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx ## `next.config.mjs`の設定 {#configure-next-config-mjs} -プロジェクトのルートにある`next.config.mjs`ファイルを更新して、MDXを使用するように設定します: +プロジェクトのrootにある`next.config.mjs`ファイルを更新して、MDXを使用するように設定します: ```js title="next.config.mjs" import createMDX from '@next/mdx' @@ -47,22 +47,22 @@ import createMDX from '@next/mdx' const nextConfig = { // `pageExtensions`を設定して、MarkdownとMDXファイルを含める pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'], - // 必要に応じて、他のNext.jsの設定を追加 + // 必要に応じて、他のNext.jsの設定を以下に追加 } const withMDX = createMDX({ - // 必要に応じてMarkdownプラグインを追加 + // 必要に応じてMarkdownプラグインをここに追加 }) // MDX設定とNext.js設定をマージ export default withMDX(nextConfig) ``` -これにより、`.md`および`.mdx`ファイルをアプリケーション内のページ、ルート、またはインポートとして使用できるようになります。 +これにより、`.md`および`.mdx`ファイルがアプリケーション内でページ、ルート、またはインポートとして機能するようになります。 ## `mdx-components.tsx`ファイルの追加 {#add-an-mdx-components-tsx-file} -プロジェクトのルートに`mdx-components.tsx`（または`.js`）ファイルを作成して、グローバルなMDXコンポーネントを定義します。例えば、`pages`や`app`と同じレベル、または該当する場合は`src`内に配置します。 +グローバルなMDXコンポーネントを定義するために、プロジェクトのrootに`mdx-components.tsx`（または`.js`）ファイルを作成します。例えば、`pages`や`app`と同じレベル、または該当する場合は`src`内に作成します。 @@ -95,7 +95,7 @@ export function useMDXComponents(components) { > > - `mdx-components.tsx`は、App Routerで`@next/mdx`を使用するために**必須**であり、これがないと動作しません。 > - [`mdx-components.tsx`ファイルの規約](/docs/app/api-reference/file-conventions/mdx-components)について詳しく学びましょう。 -> - [カスタムスタイルとコンポーネントの使用](#using-custom-styles-and-components)方法を学びましょう。 +> - [カスタムスタイルとコンポーネントの使用](#using-custom-styles-and-components)について学びましょう。 ## MDXのレンダリング {#rendering-mdx} @@ -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,12 +182,12 @@ 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 ``` @@ -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になります。 @@ -374,7 +374,7 @@ This is a list in markdown: ``` -Markdownをスタイルするには、生成されたHTML要素にマッピングされるカスタムコンポーネントを提供できます。スタイルとコンポーネントは、グローバル、ローカル、および共有レイアウトで実装できます。 +Markdownをスタイルするために、生成されたHTML要素にマッピングされるカスタムコンポーネントを提供できます。スタイルとコンポーネントは、グローバル、ローカル、および共有レイアウトで実装できます。 ### グローバルスタイルとコンポーネント {#global-styles-and-components} @@ -440,7 +440,7 @@ export function useMDXComponents(components) { ### ローカルスタイルとコンポーネント {#local-styles-and-components} -インポートしたMDXコンポーネントに渡すことで、特定のページにローカルスタイルとコンポーネントを適用できます。これらは[グローバルスタイルとコンポーネント](#global-styles-and-components)とマージされ、上書きされます。 +インポートしたMDXコンポーネントにスタイルとコンポーネントを渡すことで、特定のページにローカルスタイルとコンポーネントを適用できます。これらは[グローバルスタイルとコンポーネント](#global-styles-and-components)とマージされ、上書きされます。 @@ -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`を追加します。 @@ -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コンポーネントと同様にエクスポートを使用することを**許可**しています: @@ -790,7 +790,7 @@ export default function Page() { -これの一般的な使用例は、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**: > @@ -811,13 +811,13 @@ import createMDX from '@next/mdx' /** @type {import('next').NextConfig} */ const nextConfig = { - // ファイルの.md拡張子を許可 + // ファイルの.mdおよび.mdx拡張子を許可 pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'], - // 必要に応じて、他のNext.jsの設定を追加 + // 必要に応じて、他のNext.jsの設定を以下に追加 } const withMDX = createMDX({ - // 必要に応じてMarkdownプラグインを追加 + // 必要に応じてMarkdownプラグインをここに追加 options: { remarkPlugins: [remarkGfm], rehypePlugins: [], @@ -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`にアップグレードし、プラグイン名を文字列で指定します: @@ -856,9 +856,9 @@ export default withMDX(nextConfig) ## リモートMDX {#remote-mdx} -MDXファイルやコンテンツが*他の場所*にある場合、サーバー上で動的にフェッチできます。これは、CMS、データベース、または他の場所に保存されたコンテンツに便利です。この用途に人気のあるコミュニティパッケージは[`next-mdx-remote`](https://github.com/hashicorp/next-mdx-remote#react-server-components-rsc--nextjs-app-directory-support)です。 +MDXファイルやコンテンツが*他の場所*にある場合、サーバー上で動的に取得できます。これは、CMS、データベース、または他の場所に保存されたコンテンツに便利です。この用途に人気のあるコミュニティパッケージは[`next-mdx-remote`](https://github.com/hashicorp/next-mdx-remote#react-server-components-rsc--nextjs-app-directory-support)です。 -> **Good to know**: 注意して進めてください。MDXはJavaScriptにコンパイルされ、サーバー上で実行されます。信頼できるソースからのみMDXコンテンツをフェッチする必要があります。そうしないと、リモートコード実行（RCE）につながる可能性があります。 +> **Good to know**: 注意して進めてください。MDXはJavaScriptにコンパイルされ、サーバー上で実行されます。信頼できるソースからのみMDXコンテンツを取得する必要があります。そうしないと、リモートコード実行（RCE）につながる可能性があります。 次の例では`next-mdx-remote`を使用しています: @@ -952,9 +952,9 @@ export async function getStaticProps() { ## 深掘り: MarkdownをHTMLに変換する方法 {#deep-dive-how-do-you-transform-markdown-into-html} -ReactはMarkdownをネイティブに理解しません。Markdownのプレーンテキストは、まずHTMLに変換する必要があります。これは`remark`と`rehype`で実現できます。 +ReactはMarkdownをネイティブに理解しません。Markdownのプレーンテキストは、まずHTMLに変換される必要があります。これは`remark`と`rehype`で実現できます。 -`remark`はMarkdownに関するツールのエコシステムです。`rehype`はHTMLに関する同様のものです。例えば、次のコードスニペットはMarkdownをHTMLに変換します: +`remark`はMarkdownに関するツールのエコシステムです。`rehype`はHTMLに関する同様のエコシステムです。例えば、次のコードスニペットはMarkdownをHTMLに変換します: ```js import { unified } from 'unified' @@ -979,11 +979,11 @@ async function main() { `remark`と`rehype`のエコシステムには、[シンタックスハイライト](https://github.com/atomiks/rehype-pretty-code)、[見出しのリンク](https://github.com/rehypejs/rehype-autolink-headings)、[目次の生成](https://github.com/remarkjs/remark-toc)などのプラグインがあります。 -上記のように`@next/mdx`を使用する場合、`remark`や`rehype`を直接使用する必要はありません。これらは自動的に処理されます。ここでは、`@next/mdx`パッケージが内部で行っていることをより深く理解するために説明しています。 +上記のように`@next/mdx`を使用する場合、`remark`や`rehype`を直接使用する必要は**ありません**。これは自動的に処理されます。ここでは、`@next/mdx`パッケージが内部で行っていることをより深く理解するために説明しています。 ## RustベースのMDXコンパイラの使用（実験的） {#using-the-rust-based-mdx-compiler-experimental} -Next.jsはRustで書かれた新しいMDXコンパイラをサポートしています。このコンパイラはまだ実験的であり、本番環境での使用は推奨されません。新しいコンパイラを使用するには、`next.config.js`を`withMDX`に渡すときに設定する必要があります: +Next.jsはRustで書かれた新しいMDXコンパイラをサポートしています。このコンパイラはまだ実験的であり、本番環境での使用は推奨されません。新しいコンパイラを使用するには、`withMDX`に渡すときに`next.config.js`を設定する必要があります: ```js title="next.config.js" module.exports = withMDX({ diff --git a/docs/01-app/03-building-your-application/11-upgrading/06-from-create-react-app.mdx b/docs/01-app/03-building-your-application/11-upgrading/06-from-create-react-app.mdx index 411dbf5c..f885689f 100644 --- a/docs/01-app/03-building-your-application/11-upgrading/06-from-create-react-app.mdx +++ b/docs/01-app/03-building-your-application/11-upgrading/06-from-create-react-app.mdx @@ -1,89 +1,89 @@ --- -title: 'Create React Appからの移行' -nav_title: 'CRAからの移行' -description: '既存のReactアプリケーションをCreate React AppからNext.jsに移行する方法を学びます。' +title: 'Create React App からの移行' +nav_title: 'CRA からの移行' +description: '既存の React アプリケーションを Create React App から Next.js に移行する方法を学びます。' --- -このガイドは、既存のCreate React App（CRA）サイトをNext.jsに移行するのに役立ちます。 +このガイドでは、既存の Create React App (CRA) サイトを Next.js に移行する方法を説明します。 -## なぜ切り替えるのか？ {#why-switch} +## なぜ移行するのか？ {#why-switch} -Create React AppからNext.jsに切り替えたい理由はいくつかあります。 +Create React App から Next.js に移行したい理由はいくつかあります： ### 初期ページの読み込み時間が遅い {#slow-initial-page-loading-time} -Create React Appは純粋にクライアントサイドのReactを使用しています。クライアントサイドのみのアプリケーション、別名[シングルページアプリケーション（SPA）](/docs/app/building-your-application/upgrading/single-page-applications)は、初期ページの読み込み時間が遅くなることがよくあります。これはいくつかの理由で発生します。 +Create React App は純粋にクライアントサイドの React を使用しています。クライアントサイドのみのアプリケーション、別名 [シングルページアプリケーション (SPA)](/docs/app/building-your-application/upgrading/single-page-applications) は、初期ページの読み込み時間が遅くなることがよくあります。これにはいくつかの理由があります： -1. ブラウザは、Reactコードとアプリケーション全体のバンドルがダウンロードされて実行されるのを待つ必要があり、その後にコードがデータをロードするためのリクエストを送信できるようになります。 +1. ブラウザは、React コードとアプリケーション全体のバンドルがダウンロードされて実行されるのを待つ必要があります。 2. 新しい機能や依存関係を追加するたびに、アプリケーションコードが増加します。 ### 自動コード分割がない {#no-automatic-code-splitting} -前述の読み込み時間の遅さの問題は、コード分割によってある程度緩和できます。しかし、手動でコード分割を試みると、ネットワークウォーターフォールを誤って導入する可能性があります。Next.jsは、自動コード分割とtree-shakingをルーターとビルドパイプラインに組み込んでいます。 +前述の読み込み時間の遅さの問題は、コード分割である程度緩和できます。しかし、手動でコード分割を試みると、ネットワークのウォーターフォールを引き起こす可能性があります。Next.js は、自動コード分割と tree-shaking をルーターとビルドパイプラインに組み込んでいます。 ### ネットワークウォーターフォール {#network-waterfalls} -パフォーマンスが悪化する一般的な原因は、アプリケーションがデータを取得するためにクライアントとサーバー間で順次リクエストを行うことです。[SPA](/docs/app/building-your-application/upgrading/single-page-applications)でのデータ取得のパターンの1つは、プレースホルダーをレンダリングし、コンポーネントがマウントされた後にデータを取得することです。残念ながら、子コンポーネントは親が自身のデータを読み込むのを完了した後にのみデータを取得し始めることができ、リクエストの「ウォーターフォール」を引き起こします。 +パフォーマンスが悪化する一般的な原因は、データを取得するためにアプリケーションがクライアントとサーバー間で順次リクエストを行うことです。[SPA](/docs/app/building-your-application/upgrading/single-page-applications) でのデータ取得のパターンの1つは、プレースホルダーをレンダリングし、コンポーネントがマウントされた後にデータを取得することです。残念ながら、子コンポーネントは親が自身のデータを読み込むのを完了した後でしかデータを取得できず、リクエストの「ウォーターフォール」を引き起こします。 -Next.jsではクライアントサイドのデータ取得がサポートされていますが、Next.jsではデータ取得をサーバーに移動することもできます。これにより、クライアントとサーバー間のウォーターフォールが完全に排除されることがよくあります。 +Next.js ではクライアントサイドのデータ取得もサポートされていますが、データ取得をサーバーに移動することもできます。これにより、クライアントとサーバー間のウォーターフォールが完全に排除されることがよくあります。 ### 高速で意図的な読み込み状態 {#fast-and-intentional-loading-states} -[React Suspenseを通じたストリーミング](/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense)の組み込みサポートにより、ネットワークウォーターフォールを作成せずに、UIのどの部分を最初にどの順序で読み込むかを定義できます。 +[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)を排除するページを構築できます。 +これにより、読み込みが速く、[レイアウトシフト](https://vercel.com/blog/how-core-web-vitals-affect-seo)を排除したページを構築できます。 ### データ取得戦略の選択 {#choose-the-data-fetching-strategy} -ニーズに応じて、Next.jsではページまたはコンポーネントレベルでデータ取得戦略を選択できます。たとえば、CMSからデータを取得し、ブログ投稿をビルド時（SSG）にレンダリングして高速な読み込み速度を実現したり、必要に応じてリクエスト時（SSR）にデータを取得したりできます。 +必要に応じて、Next.js ではページまたはコンポーネントレベルでデータ取得戦略を選択できます。たとえば、CMS からデータを取得し、ビルド時（SSG）にブログ投稿をレンダリングして高速な読み込み速度を実現したり、必要に応じてリクエスト時（SSR）にデータを取得したりできます。 ### ミドルウェア {#middleware} -[Next.js Middleware](/docs/app/building-your-application/routing/middleware)を使用すると、リクエストが完了する前にサーバー上でコードを実行できます。たとえば、認証が必要なページのミドルウェアでユーザーをログインページにリダイレクトすることで、認証されていないコンテンツのフラッシュを回避できます。また、A/Bテスト、実験、[国際化](/docs/app/building-your-application/routing/internationalization)などの機能にも使用できます。 +[Next.js ミドルウェア](/docs/app/building-your-application/routing/middleware) を使用すると、リクエストが完了する前にサーバー上でコードを実行できます。たとえば、認証が必要なページのミドルウェアでユーザーをログインページにリダイレクトすることで、未認証コンテンツのフラッシュを回避できます。また、A/B テスト、実験、[国際化](/docs/app/building-your-application/routing/internationalization) などの機能にも使用できます。 ### 組み込みの最適化 {#built-in-optimizations} -[画像](/docs/app/building-your-application/optimizing/images)、[フォント](/docs/app/building-your-application/optimizing/fonts)、および[サードパーティのスクリプト](/docs/app/building-your-application/optimizing/scripts)は、アプリケーションのパフォーマンスに大きな影響を与えることがよくあります。Next.jsには、これらを自動的に最適化するための専門のコンポーネントとAPIが含まれています。 +[画像](/docs/app/building-your-application/optimizing/images)、[フォント](/docs/app/building-your-application/optimizing/fonts)、および[サードパーティスクリプト](/docs/app/building-your-application/optimizing/scripts) は、アプリケーションのパフォーマンスに大きな影響を与えることがよくあります。Next.js には、これらを自動的に最適化するための専用コンポーネントと API が含まれています。 ## 移行手順 {#migration-steps} -私たちの目標は、できるだけ早く動作するNext.jsアプリケーションを作成し、その後、Next.jsの機能を段階的に採用できるようにすることです。まず、既存のルーターをすぐに置き換えることなく、アプリケーションを純粋なクライアントサイドアプリケーション（[SPA](/docs/app/building-your-application/upgrading/single-page-applications)）として扱います。これにより、複雑さとマージの競合が軽減されます。 +私たちの目標は、できるだけ早く動作する Next.js アプリケーションを作成し、その後で Next.js の機能を段階的に採用できるようにすることです。まず、アプリケーションを純粋なクライアントサイドアプリケーション（[SPA](/docs/app/building-your-application/upgrading/single-page-applications)）として扱い、既存のルーターをすぐに置き換えないようにします。これにより、複雑さとマージの競合が軽減されます。 -> **注意**: `package.json`のカスタム`homepage`フィールド、カスタムサービスワーカー、特定のBabel/webpackの調整など、CRAの高度な設定を使用している場合は、Next.jsでこれらの機能を再現または適応するためのヒントについて、このガイドの最後の**追加の考慮事項**セクションを参照してください。 +> **Note**: `package.json` のカスタム `homepage` フィールド、カスタムサービスワーカー、特定の Babel/webpack 調整など、CRA の高度な設定を使用している場合は、このガイドの最後にある **Additional Considerations** セクションで、これらの機能を Next.js で再現または適応するためのヒントを参照してください。 -### ステップ1: Next.jsの依存関係をインストールする {#step-1-install-the-next-js-dependency} +### ステップ 1: Next.js の依存関係をインストールする {#step-1-install-the-next-js-dependency} -既存のプロジェクトにNext.jsをインストールします。 +既存のプロジェクトに Next.js をインストールします： ```bash title="Terminal" npm install next@latest ``` -### ステップ2: Next.jsの設定ファイルを作成する {#step-2-create-the-next-js-configuration-file} +### ステップ 2: Next.js の設定ファイルを作成する {#step-2-create-the-next-js-configuration-file} -プロジェクトのルート（`package.json`と同じレベル）に`next.config.ts`を作成します。このファイルには、[Next.jsの設定オプション](/docs/app/api-reference/config/next-config-js)が含まれます。 +プロジェクトの root（`package.json` と同じレベル）に `next.config.ts` を作成します。このファイルには [Next.js の設定オプション](/docs/app/api-reference/config/next-config-js) が含まれます。 ```js title="next.config.ts" import type { NextConfig } from 'next' const nextConfig: NextConfig = { - output: 'export', // シングルページアプリケーション（SPA）を出力します - distDir: 'build', // ビルド出力ディレクトリを`build`に変更します + output: 'export', // シングルページアプリケーション (SPA) を出力します + distDir: 'build', // ビルド出力ディレクトリを `build` に変更します } export default nextConfig ``` -> **注意**: `output: 'export'`を使用すると、静的エクスポートを行っていることを意味します。サーバーサイドの機能（SSRやAPIなど）にはアクセスできません。この行を削除して、Next.jsのサーバー機能を活用できます。 +> **Note**: `output: 'export'` を使用すると、静的エクスポートを行っていることを意味します。サーバーサイドの機能（SSR や API など）にはアクセスできません。この行を削除して Next.js のサーバー機能を活用できます。 -### ステップ3: Root レイアウトを作成する {#step-3-create-the-root-layout} +### ステップ 3: root レイアウトを作成する {#step-3-create-the-root-layout} -Next.js [App Router](/docs/app)アプリケーションには、すべてのページをラップする[React Server Component](/docs/app/building-your-application/rendering/server-components)である[root レイアウト](/docs/app/building-your-application/routing/layouts-and-templates#root-layout-required)ファイルが含まれている必要があります。 +Next.js [App Router](/docs/app) アプリケーションには、すべてのページをラップする [root レイアウト](/docs/app/building-your-application/routing/layouts-and-templates#root-layout-required) ファイルが必要です。これは [React Server Component](/docs/app/building-your-application/rendering/server-components) です。 -CRAアプリケーションでのroot レイアウトファイルに最も近いものは、``、``、および``タグを含む`public/index.html`です。 +CRA アプリケーションでの root レイアウトファイルに最も近いものは、``、``、`` タグを含む `public/index.html` です。 -1. `src`ディレクトリ内に新しい`app`ディレクトリを作成します（または、`app`をルートに配置する場合はプロジェクトのルートに作成します）。 -2. `app`ディレクトリ内に`layout.tsx`（または`layout.js`）ファイルを作成します。 +1. `src` ディレクトリ内に新しい `app` ディレクトリを作成します（または、`app` を root に配置する場合はプロジェクトの root に作成します）。 +2. `app` ディレクトリ内に `layout.tsx`（または `layout.js`）ファイルを作成します： @@ -110,7 +110,7 @@ export default function RootLayout({ children }) { -次に、古い`index.html`の内容をこの``コンポーネントにコピーします。`body div#root`（および`body noscript`）を`
{children}
`に置き換えます。 +次に、古い `index.html` の内容をこの `` コンポーネントにコピーします。`body div#root`（および `body noscript`）を `
{children}
` に置き換えます。 @@ -163,11 +163,11 @@ export default function RootLayout({ children }) { -> **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} +### ステップ 4: メタデータ {#step-4-metadata} -Next.jsは``と``タグを自動的に含めるため、``から削除できます。 +Next.js は自動的に `` と `` タグを含めるため、これらを `` から削除できます： @@ -216,7 +216,7 @@ export default function RootLayout({ children }) { -`favicon.ico`、`icon.png`、`robots.txt`などの[メタデータファイル](/docs/app/building-your-application/optimizing/metadata#file-based-metadata)は、`app`ディレクトリのトップレベルに配置されている限り、アプリケーションの``タグに自動的に追加されます。すべての[サポートされているファイル](/docs/app/building-your-application/optimizing/metadata#file-based-metadata)を`app`ディレクトリに移動した後、それらの``タグを安全に削除できます。 +`favicon.ico`、`icon.png`、`robots.txt` などの[メタデータファイル](/docs/app/building-your-application/optimizing/metadata#file-based-metadata)は、`app` ディレクトリのトップレベルに配置されている限り、自動的にアプリケーションの `` タグに追加されます。すべての[サポートされているファイル](/docs/app/building-your-application/optimizing/metadata#file-based-metadata)を `app` ディレクトリに移動した後、それらの `` タグを安全に削除できます： @@ -263,7 +263,7 @@ export default function RootLayout({ children }) { -最後に、Next.jsは[Metadata API](/docs/app/building-your-application/optimizing/metadata)を使用して最後の``タグを管理できます。最終的なメタデータ情報をエクスポートされた[`metadata`オブジェクト](/docs/app/api-reference/functions/generate-metadata#metadata-object)に移動します。 +最後に、Next.js は [Metadata API](/docs/app/building-your-application/optimizing/metadata) を使用して最後の `` タグを管理できます。最終的なメタデータ情報をエクスポートされた [`metadata` オブジェクト](/docs/app/api-reference/functions/generate-metadata#metadata-object) に移動します： @@ -314,13 +314,13 @@ export default function RootLayout({ children }) { -上記の変更により、`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 とウェブの共有性をより簡単に向上させることができます。 -### ステップ5: スタイル {#step-5-styles} +### ステップ 5: スタイル {#step-5-styles} -CRAと同様に、Next.jsは[CSSモジュール](/docs/app/building-your-application/styling/css#css-modules)を標準でサポートしています。また、[グローバルCSSのインポート](/docs/app/building-your-application/styling/css#global-styles)もサポートしています。 +CRA と同様に、Next.js は [CSS Modules](/docs/app/building-your-application/styling/css#css-modules) をサポートしています。また、[グローバル CSS インポート](/docs/app/building-your-application/styling/css#global-styles) もサポートしています。 -グローバルCSSファイルがある場合は、`app/layout.tsx`にインポートします。 +グローバル CSS ファイルがある場合は、`app/layout.tsx` にインポートします： @@ -351,15 +351,15 @@ export default function RootLayout({ -Tailwind CSSを使用している場合は、[インストールドキュメント](/docs/app/building-your-application/styling/tailwind-css)を参照してください。 +Tailwind CSS を使用している場合は、[インストールドキュメント](/docs/app/building-your-application/styling/tailwind-css)を参照してください。 -### ステップ6: エントリーポイントページを作成する {#step-6-create-the-entrypoint-page} +### ステップ 6: エントリーポイントページを作成する {#step-6-create-the-entrypoint-page} -Create React Appは`src/index.tsx`（または`index.js`）をエントリーポイントとして使用します。Next.js（App Router）では、`app`ディレクトリ内の各フォルダーがルートに対応し、各フォルダーには`page.tsx`が必要です。 +Create React App は `src/index.tsx`（または `index.js`）をエントリーポイントとして使用します。Next.js（App Router）では、`app` ディレクトリ内の各フォルダーがルートに対応し、各フォルダーには `page.tsx` が必要です。 -アプリをSPAとして保持し、**すべて**のルートをインターセプトしたいので、[optional catch-all route](/docs/app/building-your-application/routing/dynamic-routes#optional-catch-all-segments)を使用します。 +アプリを SPA として保持し、**すべて**のルートをインターセプトしたいので、[オプショナルキャッチオールルート](/docs/app/building-your-application/routing/dynamic-routes#optional-catch-all-segments) を使用します。 -1. **`app`内に`[[...slug]]`ディレクトリを作成します。** +1. **`app` 内に `[[...slug]]` ディレクトリを作成します。** ```bash app @@ -368,7 +368,7 @@ app ┣ layout.tsx ``` -2. **`page.tsx`に次の内容を追加します。** +2. **`page.tsx` に次の内容を追加します**： @@ -399,13 +399,13 @@ export default function Page() { -これはNext.jsに、空のスラッグ（`/`）に対して単一のルートを生成するように指示し、**すべて**のルートを同じページにマッピングします。このページは[Server Component](/docs/app/building-your-application/rendering/server-components)であり、静的HTMLにプリレンダリングされます。 +これは Next.js に空のスラッグ（`/`）のための単一のルートを生成するよう指示し、**すべて**のルートを同じページにマッピングします。このページは [Server Component](/docs/app/building-your-application/rendering/server-components) であり、静的 HTML にプリレンダリングされます。 -### ステップ7: クライアント専用のエントリーポイントを追加する {#step-7-add-a-client-only-entrypoint} +### ステップ 7: クライアント専用のエントリーポイントを追加する {#step-7-add-a-client-only-entrypoint} -次に、CRAのroot Appコンポーネントを[Client Component](/docs/app/building-your-application/rendering/client-components)内に埋め込み、すべてのロジックをクライアントサイドに保持します。Next.jsを初めて使用する場合、クライアントコンポーネント（デフォルトでは）はまだサーバーでプリレンダリングされていることを知っておく価値があります。クライアントサイドのJavaScriptを実行する追加の機能を持っていると考えることができます。 +次に、CRA の root App コンポーネントを [Client Component](/docs/app/building-your-application/rendering/client-components) 内に埋め込み、すべてのロジックをクライアントサイドに保持します。Next.js を初めて使用する場合、クライアントコンポーネント（デフォルトでは）もサーバーでプリレンダリングされることを知っておく価値があります。クライアントサイドの JavaScript を実行する追加の機能を持っていると考えることができます。 -`app/[[...slug]]/`に`client.tsx`（または`client.js`）を作成します。 +`app/[[...slug]]/` に `client.tsx`（または `client.js`）を作成します： @@ -440,10 +440,10 @@ export function ClientOnly() { -- `'use client'`ディレクティブは、このファイルを**Client Component**にします。 -- `dynamic`インポートと`ssr: false`は、``コンポーネントのサーバーサイドレンダリングを無効にし、純粋にクライアント専用（SPA）にします。 +- `'use client'` ディレクティブは、このファイルを **Client Component** にします。 +- `dynamic` インポートと `ssr: false` は `` コンポーネントのサーバーサイドレンダリングを無効にし、真にクライアント専用（SPA）にします。 -次に、`page.tsx`（または`page.js`）を更新して新しいコンポーネントを使用します。 +次に、`page.tsx`（または `page.js`）を更新して新しいコンポーネントを使用します： @@ -478,9 +478,9 @@ export default function Page() { -### ステップ8: 静的画像インポートを更新する {#step-8-update-static-image-imports} +### ステップ 8: 静的画像インポートを更新する {#step-8-update-static-image-imports} -CRAでは、画像ファイルをインポートすると、その公開URLが文字列として返されます。 +CRA では、画像ファイルをインポートすると、その公開 URL が文字列として返されます： ```tsx import image from './img.png' @@ -490,45 +490,45 @@ export default function App() { } ``` -Next.jsでは、静的画像インポートはオブジェクトを返します。このオブジェクトはNext.jsの[``コンポーネント](/docs/app/api-reference/components/image)で直接使用することができ、または既存の``タグでオブジェクトの`src`プロパティを使用することができます。 +Next.js では、静的画像インポートはオブジェクトを返します。このオブジェクトは Next.js の [`` コンポーネント](/docs/app/api-reference/components/image) で直接使用することができ、または既存の `` タグでオブジェクトの `src` プロパティを使用することができます。 -``コンポーネントには[自動画像最適化](/docs/app/building-your-application/optimizing/images)の追加の利点があります。``コンポーネントは、画像の寸法に基づいて結果の``の`width`と`height`属性を自動的に設定します。これにより、画像が読み込まれるときのレイアウトシフトが防止されます。ただし、アプリに寸法の一方のみがスタイルされ、他方が`auto`にスタイルされていない画像が含まれている場合、問題が発生する可能性があります。`auto`にスタイルされていない場合、寸法は``の寸法属性の値にデフォルト設定され、画像が歪んで表示される可能性があります。 +`` コンポーネントには[自動画像最適化](/docs/app/building-your-application/optimizing/images)の利点があります。`` コンポーネントは、画像の寸法に基づいて結果の `` の `width` と `height` 属性を自動的に設定します。これにより、画像が読み込まれる際のレイアウトシフトを防ぎます。ただし、アプリに寸法の一方のみがスタイル設定され、他方が `auto` にスタイル設定されていない画像が含まれている場合、問題が発生する可能性があります。`auto` にスタイル設定されていない場合、寸法は `` の寸法属性の値にデフォルト設定され、画像が歪んで表示される可能性があります。 -``タグを保持することで、アプリケーションの変更を減らし、上記の問題を防ぐことができます。その後、[ローダーを設定する](/docs/app/building-your-application/optimizing/images#loaders)ことで画像を最適化するために``コンポーネントに移行するか、または自動画像最適化を備えたデフォルトのNext.jsサーバーに移行することができます。 +`` タグを保持することで、アプリケーションの変更量を減らし、上記の問題を防ぐことができます。その後、[ローダーを設定](/docs/app/building-your-application/optimizing/images#loaders)するか、画像を自動的に最適化するデフォルトの Next.js サーバーに移行することで、画像を最適化するために `` コンポーネントに移行することができます。 -**`/public`からインポートされた画像の絶対インポートパスを相対インポートに変換します。** +**`/public` からインポートされた画像の絶対インポートパスを相対インポートに変換します：** ```tsx -// 変更前 +// Before import logo from '/logo.png' -// 変更後 +// After import logo from '../public/logo.png' ``` -**画像オブジェクト全体ではなく、画像の`src`プロパティを``タグに渡します。** +**画像オブジェクト全体ではなく、画像の `src` プロパティを `` タグに渡します：** ```tsx -// 変更前 +// Before -// 変更後 +// After ``` -または、ファイル名に基づいて画像アセットの公開URLを参照することもできます。たとえば、`public/logo.png`はアプリケーションの`/logo.png`で画像を提供し、これが`src`値になります。 +または、ファイル名に基づいて画像アセットの公開 URL を参照することもできます。たとえば、`public/logo.png` はアプリケーションで `/logo.png` で画像を提供し、これが `src` 値になります。 -> **警告:** TypeScriptを使用している場合、`src`プロパティにアクセスするときに型エラーが発生する可能性があります。これを修正するには、`tsconfig.json`ファイルの[`include`配列](https://www.typescriptlang.org/tsconfig#include)に`next-env.d.ts`を追加する必要があります。Next.jsは、ステップ9でアプリケーションを実行するときにこのファイルを自動的に生成します。 +> **Warning:** TypeScript を使用している場合、`src` プロパティにアクセスするときに型エラーが発生する可能性があります。これを修正するには、`tsconfig.json` ファイルの [`include` 配列](https://www.typescriptlang.org/tsconfig#include) に `next-env.d.ts` を追加する必要があります。Next.js は、ステップ 9 でアプリケーションを実行するときにこのファイルを自動的に生成します。 -### ステップ9: 環境変数を移行する {#step-9-migrate-environment-variables} +### ステップ 9: 環境変数を移行する {#step-9-migrate-environment-variables} -Next.jsはCRAと同様に[環境変数](/docs/app/building-your-application/configuring/environment-variables)をサポートしていますが、ブラウザで公開したい変数には`NEXT_PUBLIC_`プレフィックスが**必要**です。 +Next.js は CRA と同様に[環境変数](/docs/app/building-your-application/configuring/environment-variables)をサポートしていますが、ブラウザで公開したい変数には `NEXT_PUBLIC_` プレフィックスが**必要**です。 -主な違いは、クライアントサイドで環境変数を公開するために使用されるプレフィックスです。`REACT_APP_`プレフィックスを持つすべての環境変数を`NEXT_PUBLIC_`に変更します。 +主な違いは、クライアントサイドで環境変数を公開するために使用されるプレフィックスです。`REACT_APP_` プレフィックスを持つすべての環境変数を `NEXT_PUBLIC_` に変更します。 -### ステップ10: `package.json`のスクリプトを更新する {#step-10-update-scripts-in-package-json} +### ステップ 10: `package.json` のスクリプトを更新する {#step-10-update-scripts-in-package-json} -`package.json`のスクリプトをNext.jsのコマンドに更新します。また、`.next`と`next-env.d.ts`を`.gitignore`に追加します。 +`package.json` のスクリプトを Next.js コマンドに更新します。また、`.next` と `next-env.d.ts` を `.gitignore` に追加します： ```json title="package.json" { @@ -546,29 +546,29 @@ Next.jsはCRAと同様に[環境変数](/docs/app/building-your-application/conf next-env.d.ts ``` -次のコマンドを実行できます。 +次のコマンドを実行できます： ```bash npm run dev ``` -[http://localhost:3000](http://localhost:3000)を開きます。Next.js（SPAモード）でアプリケーションが実行されているのが確認できるはずです。 +[http://localhost:3000](http://localhost:3000) を開きます。Next.js（SPA モード）でアプリケーションが実行されているのが確認できるはずです。 -### ステップ11: クリーンアップ {#step-11-clean-up} +### ステップ 11: クリーンアップ {#step-11-clean-up} -Create React Appに特有のアーティファクトを削除できます。 +Create React App に特有のアーティファクトを削除できます： - `public/index.html` - `src/index.tsx` - `src/react-app-env.d.ts` -- `reportWebVitals`のセットアップ -- `react-scripts`の依存関係（`package.json`からアンインストールします） +- `reportWebVitals` のセットアップ +- `react-scripts` の依存関係（`package.json` からアンインストール） ## 追加の考慮事項 {#additional-considerations} -### CRAでカスタム`homepage`を使用する {#using-a-custom-homepage-in-cra} +### CRA でカスタム `homepage` を使用する {#using-a-custom-homepage-in-cra} -CRAの`package.json`で`homepage`フィールドを使用してアプリを特定のサブパスで提供していた場合、Next.jsの[`basePath`設定](/docs/app/api-reference/config/next-config-js/basePath)を使用して`next.config.ts`でそれを再現できます。 +CRA の `package.json` で `homepage` フィールドを使用してアプリを特定のサブパスで提供していた場合、Next.js の `next.config.ts` で [`basePath` 設定](/docs/app/api-reference/config/next-config-js/basePath) を使用してそれを再現できます： ```ts title="next.config.ts" import { NextConfig } from 'next' @@ -581,13 +581,13 @@ const nextConfig: NextConfig = { export default nextConfig ``` -### カスタム`Service Worker`の処理 {#handling-a-custom-service-worker} +### カスタム `Service Worker` の処理 {#handling-a-custom-service-worker} -CRAのサービスワーカー（例：`create-react-app`の`serviceWorker.js`）を使用していた場合、Next.jsで[プログレッシブウェブアプリケーション（PWA）](/docs/app/building-your-application/configuring/progressive-web-apps)を作成する方法を学ぶことができます。 +CRA のサービスワーカー（例：`create-react-app` の `serviceWorker.js`）を使用していた場合、Next.js で [プログレッシブウェブアプリケーション (PWA)](/docs/app/building-your-application/configuring/progressive-web-apps) を作成する方法を学ぶことができます。 -### APIリクエストのプロキシ {#proxying-api-requests} +### API リクエストのプロキシ {#proxying-api-requests} -CRAアプリが`package.json`の`proxy`フィールドを使用してバックエンドサーバーへのリクエストを転送していた場合、`next.config.ts`で[Next.jsのリライト](/docs/app/api-reference/config/next-config-js/rewrites)を使用してこれを再現できます。 +CRA アプリで `package.json` の `proxy` フィールドを使用してバックエンドサーバーへのリクエストを転送していた場合、`next.config.ts` で [Next.js のリライト](/docs/app/api-reference/config/next-config-js/rewrites) を使用してこれを再現できます： ```ts title="next.config.ts" import { NextConfig } from 'next' @@ -604,16 +604,16 @@ const nextConfig: NextConfig = { } ``` -### カスタムWebpack / Babel設定 {#custom-webpack-babel-config} +### カスタム Webpack / Babel 設定 {#custom-webpack-babel-config} -CRAでカスタムのwebpackまたはBabel設定を持っていた場合、`next.config.ts`でNext.jsの設定を拡張できます。 +CRA でカスタム webpack または Babel 設定を持っていた場合、`next.config.ts` で Next.js の設定を拡張できます： ```ts title="next.config.ts" import { NextConfig } from 'next' const nextConfig: NextConfig = { webpack: (config, { isServer }) => { - // ここでwebpack設定を変更します + // ここで webpack 設定を変更します return config }, } @@ -621,11 +621,11 @@ const nextConfig: NextConfig = { export default nextConfig ``` -> **注意**: これには、`dev`スクリプトから`--turbopack`を削除してTurbopackを無効にする必要があります。 +> **Note**: これには `dev` スクリプトから `--turbopack` を削除して Turbopack を無効にする必要があります。 -### TypeScriptのセットアップ {#typescript-setup} +### TypeScript のセットアップ {#typescript-setup} -Next.jsは`tsconfig.json`がある場合、自動的にTypeScriptをセットアップします。`tsconfig.json`の`include`配列に`next-env.d.ts`がリストされていることを確認してください。 +`tsconfig.json` がある場合、Next.js は自動的に TypeScript をセットアップします。`tsconfig.json` の `include` 配列に `next-env.d.ts` がリストされていることを確認してください： ```json { @@ -635,25 +635,25 @@ Next.jsは`tsconfig.json`がある場合、自動的にTypeScriptをセットア ## バンドラーの互換性 {#bundler-compatibility} -Create React AppとNext.jsの両方がデフォルトでwebpackをバンドリングに使用します。Next.jsはまた、ローカル開発を高速化するために[Turbopack](/docs/app/api-reference/config/next-config-js/turbo)を提供しています。 +Create React App と Next.js はどちらもデフォルトで webpack をバンドリングに使用します。Next.js はまた、ローカル開発を高速化するために [Turbopack](/docs/app/api-reference/config/next-config-js/turbopack) を提供しています： ```bash next dev --turbopack ``` -CRAから高度なwebpack設定を移行する必要がある場合は、[カスタムwebpack設定](/docs/app/api-reference/config/next-config-js/webpack)を提供することもできます。 +CRA から高度な webpack 設定を移行する必要がある場合は、[カスタム webpack 設定](/docs/app/api-reference/config/next-config-js/webpack) を提供することもできます。 ## 次のステップ {#next-steps} -すべてが正常に動作した場合、現在、シングルページアプリケーションとして動作するNext.jsアプリケーションがあります。まだNext.jsのサーバーサイドレンダリングやファイルベースのルーティングなどの機能を活用していませんが、段階的に行うことができます。 +すべてが正常に動作した場合、現在はシングルページアプリケーションとして動作する Next.js アプリケーションがあります。まだ Next.js のサーバーサイドレンダリングやファイルベースのルーティングなどの機能を活用していませんが、これらを段階的に行うことができます： -- **React Routerから**[Next.js App Router](/docs/app/building-your-application/routing)に移行して、以下を実現します。 +- [Next.js App Router](/docs/app/building-your-application/routing) に**React Router から移行**して： - 自動コード分割 - [ストリーミングサーバーレンダリング](/docs/app/building-your-application/routing/loading-ui-and-streaming) - [React Server Components](/docs/app/building-your-application/rendering/server-components) -- **画像を最適化**するために[``コンポーネント](/docs/app/building-your-application/optimizing/images)を使用します。 -- **フォントを最適化**するために[`next/font`](/docs/app/building-your-application/optimizing/fonts)を使用します。 -- **サードパーティのスクリプトを最適化**するために[`