diff --git a/docs/01-app/01-getting-started/01-installation.mdx b/docs/01-app/01-getting-started/01-installation.mdx index 46b161e7..68def7d0 100644 --- a/docs/01-app/01-getting-started/01-installation.mdx +++ b/docs/01-app/01-getting-started/01-installation.mdx @@ -4,7 +4,7 @@ nav_title: 'インストール' 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} @@ -69,7 +69,7 @@ npm install next@latest react@latest react-dom@latest ### `app` ディレクトリの作成 {#create-the-app-directory} -Next.js はファイルシステムルーティングを使用しているため、アプリケーション内のルートはファイルの構造によって決まります。 +Next.js はファイルシステムルーティングを使用しており、アプリケーション内のルートはファイルの構造によって決まります。 `app` フォルダを作成します。次に、`app` 内に `layout.tsx` ファイルを作成します。このファイルは [root レイアウト](/docs/app/api-reference/file-conventions/layout#root-layouts) です。これは必須であり、`` と `` タグを含める必要があります。 @@ -141,8 +141,8 @@ export default function Page() { > **Good to know**: > -> - root レイアウトの作成を忘れた場合、`next dev` で開発サーバーを実行すると、Next.js が自動的にこのファイルを作成します。 -> - プロジェクトの root に [`src` ディレクトリ](/docs/app/building-your-application/configuring/src-directory) を使用して、アプリケーションのコードを設定ファイルから分離することができます。 +> - root レイアウトを作成するのを忘れた場合、Next.js は `next dev` で開発サーバーを実行するときにこのファイルを自動的に作成します。 +> - プロジェクトの root に [`src` フォルダ](/docs/app/api-reference/file-conventions/src-folder) を使用して、アプリケーションのコードを設定ファイルから分離することができます。 @@ -150,7 +150,7 @@ export default function Page() { ### `pages` ディレクトリの作成 {#create-the-pages-directory} -Next.js はファイルシステムルーティングを使用しているため、アプリケーション内のルートはファイルの構造によって決まります。 +Next.js はファイルシステムルーティングを使用しており、アプリケーション内のルートはファイルの構造によって決まります。 プロジェクトの root に `pages` ディレクトリを作成します。次に、`pages` フォルダ内に `index.tsx` ファイルを追加します。これがホームページ (`/`) になります: @@ -175,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) を参照してください。 @@ -200,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) を参照してください。 @@ -247,7 +247,7 @@ export default function Document() { ### `public` フォルダの作成(オプション) {#create-the-public-folder-optional} -プロジェクトの root に [`public` フォルダ](/docs/app/building-your-application/optimizing/static-assets) を作成して、画像やフォントなどの静的アセットを保存します。`public` 内のファイルは、ベースURL (`/`) から始まるコードで参照できます。 +プロジェクトの root に [`public` フォルダ](/docs/app/api-reference/file-conventions/public-folder) を作成して、画像やフォントなどの静的アセットを保存します。`public` 内のファイルは、ベースURL (`/`) から始まるコードで参照できます。 これらのアセットは root パス (`/`) を使用して参照できます。たとえば、`public/profile.png` は `/profile.png` として参照できます: @@ -314,7 +314,7 @@ VS Code でプラグインを有効にするには: ## ESLint のセットアップ {#set-up-eslint} -Next.js には組み込みの ESLint が含まれています。`create-next-app` で新しいプロジェクトを作成するときに、必要なパッケージが自動的にインストールされ、適切な設定が構成されます。 +Next.js には組み込みの ESLint が含まれています。`create-next-app` で新しいプロジェクトを作成するときに、必要なパッケージが自動的にインストールされ、適切な設定が行われます。 既存のプロジェクトに ESLint を手動で追加するには、`package.json` に `next lint` をスクリプトとして追加します: @@ -326,7 +326,7 @@ Next.js には組み込みの ESLint が含まれています。`create-next-app } ``` -次に、`npm run lint` を実行すると、インストールと設定プロセスが案内されます。 +次に、`npm run lint` を実行すると、インストールと設定のプロセスが案内されます。 ```bash title="Terminal" npm run lint @@ -342,11 +342,11 @@ npm run lint - **Strict**: Next.js の基本的な ESLint 設定に加えて、より厳格な Core Web Vitals ルールセットを含みます。初めて ESLint を設定する開発者に推奨される設定です。 - **Base**: Next.js の基本的な ESLint 設定を含みます。 -- **Cancel**: 設定をスキップします。独自のカスタム ESLint 設定を設定する予定の場合、このオプションを選択します。 +- **Cancel**: 設定をスキップします。独自のカスタム ESLint 設定を行う予定の場合、このオプションを選択します。 `Strict` または `Base` が選択されると、Next.js は自動的に `eslint` と `eslint-config-next` をアプリケーションの依存関係としてインストールし、選択した設定を含む `.eslintrc.json` ファイルをプロジェクトの root に作成します。 -ESLint を実行してエラーをキャッチしたいときは、`next lint` を実行できます。ESLint が設定されると、ビルド(`next build`)のたびに自動的に実行されます。エラーはビルドを失敗させますが、警告は失敗しません。 +ESLint を実行してエラーをキャッチしたいときは、`next lint` を実行できます。ESLint が設定されると、ビルド (`next build`) のたびに自動的に実行されます。エラーはビルドを失敗させますが、警告は失敗しません。 詳細は [ESLint プラグイン](/docs/app/api-reference/config/next-config-js/eslint) ページを参照してください。 @@ -354,7 +354,7 @@ ESLint を実行してエラーをキャッチしたいときは、`next lint` Next.js には、`tsconfig.json` および `jsconfig.json` ファイルの `"paths"` および `"baseUrl"` オプションのサポートが組み込まれています。 -これらのオプションを使用すると、プロジェクトディレクトリを絶対パスにエイリアス化し、モジュールのインポートをより簡単かつクリーンにすることができます。たとえば: +これらのオプションを使用すると、プロジェクトディレクトリを絶対パスにエイリアス化でき、モジュールのインポートがより簡単でクリーンになります。たとえば: ```jsx // Before @@ -374,7 +374,7 @@ import { Button } from '@/components/button' } ``` -`baseUrl` パスの設定に加えて、`"paths"` オプションを使用してモジュールパスを `"alias"` することができます。 +`baseUrl` パスの設定に加えて、`"paths"` オプションを使用してモジュールパスを `"alias"` できます。 たとえば、次の設定は `@/components/*` を `components/*` にマッピングします: 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 a0885150..621d31a6 100644 --- a/docs/01-app/01-getting-started/02-project-structure.mdx +++ b/docs/01-app/01-getting-started/02-project-structure.mdx @@ -1,7 +1,7 @@ --- -title: 'プロジェクト構造と組織化' +title: 'プロジェクトの構造と組織化' nav_title: 'プロジェクト構造' -description: 'Next.jsにおけるフォルダとファイルの規約の概要、およびプロジェクトの組織化方法について説明します。' +description: 'Next.jsにおけるフォルダとファイルの規約の概要と、プロジェクトの組織化方法について説明します。' --- このページでは、Next.jsにおける**すべての**フォルダとファイルの規約の概要と、プロジェクトを組織化するための推奨事項を提供します。 @@ -20,33 +20,33 @@ description: 'Next.jsにおけるフォルダとファイルの規約の概要 height="525" /> -| | | -| --------------------------------------------------------------------------------- | ------------------------------------------ | -| [`app`](/docs/app/building-your-application/routing) | App Router | -| [`pages`](https://nextjs.org/docs/canary/pages/building-your-application/routing) | Pages Router | -| [`public`](/docs/app/building-your-application/optimizing/static-assets) | 提供される静的アセット | -| [`src`](/docs/app/building-your-application/configuring/src-directory) | オプションのアプリケーションソースフォルダ | +| | | +| --------------------------------------------------------------------------------- | ------------------------------------ | +| [`app`](/docs/app/building-your-application/routing) | App Router | +| [`pages`](https://nextjs.org/docs/canary/pages/building-your-application/routing) | Pages Router | +| [`public`](/docs/app/api-reference/file-conventions/public-folder) | 提供される静的アセット | +| [`src`](/docs/app/api-reference/file-conventions/src-folder) | 任意のアプリケーションソースフォルダ | ### トップレベルファイル {#top-level-files} トップレベルファイルは、アプリケーションの設定、依存関係の管理、ミドルウェアの実行、モニタリングツールの統合、環境変数の定義に使用されます。 -| | | -| ------------------------------------------------------------------------------------------- | -------------------------------------- | -| **Next.js** | | -| [`next.config.js`](/docs/app/api-reference/config/next-config-js) | Next.jsの設定ファイル | -| [`package.json`](/docs/app/getting-started/installation#manual-installation) | プロジェクトの依存関係とスクリプト | -| [`instrumentation.ts`](/docs/app/building-your-application/optimizing/instrumentation) | OpenTelemetryとInstrumentationファイル | -| [`middleware.ts`](/docs/app/building-your-application/routing/middleware) | Next.jsリクエストミドルウェア | -| [`.env`](/docs/app/building-your-application/configuring/environment-variables) | 環境変数 | -| [`.env.local`](/docs/app/building-your-application/configuring/environment-variables) | ローカル環境変数 | -| [`.env.production`](/docs/app/building-your-application/configuring/environment-variables) | 本番環境変数 | -| [`.env.development`](/docs/app/building-your-application/configuring/environment-variables) | 開発環境変数 | -| [`.eslintrc.json`](/docs/app/api-reference/config/eslint) | ESLintの設定ファイル | -| `.gitignore` | 無視するGitファイルとフォルダ | -| `next-env.d.ts` | Next.js用のTypeScript宣言ファイル | -| `tsconfig.json` | TypeScriptの設定ファイル | -| `jsconfig.json` | JavaScriptの設定ファイル | +| | | +| ---------------------------------------------------------------------------- | -------------------------------------- | +| **Next.js** | | +| [`next.config.js`](/docs/app/api-reference/config/next-config-js) | Next.jsの設定ファイル | +| [`package.json`](/docs/app/getting-started/installation#manual-installation) | プロジェクトの依存関係とスクリプト | +| [`instrumentation.ts`](/docs/app/guides/instrumentation) | OpenTelemetryとInstrumentationファイル | +| [`middleware.ts`](/docs/app/building-your-application/routing/middleware) | Next.jsリクエストミドルウェア | +| [`.env`](/docs/app/guides/environment-variables) | 環境変数 | +| [`.env.local`](/docs/app/guides/environment-variables) | ローカル環境変数 | +| [`.env.production`](/docs/app/guides/environment-variables) | 本番環境変数 | +| [`.env.development`](/docs/app/guides/environment-variables) | 開発環境変数 | +| [`.eslintrc.json`](/docs/app/api-reference/config/eslint) | ESLintの設定ファイル | +| `.gitignore` | 無視するGitファイルとフォルダ | +| `next-env.d.ts` | Next.js用のTypeScript宣言ファイル | +| `tsconfig.json` | TypeScriptの設定ファイル | +| `jsconfig.json` | JavaScriptの設定ファイル | @@ -178,9 +178,9 @@ Next.jsは、プロジェクトファイルの組織化や配置について特 - `layout.js` - `template.js` -- `error.js` (React error boundary) -- `loading.js` (React suspense boundary) -- `not-found.js` (React error boundary) +- `error.js`(React error boundary) +- `loading.js`(React suspense boundary) +- `not-found.js`(React error boundary) - `page.js` またはネストされた `layout.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} @@ -251,11 +251,11 @@ Next.jsは、プロジェクトファイルの組織化や配置について特 height="849" /> -`app`ディレクトリ内のファイルは[デフォルトで安全に配置できる](#colocation)ため、コロケーションにはプライベートフォルダは必要ありません。ただし、以下の目的で役立ちます: +`app`ディレクトリ内のファイルは[デフォルトで安全にコロケーションできる](#colocation)ため、コロケーションにはプライベートフォルダは必要ありません。ただし、以下のような場合に役立ちます: - UIロジックをルーティングロジックから分離する - プロジェクト全体およびNext.jsエコシステム内で内部ファイルを一貫して整理する -- コードエディタでファイルを整理およびグループ化する +- コードエディタでファイルをソートおよびグループ化する - 将来のNext.jsファイル規約との潜在的な命名競合を回避する > **Good to know**: @@ -268,7 +268,7 @@ Next.jsは、プロジェクトファイルの組織化や配置について特 ルートグループは、フォルダを括弧で囲むことで作成できます:`(folderName)` -これは、フォルダが組織目的であり、ルートのURLパスに**含まれない**ことを示します。 +これは、フォルダが組織化の目的であり、ルートのURLパスに**含まれない**ことを示します。 ルートグループを使用したフォルダ構造の例 -ルートグループは以下の目的で役立ちます: +ルートグループは以下のような場合に役立ちます: -- サイトセクション、意図、またはチームごとにルートを整理する。例:マーケティングページ、管理ページなど +- サイトのセクション、意図、またはチームごとにルートを整理する。例:マーケティングページ、管理ページなど - 同じルートセグメントレベルでネストされたレイアウトを有効にする: - - [同じセグメントで複数のネストされたレイアウトを作成する、複数のrootレイアウトを含む](#creating-multiple-root-layouts) + - [同じセグメントで複数のネストされたレイアウトを作成し、複数のrootレイアウトを含む](#creating-multiple-root-layouts) - [共通セグメント内のルートのサブセットにレイアウトを追加する](#opting-specific-segments-into-a-layout) -### `src`ディレクトリ {#src-directory} +### `src`フォルダ {#src-folder} -Next.jsは、アプリケーションコード(`app`を含む)をオプションの[`src`ディレクトリ](/docs/app/building-your-application/configuring/src-directory)内に保存することをサポートしています。これにより、プロジェクトの設定ファイルが主にプロジェクトのrootに存在するのに対し、アプリケーションコードを分離できます。 +Next.jsは、アプリケーションコード(`app`を含む)をオプションの[`src`フォルダ](/docs/app/api-reference/file-conventions/src-folder)内に保存することをサポートしています。これにより、プロジェクトの設定ファイルが主にプロジェクトのrootに存在するのに対し、アプリケーションコードを分離できます。 `src`ディレクトリを使用したフォルダ構造の例 **Good to know**: 以下の例では、`components`と`lib`フォルダを一般的なプレースホルダーとして使用しています。これらの名前には特別なフレームワークの意味はなく、プロジェクトによっては`ui`、`utils`、`hooks`、`styles`などの他のフォルダを使用することがあります。 #### プロジェクトファイルを`app`の外に保管する {#store-project-files-outside-of-app} -この戦略では、すべてのアプリケーションコードをプロジェクトの**root**にある共有フォルダに保存し、`app`ディレクトリを純粋にルーティング目的のために使用します。 +この戦略では、すべてのアプリケーションコードをプロジェクトの**root**にある共有フォルダに保存し、`app`ディレクトリを純粋にルーティングの目的で使用します。 appの外にプロジェクトファイルを保管するフォルダ構造の例 -> **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} @@ -119,7 +117,7 @@ export default function RootLayout({ children }) { ### Tailwindのインストール {#installing-tailwind} -Tailwindを使用し始めるには、必要なTailwind CSSパッケージをインストールします: +Tailwindを使用するには、必要なTailwind CSSパッケージをインストールします: ```bash title="Terminal" npm install tailwindcss @tailwindcss/postcss postcss @@ -127,7 +125,7 @@ npm install tailwindcss @tailwindcss/postcss postcss ### Tailwindの設定 {#configuring-tailwind} -プロジェクトのrootに`postcss.config.mjs`ファイルを作成し、PostCSS設定に`@tailwindcss/postcss`プラグインを追加します: +プロジェクトのルートに`postcss.config.mjs`ファイルを作成し、PostCSS設定に`@tailwindcss/postcss`プラグインを追加します: ```js title="postcss.config.mjs" highlight={4} /** @type {import('tailwindcss').Config} */ @@ -140,7 +138,7 @@ export default { ### Tailwindの使用 {#using-tailwind} -[Tailwindディレクティブ](https://tailwindcss.com/docs/functions-and-directives#directives)を[グローバルスタイルシート](#global-css)に追加します: +[Tailwindのディレクティブ](https://tailwindcss.com/docs/functions-and-directives#directives)を[グローバルスタイルシート](#global-css)に追加します: ```css title="app/globals.css" @import 'tailwindcss'; @@ -198,7 +196,7 @@ export default function RootLayout({ children }) { -その後、アプリケーション内でTailwindのユーティリティクラスを書き始めることができます。 +これで、アプリケーション内でTailwindのユーティリティクラスを記述し始めることができます。 @@ -221,349 +219,9 @@ export default function Page() { -## Sass {#sass} - -Next.jsは、[`.scss`](https://sass-lang.com/documentation/syntax/#scss)および[`.sass`](https://sass-lang.com/documentation/syntax#the-indented-syntax)の拡張子と構文を使用して[Sass](https://sass-lang.com/)と統合します。 - -また、[CSS Modules](#css-modules)と`.module.scss`または`.module.sass`拡張子を使用して、コンポーネントレベルのSassを使用することもできます。 - -### Sassのインストール {#installing-sass} - -Sassを使用し始めるには、`sass`パッケージをインストールします: - -```bash title="Terminal" -npm install --save-dev sass -``` - -### Sassオプションのカスタマイズ {#customizing-sass-options} - -Sassオプションを設定したい場合は、`next.config.js`の[`sassOptions`](/docs/app/api-reference/config/next-config-js/sassOptions)オプションを使用します。 - - - - -```ts title="next.config.ts" switcher -import type { NextConfig } from 'next' - -const nextConfig: NextConfig = { - sassOptions: { - additionalData: `$var: red;`, - }, -} - -export default nextConfig -``` - - - - -```js title="next.config.mjs" switcher -/** @type {import('next').NextConfig} */ - -const nextConfig = { - sassOptions: { - additionalData: `$var: red;`, - }, -} - -export default nextConfig -``` - - - - -## CSS-in-JS {#css-in-js} - -> **Warning:** ランタイムJavaScriptを必要とするCSS-in-JSライブラリは、現在React Server Componentsではサポートされていません。Server ComponentsやStreamingなどの新しいReact機能とCSS-in-JSを使用するには、ライブラリの作者が最新のReactバージョンをサポートする必要があります。 - -以下のライブラリは、`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) -- [`@fluentui/react-components`](https://react.fluentui.dev/?path=/docs/concepts-developer-server-side-rendering-next-js-appdir-setup--page) -- [`kuma-ui`](https://kuma-ui.com) -- [`@mui/material`](https://mui.com/material-ui/guides/next-js-app-router/) -- [`@mui/joy`](https://mui.com/joy-ui/integrations/next-js-app-router/) -- [`pandacss`](https://panda-css.com) -- [`styled-jsx`](#styled-jsx) -- [`styled-components`](#styled-components) -- [`stylex`](https://stylexjs.com) -- [`tamagui`](https://tamagui.dev/docs/guides/next-js#server-components) -- [`tss-react`](https://tss-react.dev/) -- [`vanilla-extract`](https://vanilla-extract.style) - -以下は現在サポートに取り組んでいます: - -- [`emotion`](https://github.com/emotion-js/emotion/issues/2928) - -Server Componentsをスタイルする場合は、[CSS Modules](#css-modules)や、[Tailwind CSS](#tailwind-css)のようにCSSファイルを出力する他のソリューションを使用することをお勧めします。 - -### CSS-in-JSの設定 {#configuring-css-in-js} - -CSS-in-JSを設定するには、次の手順を行います: - -1. レンダリング中にすべてのCSSルールを収集する**スタイルレジストリ**を作成します。 -2. `useServerInsertedHTML`フックを使用して、ルールを使用する可能性のあるコンテンツの前にルールを挿入します。 -3. 初期のサーバーサイドレンダリング中にアプリをスタイルレジストリでラップするClient Componentを作成します。 - -#### `styled-jsx` {#styled-jsx} - -アプリケーション用に`styled-jsx`を設定するには、新しいレジストリを作成します: - - - - -```tsx title="app/registry.tsx" switcher -'use client' - -import React, { useState } from 'react' -import { useServerInsertedHTML } from 'next/navigation' -import { StyleRegistry, createStyleRegistry } from 'styled-jsx' - -export default function StyledJsxRegistry({ - children, -}: { - children: React.ReactNode -}) { - // 遅延初期状態でスタイルシートを一度だけ作成 - // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state - const [jsxStyleRegistry] = useState(() => createStyleRegistry()) - - useServerInsertedHTML(() => { - const styles = jsxStyleRegistry.styles() - jsxStyleRegistry.flush() - return <>{styles} - }) - - return {children} -} -``` - - - - -```jsx title="app/registry.js" switcher -'use client' - -import React, { useState } from 'react' -import { useServerInsertedHTML } from 'next/navigation' -import { StyleRegistry, createStyleRegistry } from 'styled-jsx' - -export default function StyledJsxRegistry({ children }) { - // 遅延初期状態でスタイルシートを一度だけ作成 - // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state - const [jsxStyleRegistry] = useState(() => createStyleRegistry()) - - useServerInsertedHTML(() => { - const styles = jsxStyleRegistry.styles() - jsxStyleRegistry.flush() - return <>{styles} - }) - - return {children} -} -``` - - - - -次に、[root レイアウト](/docs/app/api-reference/file-conventions/layout#root-layouts)をレジストリでラップします: - - - - -```tsx title="app/layout.tsx" switcher -import StyledJsxRegistry from './registry' - -export default function RootLayout({ - children, -}: { - children: React.ReactNode -}) { - return ( - - - {children} - - - ) -} -``` - - - - -```jsx title="app/layout.js" switcher -import StyledJsxRegistry from './registry' - -export default function RootLayout({ children }) { - return ( - - - {children} - - - ) -} -``` - - - - -#### `styled-components` {#styled-components} - -`styled-components`を使用するには、`next.config.js`で有効にします: - - - - -```ts title="next.config.ts" switcher -import type { NextConfig } from 'next' - -const nextConfig: NextConfig = { - compiler: { - styledComponents: true, - }, -} - -export default nextConfig -``` - - - - -```js title="next.config.mjs" switcher -/** @type {import('next').NextConfig} */ - -const nextConfig = { - compiler: { - styledComponents: true, - }, -} - -export default nextConfig -``` - - - - -次に、`styled-components` APIを使用して、レンダリング中に生成されたすべてのCSSスタイルルールを収集するグローバルレジストリコンポーネントを作成し、それらのルールを返す関数を作成します。次に、`useServerInsertedHTML`フックを使用して、レジストリに収集されたスタイルをroot レイアウトの`` HTMLタグに挿入します。 - - - - -```tsx title="lib/registry.tsx" switcher -'use client' - -import React, { useState } from 'react' -import { useServerInsertedHTML } from 'next/navigation' -import { ServerStyleSheet, StyleSheetManager } from 'styled-components' - -export default function StyledComponentsRegistry({ - children, -}: { - children: React.ReactNode -}) { - // 遅延初期状態でスタイルシートを一度だけ作成 - // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state - const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet()) - - useServerInsertedHTML(() => { - const styles = styledComponentsStyleSheet.getStyleElement() - styledComponentsStyleSheet.instance.clearTag() - return <>{styles} - }) - - if (typeof window !== 'undefined') return <>{children} - - return ( - - {children} - - ) -} -``` - - - - -```jsx title="lib/registry.js" switcher -'use client' - -import React, { useState } from 'react' -import { useServerInsertedHTML } from 'next/navigation' -import { ServerStyleSheet, StyleSheetManager } from 'styled-components' - -export default function StyledComponentsRegistry({ children }) { - // 遅延初期状態でスタイルシートを一度だけ作成 - // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state - const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet()) - - useServerInsertedHTML(() => { - const styles = styledComponentsStyleSheet.getStyleElement() - styledComponentsStyleSheet.instance.clearTag() - return <>{styles} - }) - - if (typeof window !== 'undefined') return <>{children} - - return ( - - {children} - - ) -} -``` - - - - -root レイアウトの`children`をスタイルレジストリコンポーネントでラップします: - - - - -```tsx title="app/layout.tsx" switcher -import StyledComponentsRegistry from './lib/registry' - -export default function RootLayout({ - children, -}: { - children: React.ReactNode -}) { - return ( - - - {children} - - - ) -} -``` - - - - -```jsx title="app/layout.js" switcher -import StyledComponentsRegistry from './lib/registry' - -export default function RootLayout({ children }) { - return ( - - - {children} - - - ) -} -``` - - - - ## External stylesheets {#external-stylesheets} -外部パッケージによって公開されたスタイルシートは、`app`ディレクトリ内のどこにでも、コロケートされたコンポーネントを含めてインポートできます: +外部パッケージによって公開されたスタイルシートは、`app`ディレクトリ内のどこにでも、またはコロケートされたコンポーネントにインポートできます: 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 463f4d33..d64f92fe 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はページに関連する``タグを自動的に生成し、ブラウザの開発者ツールで確認できます。 @@ -68,7 +68,7 @@ export default function Page() {} -利用可能なオプションの完全なリストは、[メタデータ生成ドキュメント](/docs/app/api-reference/functions/generate-metadata#metadata-fields)で確認できます。 +利用可能なオプションの完全なリストは、[generate metadata documentation](/docs/app/api-reference/functions/generate-metadata#metadata-fields)で確認できます。 ## 生成されたメタデータ {#generated-metadata} @@ -133,7 +133,7 @@ Next.jsは、UIとは別にメタデータをストリームし、解決され ### データリクエストのメモ化 {#memoizing-data-requests} -メタデータとページ自体の両方に対して**同じ**データを取得する必要がある場合があります。重複したリクエストを避けるために、Reactの[`cache`関数](https://react.dev/reference/react/cache)を使用して戻り値をメモ化し、データを一度だけ取得します。たとえば、メタデータとページの両方に対してブログ投稿情報を取得するには: +メタデータとページ自体の両方に**同じ**データを取得する必要がある場合があります。重複したリクエストを避けるために、Reactの[`cache`関数](https://react.dev/reference/react/cache)を使用して戻り値をメモ化し、データを一度だけ取得します。たとえば、メタデータとページの両方にブログ投稿情報を取得するには: @@ -215,7 +215,7 @@ export default async function Page({ params }) { ## Favicons {#favicons} -Faviconsは、ブックマークや検索結果でサイトを表す小さなアイコンです。アプリケーションにfaviconを追加するには、`favicon.ico`を作成し、アプリフォルダのrootに追加します。 +Faviconは、ブックマークや検索結果でサイトを表す小さなアイコンです。アプリケーションにfaviconを追加するには、`favicon.ico`を作成し、アプリフォルダのrootに追加します。 Appフォルダ内の特別なファイルとしてのFavicon、レイアウトファイルとページファイルの隣に配置 -特定のルートにOG画像を追加するには、フォルダ構造のさらに下に`opengraph-image.png`を作成します。たとえば、`/blog`ルートに特定のOG画像を作成するには、`blog`フォルダ内に`opengraph-image.jpg`ファイルを追加します。 +特定のルートにOG画像を追加するには、フォルダ構造のさらに深い場所に`opengraph-image.png`を作成します。たとえば、`/blog`ルートに特定のOG画像を作成するには、`blog`フォルダ内に`opengraph-image.jpg`ファイルを追加します。 blogフォルダ内の特別なファイルとしてのOG画像 他の画像形式(`jpeg`、`png`、`webp`など)もサポートされています。詳細は[Open Graph Imageドキュメント](/docs/app/api-reference/file-conventions/metadata/opengraph-image)を参照してください。 +> `jpeg`、`png`、`webp`などの他の画像形式もサポートされています。詳細は[Open Graph Imageドキュメント](/docs/app/api-reference/file-conventions/metadata/opengraph-image)を参照してください。 ## 生成されたOpen Graph画像 {#generated-open-graph-images} @@ -342,10 +342,10 @@ export default async function Image({ params }) { -`ImageResponse`は、flexboxや絶対位置、カスタムフォント、テキストの折り返し、センタリング、ネストされた画像などの一般的なCSSプロパティをサポートしています。[サポートされているCSSプロパティの完全なリストを参照してください](/docs/app/api-reference/functions/image-response)。 +`ImageResponse`は、フレックスボックスや絶対位置指定、カスタムフォント、テキストの折り返し、センタリング、ネストされた画像などの一般的な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`)は機能しません。 +> - `ImageResponse`は、[`@vercel/og`](https://vercel.com/docs/og-image-generation)、[`satori`](https://github.com/vercel/satori)、および`resvg`を使用してHTMLとCSSをPNGに変換します。 +> - フレックスボックスとCSSプロパティのサブセットのみがサポートされています。高度なレイアウト(例:`display: grid`)は機能しません。 diff --git a/docs/01-app/01-getting-started/11-deploying.mdx b/docs/01-app/01-getting-started/11-deploying.mdx index d4c44ae0..0ae734d7 100644 --- a/docs/01-app/01-getting-started/11-deploying.mdx +++ b/docs/01-app/01-getting-started/11-deploying.mdx @@ -4,40 +4,77 @@ nav_title: 'デプロイ' description: 'Next.js アプリケーションのデプロイ方法を学びましょう。' --- -Next.js アプリのデプロイ準備が整ったら、[マネージドインフラストラクチャプロバイダー](#managed-infrastructure-providers)を選択するか、アプリケーションを[セルフホスティング](#self-hosting)することができます。 +Next.js は、Node.js サーバー、Docker コンテナ、静的エクスポートとしてデプロイすることができ、さまざまなプラットフォームに適応させることも可能です。 -## マネージドインフラストラクチャプロバイダー {#managed-infrastructure-providers} +| デプロイオプション | 機能サポート | +| ----------------------------------- | -------------------- | +| [Node.js サーバー](#node-js-server) | すべて | +| [Docker コンテナ](#docker) | すべて | +| [静的エクスポート](#static-export) | 限定的 | +| [アダプター](#adapters) | プラットフォーム固有 | -マネージドプラットフォームは、Next.js アプリをデプロイするための実用的なオプションです。これらのプロバイダーは、ホスティング、スケーリング、サーバー構成を代行してくれます。 +## Node.js サーバー {#node-js-server} -Next.js の作成者およびメンテナーである [Vercel](https://vercel.com/docs/frameworks/nextjs?utm_source=next-site&utm_medium=docs&utm_campaign=next-website) は、**フル機能サポート**と**ゼロ構成**でアプリケーションをデプロイすることができます。 +Next.js は、Node.js をサポートする任意のプロバイダーにデプロイできます。`package.json` に `"build"` と `"start"` スクリプトが含まれていることを確認してください: -- [Vercel 上の Next.js についてさらに学ぶ](https://vercel.com/docs/frameworks/nextjs?utm_source=next-site&utm_medium=docs&utm_campaign=next-website) -- [テンプレートをデプロイして](https://vercel.com/templates/next.js?utm_source=next-site&utm_medium=docs&utm_campaign=next-website) Vercel 上で Next.js を試す +```json title="package.json" +{ + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start" + } +} +``` -また、以下のコミュニティが管理するデプロイテンプレートもあります: +次に、`npm run build` を実行してアプリケーションをビルドし、`npm run start` を実行して Node.js サーバーを開始します。このサーバーはすべての Next.js 機能をサポートしています。必要に応じて、[カスタムサーバー](/docs/app/guides/custom-server)に移行することもできます。 + +Node.js デプロイメントはすべての Next.js 機能をサポートしています。インフラストラクチャに合わせて[設定する方法](/docs/app/guides/self-hosting)を学びましょう。 + +### テンプレート {#templates} -- [Deno](https://github.com/nextjs/deploy-deno) - [Flightcontrol](https://github.com/nextjs/deploy-flightcontrol) - [Railway](https://github.com/nextjs/deploy-railway) +- [Replit](https://github.com/nextjs/deploy-replit) + +## Docker {#docker} + +Next.js は、[Docker](https://www.docker.com/) コンテナをサポートする任意のプロバイダーにデプロイできます。これには、Kubernetes のようなコンテナオーケストレーターや Docker を実行するクラウドプロバイダーが含まれます。 + +Docker デプロイメントはすべての Next.js 機能をサポートしています。インフラストラクチャに合わせて[設定する方法](/docs/app/guides/self-hosting)を学びましょう。 + +### テンプレート {#templates} + +- [Docker](https://github.com/vercel/next.js/tree/canary/examples/with-docker) +- [Docker Multi-Environment](https://github.com/vercel/next.js/tree/canary/examples/with-docker-multi-env) +- [DigitalOcean](https://github.com/nextjs/deploy-digitalocean) +- [Fly.io](https://github.com/nextjs/deploy-fly) +- [Google Cloud Run](https://github.com/nextjs/deploy-google-cloud-run) - [Render](https://github.com/nextjs/deploy-render) - [SST](https://github.com/nextjs/deploy-sst) -各プロバイダーのドキュメントを参照して、サポートされている Next.js の機能についての情報を確認してください。 +## 静的エクスポート {#static-export} -## セルフホスティング {#self-hosting} +Next.js は、静的サイトまたは[シングルページアプリケーション (SPA)](/docs/app/guides/single-page-applications)として開始し、後でサーバーを必要とする機能を使用するようにアップグレードすることができます。 -セルフホスティングは、独自のサーバーのプロビジョニング、コンテナの管理、スケーリングを担当することを意味するかもしれません。Next.js をセルフホスティングする方法は3つあります: +Next.js は[静的エクスポート](/docs/app/guides/static-exports)をサポートしているため、HTML/CSS/JS の静的アセットを提供できる任意のウェブサーバーにデプロイおよびホストすることができます。これには、AWS S3、Nginx、Apache などのツールが含まれます。 -- [Node.js サーバー](/docs/app/building-your-application/deploying#nodejs-server) -- [Docker コンテナ](/docs/app/building-your-application/deploying#docker-image) -- [静的エクスポート](/docs/app/building-your-application/deploying#static-html-export) +[静的エクスポート](/docs/app/guides/static-exports)として実行する場合、サーバーを必要とする Next.js 機能はサポートされません。[詳細はこちら](/docs/app/guides/static-exports#unsupported-features)。 -以下のセルフホスティングプロバイダーに関するコミュニティが管理するデプロイ例があります: +### テンプレート {#templates} -- [DigitalOcean](https://github.com/nextjs/deploy-digitalocean) -- [Fly.io](https://github.com/nextjs/deploy-fly) - [GitHub Pages](https://github.com/nextjs/deploy-github-pages) -- [Google Cloud Run](https://github.com/nextjs/deploy-google-cloud-run) -> **🎥 視聴:** Next.js のセルフホスティングについてさらに学ぶ → [YouTube (45 分)](https://www.youtube.com/watch?v=sIVL4JMqRfc) +## アダプター {#adapters} + +Next.js は、さまざまなプラットフォームに適応させて、そのインフラストラクチャの機能をサポートすることができます。 + +各プロバイダーのドキュメントを参照して、サポートされている Next.js 機能に関する情報を確認してください: + +- [AWS Amplify Hosting](https://docs.amplify.aws/nextjs/start/quickstart/nextjs-app-router-client-components) +- [Cloudflare](https://developers.cloudflare.com/workers/frameworks/framework-guides/nextjs) +- [Deno Deploy](https://docs.deno.com/examples/next_tutorial) +- [Netlify](https://docs.netlify.com/frameworks/next-js/overview/#next-js-support-on-netlify) +- [Vercel](https://vercel.com/docs/frameworks/nextjs) + +> **Note:** すべてのプラットフォームが採用できる[デプロイメントアダプター API](https://github.com/vercel/next.js/discussions/77740)に取り組んでいます。完成後、独自のアダプターを書く方法についてのドキュメントを追加します。 diff --git a/docs/01-app/03-building-your-application/06-optimizing/08-analytics.mdx b/docs/01-app/02-guides/analytics.mdx similarity index 83% rename from docs/01-app/03-building-your-application/06-optimizing/08-analytics.mdx rename to docs/01-app/02-guides/analytics.mdx index aa67a7f2..142d7aef 100644 --- a/docs/01-app/03-building-your-application/06-optimizing/08-analytics.mdx +++ b/docs/01-app/02-guides/analytics.mdx @@ -1,15 +1,16 @@ --- -title: 'Analytics' +title: 'Next.jsアプリケーションに分析を追加する方法' +nav_title: 'Analytics' description: 'Next.js Speed Insightsを使用してページのパフォーマンスを測定および追跡する' --- {/* このドキュメントの内容は、app routerとpages routerの間で共有されています。Pages Routerに特化したコンテンツを追加するには、`Content`コンポーネントを使用できます。共有コンテンツはコンポーネントでラップしないでください。 */} -Next.jsには、パフォーマンスメトリクスを測定し報告するための組み込みサポートがあります。`useReportWebVitals`フックを使用して自分で報告を管理することもできますし、Vercelが提供する[管理サービス](https://vercel.com/analytics?utm_source=next-site&utm_medium=docs&utm_campaign=next-website)を利用して、メトリクスを自動的に収集し可視化することもできます。 +Next.jsには、パフォーマンス指標を測定し報告するための組み込みサポートがあります。[`useReportWebVitals`](/docs/app/api-reference/functions/use-report-web-vitals)フックを使用して自分で報告を管理することもできますし、Vercelが提供する[管理サービス](https://vercel.com/analytics?utm_source=next-site&utm_medium=docs&utm_campaign=next-website)を利用して、メトリクスを自動的に収集し視覚化することもできます。 ## クライアントインストゥルメンテーション {#client-instrumentation} -より高度な分析と監視のニーズに対応するために、Next.jsは`instrumentation-client.js|ts`ファイルを提供しています。このファイルは、アプリケーションのフロントエンドコードが実行される前に実行されます。これは、グローバルな分析、エラートラッキング、またはパフォーマンス監視ツールを設定するのに理想的です。 +より高度な分析と監視のニーズに対応するために、Next.jsはアプリケーションのフロントエンドコードが実行される前に実行される`instrumentation-client.js|ts`ファイルを提供しています。これは、グローバルな分析、エラートラッキング、またはパフォーマンス監視ツールを設定するのに理想的です。 使用するには、アプリケーションのルートディレクトリに`instrumentation-client.js`または`instrumentation-client.ts`ファイルを作成します: @@ -40,7 +41,7 @@ function MyApp({ Component, pageProps }) { } ``` -詳細は[APIリファレンス](https://nextjs.org/docs/canary/pages/api-reference/functions/use-report-web-vitals)を参照してください。 +詳細は[APIリファレンス](https://nextjs.org/docs/canary/pages/api-reference/functions/use-report-web-vitals)をご覧ください。 @@ -75,7 +76,7 @@ export default function Layout({ children }) { > `useReportWebVitals`フックは`"use client"`ディレクティブを必要とするため、最もパフォーマンスの高いアプローチは、root レイアウトがインポートする別のコンポーネントを作成することです。これにより、クライアントの境界が`WebVitals`コンポーネントに限定されます。 -詳細は[APIリファレンス](/docs/app/api-reference/functions/use-report-web-vitals)を参照してください。 +詳細は[APIリファレンス](/docs/app/api-reference/functions/use-report-web-vitals)をご覧ください。 @@ -175,7 +176,7 @@ export function WebVitals() { 上記のコアメトリクスに加えて、ページのハイドレーションとレンダリングにかかる時間を測定する追加のカスタムメトリクスがあります: -- `Next.js-hydration`: ページがハイドレーションを開始して終了するまでの時間(ミリ秒) +- `Next.js-hydration`: ページがハイドレーションを開始し終了するまでの時間(ミリ秒) - `Next.js-route-change-to-render`: ルート変更後にページがレンダリングを開始するまでの時間(ミリ秒) - `Next.js-render`: ルート変更後にページがレンダリングを終了するまでの時間(ミリ秒) @@ -205,7 +206,7 @@ export function reportWebVitals(metric) { ## 結果を外部システムに送信する {#sending-results-to-external-systems} -結果を任意のエンドポイントに送信して、サイト上の実際のユーザーパフォーマンスを測定および追跡できます。例えば: +サイト上の実際のユーザーパフォーマンスを測定および追跡するために、任意のエンドポイントに結果を送信できます。例えば: ```js useReportWebVitals((metric) => { @@ -237,4 +238,4 @@ useReportWebVitals((metric) => { > }) > ``` > -> [Google Analyticsへの結果の送信について詳しく読む](https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-analytics). +> [Google Analyticsへの結果送信](https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-analytics)について詳しく読む diff --git a/docs/01-app/03-building-your-application/09-authentication/index.mdx b/docs/01-app/02-guides/authentication.mdx similarity index 84% rename from docs/01-app/03-building-your-application/09-authentication/index.mdx rename to docs/01-app/02-guides/authentication.mdx index 53b9abc3..6598d1a8 100644 --- a/docs/01-app/03-building-your-application/09-authentication/index.mdx +++ b/docs/01-app/02-guides/authentication.mdx @@ -1,15 +1,16 @@ --- -title: 'Authentication' -description: 'Next.jsアプリケーションでの認証の実装方法を学びます。' +title: 'Next.jsで認証を実装する方法' +nav_title: 'Authentication' +description: 'Next.jsアプリケーションで認証を実装する方法を学びましょう。' --- -アプリケーションのデータを保護するためには、認証を理解することが重要です。このページでは、認証を実装するために使用するReactとNext.jsの機能について説明します。 +認証を理解することは、アプリケーションのデータを保護するために重要です。このページでは、認証を実装するために使用するReactとNext.jsの機能について説明します。 始める前に、プロセスを3つの概念に分解すると役立ちます: -1. **[Authentication](#authentication)**: ユーザーが自分が主張する人物であるかどうかを確認します。ユーザーは、ユーザー名とパスワードなど、何かを持っているもので自分の身元を証明する必要があります。 +1. **[Authentication](#authentication)**: ユーザーが自分が主張する人物であるかどうかを確認します。ユーザーは、ユーザー名やパスワードなど、何かを持っているもので自分の身元を証明する必要があります。 2. **[Session Management](#session-management)**: リクエスト間でユーザーの認証状態を追跡します。 -3. **[Authorization](#authorization)**: ユーザーがアクセスできるルートとデータを決定します。 +3. **[Authorization](#authorization)**: ユーザーがアクセスできるルートやデータを決定します。 この図は、ReactとNext.jsの機能を使用した認証フローを示しています: @@ -37,7 +38,7 @@ Server Actionsは常にサーバー上で実行されるため、認証ロジッ #### 1. ユーザーの資格情報をキャプチャする {#1-capture-user-credentials} -ユーザーの資格情報をキャプチャするには、送信時にServer Actionを呼び出すフォームを作成します。たとえば、ユーザーの名前、メールアドレス、パスワードを受け付けるサインアップフォームです: +ユーザーの資格情報をキャプチャするには、送信時にServer Actionを呼び出すフォームを作成します。たとえば、ユーザーの名前、メールアドレス、パスワードを受け入れるサインアップフォーム: @@ -117,7 +118,7 @@ export async function signup(formData) {} Server Actionを使用して、サーバー上でフォームフィールドを検証します。認証プロバイダーがフォーム検証を提供していない場合は、[Zod](https://zod.dev/)や[Yup](https://github.com/jquense/yup)のようなスキーマ検証ライブラリを使用できます。 -Zodを例にとると、適切なエラーメッセージを含むフォームスキーマを定義できます: +Zodを例にとると、適切なエラーメッセージを持つフォームスキーマを定義できます: @@ -342,7 +343,7 @@ export default function SignupForm() { > **Good to know:** > > - React 19では、`useFormStatus`は、返されるオブジェクトにdata、method、actionなどの追加のキーを含みます。React 19を使用していない場合、`pending`キーのみが利用可能です。 -> - データを変更する前に、ユーザーがそのアクションを実行する権限があることを常に確認する必要があります。[Authentication and Authorization](#authorization)を参照してください。 +> - データを変更する前に、ユーザーがアクションを実行する権限があることを常に確認する必要があります。[Authentication and Authorization](#authorization)を参照してください。 #### 3. ユーザーを作成するか、ユーザーの資格情報を確認する {#3-create-a-user-or-check-user-credentials} @@ -427,12 +428,12 @@ export async function signup(state, formData) { -ユーザーアカウントの作成またはユーザー資格情報の確認が成功した後、ユーザーの認証状態を管理するためにセッションを作成できます。セッション管理戦略に応じて、セッションはcookieまたはデータベース、またはその両方に保存できます。[Session Management](#session-management)セクションに進んで詳細を学びましょう。 +ユーザーアカウントの作成またはユーザー資格情報の確認が成功した後、ユーザーの認証状態を管理するためのセッションを作成できます。セッション管理戦略に応じて、セッションはcookieやデータベース、またはその両方に保存できます。[Session Management](#session-management)セクションに進んで詳細を学びましょう。 > **Tips:** > -> - 上記の例は教育目的で認証ステップを詳細に説明しているため冗長です。独自の安全なソリューションを実装することはすぐに複雑になる可能性があることを強調しています。プロセスを簡素化するために[Auth Library](#auth-libraries)の使用を検討してください。 -> - ユーザーエクスペリエンスを向上させるために、登録フローの早い段階で重複するメールアドレスやユーザー名を確認することを検討してください。たとえば、ユーザーがユーザー名を入力しているときや入力フィールドがフォーカスを失ったときです。これにより、不要なフォーム送信を防ぎ、ユーザーに即時のフィードバックを提供できます。[use-debounce](https://www.npmjs.com/package/use-debounce)などのライブラリを使用して、これらのチェックの頻度を管理することができます。 +> - 上記の例は教育目的で認証ステップを分解しているため冗長です。独自の安全なソリューションを実装することはすぐに複雑になる可能性があることを強調しています。プロセスを簡素化するために[Auth Library](#auth-libraries)の使用を検討してください。 +> - ユーザーエクスペリエンスを向上させるために、登録フローの早い段階で重複するメールアドレスやユーザー名を確認することを検討してください。たとえば、ユーザーがユーザー名を入力中または入力フィールドがフォーカスを失ったときに確認することができます。これにより、不要なフォーム送信を防ぎ、ユーザーに即時のフィードバックを提供できます。[use-debounce](https://www.npmjs.com/package/use-debounce)などのライブラリを使用して、これらのチェックの頻度を管理するためにリクエストをデバウンスすることができます。 @@ -441,7 +442,7 @@ export async function signup(state, formData) { サインアップおよび/またはログインフォームを実装する手順は次のとおりです: 1. ユーザーがフォームを通じて資格情報を送信します。 -2. フォームはAPIルートによって処理されるリクエストを送信します。 +2. フォームがAPIルートで処理されるリクエストを送信します。 3. 検証が成功すると、プロセスが完了し、ユーザーの認証が成功したことを示します。 4. 検証が失敗した場合、エラーメッセージが表示されます。 @@ -532,7 +533,7 @@ export default function LoginPage() { 上記のフォームには、ユーザーのメールアドレスとパスワードをキャプチャするための2つの入力フィールドがあります。送信時に、APIルート(`/api/auth/login`)にPOSTリクエストを送信する関数をトリガーします。 -次に、APIルートで認証を処理するために認証プロバイダーのAPIを呼び出すことができます: +その後、APIルートで認証を処理するために、認証プロバイダーのAPIを呼び出すことができます: @@ -604,11 +605,11 @@ export default async function handler(req, res) { ステートレスセッションを作成および管理するには、次の手順を実行する必要があります: -1. セッションを署名するために使用される秘密鍵を生成し、[環境変数](/docs/app/building-your-application/configuring/environment-variables)として保存します。 +1. セッションを署名するための秘密鍵を生成し、[環境変数](/docs/app/guides/environment-variables)として保存します。 2. セッション管理ライブラリを使用してセッションデータを暗号化/復号化するロジックを記述します。 3. Next.jsの[`cookies`](/docs/app/api-reference/functions/cookies) APIを使用してcookieを管理します。 -上記に加えて、ユーザーがアプリケーションに戻ったときにセッションを[更新(またはリフレッシュ)](#updating-or-refreshing-sessions)し、ユーザーがログアウトしたときにセッションを[削除](#deleting-the-session)する機能を追加することを検討してください。 +上記に加えて、ユーザーがアプリケーションに戻ったときにセッションを[更新(またはリフレッシュ)](#updating-or-refreshing-sessions)する機能を追加し、ユーザーがログアウトしたときにセッションを[削除](#deleting-the-session)することを検討してください。 > **Good to know:** [auth library](#auth-libraries)がセッション管理を含んでいるかどうかを確認してください。 @@ -620,13 +621,13 @@ export default async function handler(req, res) { openssl rand -base64 32 ``` -このコマンドは、秘密鍵として使用できる32文字のランダムな文字列を生成し、[環境変数ファイル](/docs/app/building-your-application/configuring/environment-variables)に保存します: +このコマンドは、秘密鍵として使用できる32文字のランダムな文字列を生成し、[環境変数ファイル](/docs/app/guides/environment-variables)に保存します: ```bash title=".env" SESSION_SECRET=your_secret_key ``` -次に、この鍵をセッション管理ロジックで参照できます: +その後、この鍵をセッション管理ロジックで参照できます: ```js title="app/lib/session.js" const secretKey = process.env.SESSION_SECRET @@ -702,7 +703,7 @@ export async function decrypt(session) { > **Tips**: > -> - ペイロードには、ユーザーIDや役割など、後続のリクエストで使用される**最小限の**一意のユーザーデータを含める必要があります。電話番号、メールアドレス、クレジットカード情報などの個人を特定できる情報や、パスワードなどの機密データを含めるべきではありません。 +> - ペイロードには、ユーザーのIDや役割など、後続のリクエストで使用される**最小限の**一意のユーザーデータを含める必要があります。電話番号、メールアドレス、クレジットカード情報などの個人を特定できる情報や、パスワードなどの機密データを含めるべきではありません。 #### 3. Cookieの設定(推奨オプション) {#3-setting-cookies-recommended-options} @@ -710,7 +711,7 @@ export async function decrypt(session) { - **HttpOnly**: クライアント側のJavaScriptがcookieにアクセスするのを防ぎます。 - **Secure**: httpsを使用してcookieを送信します。 -- **SameSite**: cookieがクロスサイトリクエストで送信できるかどうかを指定します。 +- **SameSite**: cookieがクロスサイトリクエストと共に送信できるかどうかを指定します。 - **Max-AgeまたはExpires**: 一定期間後にcookieを削除します。 - **Path**: cookieのURLパスを定義します。 @@ -811,7 +812,7 @@ export async function signup(state, formData) { > **Tips**: > > - **Cookieはサーバー上で設定されるべきです**。これにより、クライアント側の改ざんを防ぎます。 -> - 🎥 視聴: Next.jsを使用したステートレスセッションと認証について詳しく学ぶ → [YouTube (11分)](https://www.youtube.com/watch?v=DJvM2lSPn6w)。 +> - 🎥 視聴: StatelessセッションとNext.jsを使用した認証について詳しく学ぶ → [YouTube (11分)](https://www.youtube.com/watch?v=DJvM2lSPn6w)。 #### セッションの更新(またはリフレッシュ) {#updating-or-refreshing-sessions} @@ -912,7 +913,7 @@ export async function deleteSession() { -次に、アプリケーションで`deleteSession()`関数を再利用できます。たとえば、ログアウト時に: +その後、アプリケーション内で`deleteSession()`関数を再利用できます。たとえば、ログアウト時に: @@ -1007,7 +1008,7 @@ export default function handler(req, res) { 1. セッションとデータを保存するためのテーブルをデータベースに作成します(またはAuth Libraryがこれを処理しているかどうかを確認します)。 2. セッションを挿入、更新、削除する機能を実装します -3. セッションIDをユーザーのブラウザに保存する前に暗号化し、データベースとcookieが同期していることを確認します(これはオプションですが、[Middleware](#optimistic-checks-with-middleware-optional)での楽観的な認証チェックのために推奨されます)。 +3. セッションIDを暗号化してユーザーのブラウザに保存し、データベースとcookieが同期していることを確認します(これはオプションですが、[Middleware](#optimistic-checks-with-middleware-optional)での楽観的な認証チェックのために推奨されます)。 @@ -1094,10 +1095,10 @@ export async function createSession(id) { > **Tips**: > -> - データの取得を高速化するために、[Vercel Redis](https://vercel.com/docs/storage/vercel-kv)のようなデータベースを使用することを検討してください。ただし、セッションデータをプライマリデータベースに保持し、データリクエストを組み合わせてクエリの数を減らすこともできます。 -> - より高度なユースケースのためにデータベースセッションを使用することを選択するかもしれません。たとえば、ユーザーが最後にログインした時間を追跡したり、アクティブなデバイスの数を追跡したり、ユーザーにすべてのデバイスからログアウトする機能を提供したりすることができます。 +> - セッションの有効期間中の高速アクセスのために、サーバーキャッシングを追加することを検討してください。また、セッションデータをプライマリデータベースに保持し、データリクエストを組み合わせてクエリの数を減らすことができます。 +> - より高度なユースケースのために、データベースセッションを使用することを選択できます。たとえば、ユーザーが最後にログインした時間やアクティブなデバイスの数を追跡したり、ユーザーにすべてのデバイスからログアウトする機能を提供したりすることができます。 -セッション管理を実装した後、アプリケーション内でユーザーがアクセスできるものとできることを制御するための認可ロジックを追加する必要があります。[Authorization](#authorization)セクションに進んで詳細を学びましょう。 +セッション管理を実装した後、アプリケーション内でユーザーがアクセスできる内容と実行できる操作を制御するための認可ロジックを追加する必要があります。[Authorization](#authorization)セクションに進んで詳細を学びましょう。 @@ -1162,7 +1163,7 @@ export default async function handler(req, res) { ## Authorization {#authorization} -ユーザーが認証され、セッションが作成された後、アプリケーション内でユーザーがアクセスできるものとできることを制御するために認可を実装できます。 +ユーザーが認証され、セッションが作成された後、アプリケーション内でユーザーがアクセスできる内容と実行できる操作を制御するために認可を実装できます。 認可チェックには2つの主要なタイプがあります: @@ -1173,16 +1174,16 @@ export default async function handler(req, res) { - 認可ロジックを集中化するための[Data Access Layer](#creating-a-data-access-layer-dal)を作成する - 必要なデータのみを返すために[Data Transfer Objects (DTO)](#using-data-transfer-objects-dto)を使用する -- 楽観的なチェックを行うために[Middleware](#optimistic-checks-with-middleware-optional)をオプションで使用する。 +- オプションで[Middleware](#optimistic-checks-with-middleware-optional)を使用して楽観的なチェックを実行する。 -### 楽観的なチェックを行うMiddleware(オプション) {#optimistic-checks-with-middleware-optional} +### 楽観的なチェックとMiddleware(オプション) {#optimistic-checks-with-middleware-optional} [Middleware](/docs/app/building-your-application/routing/middleware)を使用して、権限に基づいてユーザーをリダイレクトする場合があります: -- 楽観的なチェックを行うため。Middlewareはすべてのルートで実行されるため、リダイレクトロジックを集中化し、許可されていないユーザーを事前にフィルタリングするのに適しています。 +- 楽観的なチェックを実行するため。Middlewareはすべてのルートで実行されるため、リダイレクトロジックを集中化し、許可されていないユーザーを事前にフィルタリングするのに適しています。 - ユーザー間でデータを共有する静的ルートを保護するため(例:ペイウォールの背後にあるコンテンツ)。 -ただし、Middlewareはすべてのルートで実行され、[prefetched](/docs/app/building-your-application/routing/linking-and-navigating#2-prefetching)ルートも含まれるため、パフォーマンスの問題を防ぐために、cookieからセッションを読み取るだけにする(楽観的なチェック)ことが重要です。データベースチェックを避けることが重要です。 +ただし、Middlewareはすべてのルートで実行され、[prefetched](/docs/app/building-your-application/routing/linking-and-navigating#2-prefetching)ルートも含まれるため、cookieからセッションを読み取るだけにし(楽観的なチェック)、パフォーマンスの問題を防ぐためにデータベースチェックを避けることが重要です。 例: @@ -1279,7 +1280,7 @@ export const config = { -Middlewareは初期チェックに役立ちますが、データを保護するための唯一の防御手段として使用すべきではありません。セキュリティチェックの大部分は、データソースにできるだけ近い場所で実行する必要があります。詳細については、[Data Access Layer](#creating-a-data-access-layer-dal)を参照してください。 +Middlewareは初期チェックに役立ちますが、データを保護するための唯一の防御手段として使用すべきではありません。セキュリティチェックの大部分は、データソースにできるだけ近い場所で実行する必要があります。詳細については[Data Access Layer](#creating-a-data-access-layer-dal)を参照してください。 > **Tips**: > @@ -1295,7 +1296,7 @@ Middlewareは初期チェックに役立ちますが、データを保護する DALには、アプリケーションと対話する際にユーザーのセッションを検証する関数を含める必要があります。少なくとも、関数はセッションが有効かどうかを確認し、ユーザー情報を返すか、リダイレクトする必要があります。 -たとえば、DAL用の別のファイルを作成し、`verifySession()`関数を含めます。次に、Reactの[cache](https://react.dev/reference/react/cache) APIを使用して、Reactのレンダーパス中に関数の戻り値をメモ化します: +たとえば、DAL用の別のファイルを作成し、`verifySession()`関数を含めます。その後、Reactの[cache](https://react.dev/reference/react/cache) APIを使用して、Reactのレンダリングパス中に関数の戻り値をメモ化します: @@ -1342,7 +1343,7 @@ export const verifySession = cache(async () => { -次に、データリクエスト、Server Actions、Route Handlersで`verifySession()`関数を呼び出すことができます: +その後、データリクエスト、Server Actions、Route Handlersで`verifySession()`関数を呼び出すことができます: @@ -1355,7 +1356,7 @@ export const getUser = cache(async () => { try { const data = await db.query.users.findMany({ where: eq(users.id, session.userId), - // 必要なカラムのみを明示的に返す + // 必要な列を明示的に返す columns: { id: true, name: true, @@ -1384,7 +1385,7 @@ export const getUser = cache(async () => { try { const data = await db.query.users.findMany({ where: eq(users.id, session.userId), - // 必要なカラムのみを明示的に返す + // 必要な列を明示的に返す columns: { id: true, name: true, @@ -1407,13 +1408,13 @@ export const getUser = cache(async () => { > **Tip**: > -> - DALはリクエスト時にデータを保護するために使用できます。ただし、ユーザー間でデータを共有する静的ルートの場合、データはビルド時にフェッチされ、リクエスト時にはフェッチされません。[Middleware](#optimistic-checks-with-middleware-optional)を使用して静的ルートを保護します。 -> - セキュアなチェックのために、セッションIDをデータベースと比較してセッションが有効かどうかを確認できます。Reactの[cache](https://react.dev/reference/react/cache)関数を使用して、レンダーパス中にデータベースへの不要な重複リクエストを回避します。 -> - 関連するデータリクエストをJavaScriptクラスに統合し、メソッドを実行する前に`verifySession()`を実行することを検討するかもしれません。 +> - DALはリクエスト時にフェッチされるデータを保護するために使用できます。ただし、ユーザー間でデータを共有する静的ルートの場合、データはビルド時にフェッチされ、リクエスト時にはフェッチされません。[Middleware](#optimistic-checks-with-middleware-optional)を使用して静的ルートを保護します。 +> - セキュアなチェックのために、データベースとセッションIDを比較してセッションが有効かどうかを確認できます。Reactの[cache](https://react.dev/reference/react/cache)関数を使用して、レンダリングパス中の不要な重複リクエストをデータベースに送信しないようにします。 +> - 関連するデータリクエストをJavaScriptクラスに統合し、メソッドを実行する前に`verifySession()`を実行することを検討することもできます。 ### Data Transfer Objects (DTO)の使用 {#using-data-transfer-objects-dto} -データを取得する際には、アプリケーションで使用される必要なデータのみを返し、オブジェクト全体を返さないことをお勧めします。たとえば、ユーザーデータをフェッチする場合、ユーザーのIDと名前のみを返し、パスワードや電話番号などを含むユーザーオブジェクト全体を返さないかもしれません。 +データを取得する際には、アプリケーションで使用される必要なデータのみを返し、全体のオブジェクトを返さないことをお勧めします。たとえば、ユーザーデータをフェッチする場合、ユーザーのIDと名前のみを返し、パスワードや電話番号などを含む全体のユーザーオブジェクトを返さないようにします。 ただし、返されるデータ構造を制御できない場合や、チームで作業している場合で、クライアントに全体のオブジェクトが渡されるのを避けたい場合は、クライアントに公開しても安全なフィールドを指定するなどの戦略を使用できます。 @@ -1435,13 +1436,13 @@ function canSeePhoneNumber(viewer: User, team: string) { export async function getProfileDTO(slug: string) { const data = await db.query.users.findMany({ where: eq(users.slug, slug), - // 特定のカラムをここで返す + // 特定の列をここで返す }) const user = data[0] const currentUser = await getUser(user.id) - // または、クエリに特化したものをここで返す + // または、ここでクエリに特化したものを返す return { username: canSeeUsername(currentUser) ? user.username : null, phonenumber: canSeePhoneNumber(currentUser, user.team) @@ -1469,13 +1470,13 @@ function canSeePhoneNumber(viewer, team) { export async function getProfileDTO(slug) { const data = await db.query.users.findMany({ where: eq(users.slug, slug), - // 特定のカラムをここで返す + // 特定の列をここで返す }) const user = data[0] const currentUser = await getUser(user.id) - // または、クエリに特化したものをここで返す + // または、ここでクエリに特化したものを返す return { username: canSeeUsername(currentUser) ? user.username : null, phonenumber: canSeePhoneNumber(currentUser, user.team) @@ -1488,11 +1489,11 @@ export async function getProfileDTO(slug) { -データリクエストと認可ロジックをDALに集中化し、DTOを使用することで、すべてのデータリクエストが安全で一貫性があることを保証し、アプリケーションがスケールするにつれて、メンテナンス、監査、デバッグが容易になります。 +データリクエストと認可ロジックをDALに集中化し、DTOを使用することで、すべてのデータリクエストが安全で一貫性があることを保証し、アプリケーションがスケールするにつれてメンテナンス、監査、デバッグが容易になります。 > **Good to know**: > -> - DTOを定義する方法はいくつかあります。`toJSON()`を使用する方法、上記の例のように個別の関数を使用する方法、またはJSクラスを使用する方法です。これらはJavaScriptのパターンであり、ReactやNext.jsの機能ではないため、アプリケーションに最適なパターンを見つけるために調査することをお勧めします。 +> - DTOを定義する方法はいくつかあります。`toJSON()`を使用する方法、上記の例のような個別の関数、またはJSクラスなどです。これらはJavaScriptのパターンであり、ReactやNext.jsの機能ではないため、アプリケーションに最適なパターンを見つけるために調査することをお勧めします。 > - [Security in Next.js article](https://nextjs.org/blog/security-nextjs-server-components-actions)でセキュリティのベストプラクティスについて詳しく学びましょう。 ### Server Components {#server-components} @@ -1546,7 +1547,7 @@ export default function Dashboard() { ### レイアウトと認証チェック {#layouts-and-auth-checks} -[Partial Rendering](/docs/app/building-your-application/routing/linking-and-navigating#4-partial-rendering)のため、[Layouts](/docs/app/building-your-application/routing/layouts-and-templates)でチェックを行う際には注意が必要です。これらはナビゲーション時に再レンダリングされないため、ユーザーセッションはすべてのルート変更時にチェックされません。 +[Partial Rendering](/docs/app/building-your-application/routing/linking-and-navigating#4-partial-rendering)のため、[Layouts](/docs/app/building-your-application/routing/layouts-and-templates)でのチェックには注意が必要です。これらはナビゲーション時に再レンダリングされないため、ユーザーセッションはすべてのルート変更時にチェックされません。 代わりに、データソースや条件付きでレンダリングされるコンポーネントに近い場所でチェックを行うべきです。 @@ -1616,7 +1617,7 @@ export const getUser = cache(async () => { > **Good to know:** > -> - SPAで一般的なパターンは、ユーザーが認可されていない場合にレイアウトやトップレベルコンポーネントで`return null`を返すことです。このパターンは**推奨されません**。Next.jsアプリケーションには複数のエントリーポイントがあり、これによりネストされたルートセグメントやServer Actionsへのアクセスが防止されないためです。 +> - SPAで一般的なパターンは、ユーザーが認可されていない場合にレイアウトやトップレベルコンポーネントで`return null`を返すことです。このパターンは**推奨されません**。Next.jsアプリケーションには複数のエントリーポイントがあり、これによりネストされたルートセグメントやServer Actionsへのアクセスが防止されません。 ### Server Actions {#server-actions} @@ -1683,19 +1684,19 @@ export async function GET() { // ユーザー認証と役割の確認 const session = await verifySession() - // ユーザーが認証されているか確認 + // ユーザーが認証されているかどうかを確認する if (!session) { // ユーザーが認証されていない return new Response(null, { status: 401 }) } - // ユーザーが'admin'役割を持っているか確認 + // ユーザーが'admin'役割を持っているかどうかを確認する if (session.user.role !== 'admin') { // ユーザーは認証されているが、適切な権限を持っていない return new Response(null, { status: 403 }) } - // 認可されたユーザーのために続行 + // 認可されたユーザーのために続行する } ``` @@ -1709,19 +1710,19 @@ export async function GET() { // ユーザー認証と役割の確認 const session = await verifySession() - // ユーザーが認証されているか確認 + // ユーザーが認証されているかどうかを確認する if (!session) { // ユーザーが認証されていない return new Response(null, { status: 401 }) } - // ユーザーが'admin'役割を持っているか確認 + // ユーザーが'admin'役割を持っているかどうかを確認する if (session.user.role !== 'admin') { // ユーザーは認証されているが、適切な権限を持っていない return new Response(null, { status: 403 }) } - // 認可されたユーザーのために続行 + // 認可されたユーザーのために続行する } ``` @@ -1794,11 +1795,11 @@ export default function Profile() { ### Data Access Layer (DAL)の作成 {#creating-a-data-access-layer-dal} -#### API Routesの保護 {#protecting-api-routes} +#### APIルートの保護 {#protecting-api-routes} -Next.jsのAPI Routesは、サーバーサイドのロジックとデータ管理を処理するために不可欠です。これらのルートを保護し、特定の機能にアクセスできるのは認可されたユーザーのみであることを確認することが重要です。これには通常、ユーザーの認証状態と役割ベースの権限を確認することが含まれます。 +Next.jsのAPIルートは、サーバーサイドのロジックとデータ管理を処理するために不可欠です。これらのルートを保護し、特定の機能にアクセスできるのは認可されたユーザーのみであることを確認することが重要です。これには通常、ユーザーの認証状態と役割ベースの権限を確認することが含まれます。 -API Routeを保護する例を示します: +APIルートを保護する例を示します: @@ -1812,7 +1813,7 @@ export default async function handler( ) { const session = await getSession(req) - // ユーザーが認証されているか確認 + // ユーザーが認証されているかどうかを確認する if (!session) { res.status(401).json({ error: 'User is not authenticated', @@ -1820,7 +1821,7 @@ export default async function handler( return } - // ユーザーが'admin'役割を持っているか確認 + // ユーザーが'admin'役割を持っているかどうかを確認する if (session.user.role !== 'admin') { res.status(401).json({ error: 'Unauthorized access: User does not have admin privileges.', @@ -1828,8 +1829,8 @@ export default async function handler( return } - // 認可されたユーザーのためにルートを続行 - // ... API Routeの実装 + // 認可されたユーザーのためにルートを続行する + // ... APIルートの実装 } ``` @@ -1840,7 +1841,7 @@ export default async function handler( export default async function handler(req, res) { const session = await getSession(req) - // ユーザーが認証されているか確認 + // ユーザーが認証されているかどうかを確認する if (!session) { res.status(401).json({ error: 'User is not authenticated', @@ -1848,33 +1849,34 @@ export default async function handler(req, res) { return } - // ユーザーが'admin'役割を持っているか確認 + // ユーザーが'admin'役割を持っているかどうかを確認する if (session.user.role !== 'admin') { - res.status: 401).json({ + res.status(401).json({ error: 'Unauthorized access: User does not have admin privileges.', }) return } - // 認可されたユーザーのためにルートを続行 - // ... API Routeの実装 + // 認可されたユーザーのためにルートを続行する + // ... APIルートの実装 } ``` -この例は、認証と認可のための2段階のセキュリティチェックを備えたAPI Routeを示しています。最初にアクティブなセッションを確認し、次にログインしているユーザーが'admin'であるかどうかを確認します。このアプローチは、リクエスト処理のために認証され、認可されたユーザーに限定された安全なアクセスを保証します。 +この例は、認証と認可の2段階のセキュリティチェックを備えたAPIルートを示しています。最初にアクティブなセッションを確認し、次にログインしているユーザーが'admin'であるかどうかを確認します。このアプローチは、認証され、認可されたユーザーに限定された安全なアクセスを保証し、リクエスト処理の堅牢なセキュリティを維持します。 ## Resources {#resources} -Next.jsでの認証について学んだ今、セキュアな認証とセッション管理を実装するのに役立つNext.js互換のライブラリとリソースを紹介します: +Next.jsでの認証について学んだ今、セキュアな認証とセッション管理を実装するのに役立つNext.js互換のライブラリとリソースを以下に示します: ### Auth Libraries {#auth-libraries} - [Auth0](https://auth0.com/docs/quickstart/webapp/nextjs/01-login) +- [Better Auth](https://www.better-auth.com/docs/integrations/next) - [Clerk](https://clerk.com/docs/quickstarts/nextjs) - [Kinde](https://kinde.com/docs/developer-tools/nextjs-sdk) - [Logto](https://docs.logto.io/quick-starts/next-app-router) @@ -1892,7 +1894,7 @@ Next.jsでの認証について学んだ今、セキュアな認証とセッシ ## Further Reading {#further-reading} -認証とセキュリティについてさらに学ぶために、次のリソースをチェックしてください: +認証とセキュリティについてさらに学ぶために、以下のリソースをチェックしてください: - [How to think about security in Next.js](https://nextjs.org/blog/security-nextjs-server-components-actions) - [Understanding XSS Attacks](https://vercel.com/guides/understanding-xss-attacks) diff --git a/docs/01-app/02-guides/ci-build-caching.mdx b/docs/01-app/02-guides/ci-build-caching.mdx new file mode 100644 index 00000000..9867516f --- /dev/null +++ b/docs/01-app/02-guides/ci-build-caching.mdx @@ -0,0 +1,169 @@ +--- +title: '継続的インテグレーション(CI)ビルドキャッシュの設定方法' +nav_title: 'CIビルドキャッシュ' +description: 'Next.jsビルドをキャッシュするためのCI設定方法を学びます' +--- + +ビルドパフォーマンスを向上させるために、Next.jsはビルド間で共有されるキャッシュを`.next/cache`に保存します。 + +継続的インテグレーション(CI)環境でこのキャッシュを活用するには、ビルド間でキャッシュを正しく保持するようにCIワークフローを設定する必要があります。 + +> CIがビルド間で`.next/cache`を保持するように設定されていない場合、[No Cache Detected](https://nextjs.org/docs/messages/no-cache)エラーが表示されることがあります。 + +以下は、一般的なCIプロバイダーのキャッシュ設定例です: + +## Vercel {#vercel} + +Next.jsのキャッシングは自動的に設定されます。特に操作は必要ありません。VercelでTurborepoを使用している場合は、[こちらを参照してください](https://vercel.com/docs/monorepos/turborepo)。 + +## CircleCI {#circleci} + +`.circleci/config.yml`の`save_cache`ステップを編集して、`.next/cache`を含めます: + +```yaml +steps: + - save_cache: + key: dependency-cache-{{ checksum "yarn.lock" }} + paths: + - ./node_modules + - ./.next/cache +``` + +`save_cache`キーがない場合は、CircleCIの[ビルドキャッシュ設定に関するドキュメント](https://circleci.com/docs/2.0/caching/)を参照してください。 + +## Travis CI {#travis-ci} + +以下を`.travis.yml`に追加またはマージします: + +```yaml +cache: + directories: + - $HOME/.cache/yarn + - node_modules + - .next/cache +``` + +## GitLab CI {#gitlab-ci} + +以下を`.gitlab-ci.yml`に追加またはマージします: + +```yaml +cache: + key: ${CI_COMMIT_REF_SLUG} + paths: + - node_modules/ + - .next/cache/ +``` + +## Netlify CI {#netlify-ci} + +[`@netlify/plugin-nextjs`](https://www.npmjs.com/package/@netlify/plugin-nextjs)を使用して[Netlify Plugins](https://www.netlify.com/products/build/plugins/)を利用します。 + +## AWS CodeBuild {#aws-codebuild} + +以下を`buildspec.yml`に追加(またはマージ)します: + +```yaml +cache: + paths: + - 'node_modules/**/*' # `yarn`または`npm i`を高速化するために`node_modules`をキャッシュ + - '.next/cache/**/*' # アプリケーションの再ビルドを高速化するためにNext.jsをキャッシュ +``` + +## GitHub Actions {#github-actions} + +GitHubの[actions/cache](https://github.com/actions/cache)を使用して、ワークフローファイルに以下のステップを追加します: + +```yaml +uses: actions/cache@v4 +with: + # `yarn`、`bun`または他のパッケージマネージャーでのキャッシュについては、https://github.com/actions/cache/blob/main/examples.mdを参照するか、actions/setup-nodeでのキャッシングを活用できます https://github.com/actions/setup-node + path: | + ~/.npm + ${{ github.workspace }}/.next/cache + # パッケージまたはソースファイルが変更されるたびに新しいキャッシュを生成します。 + key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx') }} + # ソースファイルが変更されてもパッケージが変更されていない場合、以前のキャッシュから再ビルドします。 + restore-keys: | + ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}- +``` + +## Bitbucket Pipelines {#bitbucket-pipelines} + +`bitbucket-pipelines.yml`のトップレベル(`pipelines`と同じレベル)に以下を追加またはマージします: + +```yaml +definitions: + caches: + nextcache: .next/cache +``` + +その後、パイプラインの`step`の`caches`セクションで参照します: + +```yaml +- step: + name: your_step_name + caches: + - node + - nextcache +``` + +## Heroku {#heroku} + +Herokuの[カスタムキャッシュ](https://devcenter.heroku.com/articles/nodejs-support#custom-caching)を使用して、トップレベルのpackage.jsonに`cacheDirectories`配列を追加します: + +```javascript +"cacheDirectories": [".next/cache"] +``` + +## Azure Pipelines {#azure-pipelines} + +Azure Pipelinesの[Cacheタスク](https://docs.microsoft.com/en-us/azure/devops/pipelines/tasks/utility/cache)を使用して、`next build`を実行するタスクの前に以下のタスクをパイプラインyamlファイルに追加します: + +```yaml +- task: Cache@2 + displayName: 'Cache .next/cache' + inputs: + key: next | $(Agent.OS) | yarn.lock + path: '$(System.DefaultWorkingDirectory)/.next/cache' +``` + +## Jenkins (Pipeline) {#jenkins-pipeline} + +Jenkinsの[Job Cacher](https://www.jenkins.io/doc/pipeline/steps/jobcacher/)プラグインを使用して、通常`next build`または`npm install`を実行する`Jenkinsfile`に以下のビルドステップを追加します: + +```yaml +stage("Restore npm packages") { + steps { + // GIT_COMMITハッシュに基づいてキャッシュにロックファイルを書き込みます + writeFile file: "next-lock.cache", text: "$GIT_COMMIT" + + cache(caches: [ + arbitraryFileCache( + path: "node_modules", + includes: "**/*", + cacheValidityDecidingFile: "package-lock.json" + ) + ]) { + sh "npm install" + } + } +} +stage("Build") { + steps { + // GIT_COMMITハッシュに基づいてキャッシュにロックファイルを書き込みます + writeFile file: "next-lock.cache", text: "$GIT_COMMIT" + + cache(caches: [ + arbitraryFileCache( + path: ".next/cache", + includes: "**/*", + cacheValidityDecidingFile: "next-lock.cache" + ) + ]) { + // つまり`next build` + sh "npm run build" + } + } +} +``` diff --git a/docs/01-app/03-building-your-application/07-configuring/15-content-security-policy.mdx b/docs/01-app/02-guides/content-security-policy.mdx similarity index 67% rename from docs/01-app/03-building-your-application/07-configuring/15-content-security-policy.mdx rename to docs/01-app/02-guides/content-security-policy.mdx index 4e47eec0..bbb46dce 100644 --- a/docs/01-app/03-building-your-application/07-configuring/15-content-security-policy.mdx +++ b/docs/01-app/02-guides/content-security-policy.mdx @@ -1,17 +1,18 @@ --- -title: 'Content Security Policy' -description: 'Next.jsアプリケーションに対してContent Security Policy (CSP)を設定する方法を学びます。' +title: 'Next.jsアプリケーションにContent Security Policy (CSP)を設定する方法' +nav_title: 'Content Security Policy' +description: 'Next.jsアプリケーションにContent Security Policy (CSP)を設定する方法を学びます。' related: links: - 'app/building-your-application/routing/middleware' - 'app/api-reference/functions/headers' --- -{/* このドキュメントの内容は、app routerとpages routerの間で共有されています。Pages Routerに特化したコンテンツを追加するには、Contentコンポーネントを使用できます。共有コンテンツはコンポーネントでラップしないでください。 */} +{/* このドキュメントの内容はapp routerとpages routerの両方で共有されています。Pages Routerに特化した内容を追加するには、`Content`コンポーネントを使用できます。共有される内容はコンポーネントでラップしないでください。 */} [Content Security Policy (CSP)](https://developer.mozilla.org/docs/Web/HTTP/CSP)は、クロスサイトスクリプティング(XSS)、クリックジャッキング、その他のコードインジェクション攻撃など、さまざまなセキュリティ脅威からNext.jsアプリケーションを守るために重要です。 -CSPを使用することで、開発者はコンテンツのソース、スクリプト、スタイルシート、画像、フォント、オブジェクト、メディア(オーディオ、ビデオ)、iframeなどに対して許可されるオリジンを指定できます。 +CSPを使用することで、開発者はコンテンツソース、スクリプト、スタイルシート、画像、フォント、オブジェクト、メディア(音声、動画)、iframeなどの許可されるオリジンを指定できます。
@@ -20,21 +21,21 @@ CSPを使用することで、開発者はコンテンツのソース、スク
-## Nonce {#nonces} +## Nonces {#nonces} -[nonce](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/nonce)は、一度きりの使用のために作成された、ユニークでランダムな文字列です。これは、CSPと組み合わせて使用され、特定のインラインスクリプトやスタイルの実行を選択的に許可し、厳しいCSP指令をバイパスするために使われます。 +[nonce](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/nonce)は、一度だけ使用されるために作成されたユニークでランダムな文字列です。CSPと組み合わせて使用され、特定のインラインスクリプトやスタイルの実行を選択的に許可し、厳格なCSPディレクティブを回避します。 ### なぜnonceを使用するのか? {#why-use-a-nonce} -CSPは悪意のあるスクリプトをブロックするように設計されていますが、インラインスクリプトが必要な正当なシナリオも存在します。そのような場合、nonceはこれらのスクリプトが正しいnonceを持っている場合に実行を許可する方法を提供します。 +CSPは悪意のあるスクリプトをブロックするように設計されていますが、インラインスクリプトが必要な正当なシナリオも存在します。そのような場合、nonceは正しいnonceを持つスクリプトの実行を許可する方法を提供します。 -### Middlewareを使用してnonceを追加する {#adding-a-nonce-with-middleware} +### Middlewareでnonceを追加する {#adding-a-nonce-with-middleware} -[Middleware](/docs/app/building-your-application/routing/middleware)を使用すると、ページがレンダリングされる前にヘッダーを追加し、nonceを生成することができます。 +[Middleware](/docs/app/building-your-application/routing/middleware)を使用すると、ページがレンダリングされる前にヘッダーを追加し、nonceを生成できます。 -ページが表示されるたびに、新しいnonceを生成する必要があります。これは、**nonceを追加するために動的レンダリングを使用しなければならない**ことを意味します。 +ページが表示されるたびに、新しいnonceを生成する必要があります。つまり、nonceを追加するには**動的レンダリングを使用する必要があります**。 -例えば: +例: @@ -56,7 +57,7 @@ export function middleware(request: NextRequest) { frame-ancestors 'none'; upgrade-insecure-requests; ` - // 改行文字とスペースを置換する + // 改行文字とスペースを置換 const contentSecurityPolicyHeaderValue = cspHeader .replace(/\s{2,}/g, ' ') .trim() @@ -103,7 +104,7 @@ export function middleware(request) { frame-ancestors 'none'; upgrade-insecure-requests; ` - // 改行文字とスペースを置換する + // 改行文字とスペースを置換 const contentSecurityPolicyHeaderValue = cspHeader .replace(/\s{2,}/g, ' ') .trim() @@ -132,9 +133,9 @@ export function middleware(request) { -デフォルトでは、Middlewareはすべてのリクエストで実行されます。[`matcher`](/docs/app/building-your-application/routing/middleware#matcher)を使用して、特定のパスでのみMiddlewareを実行するようにフィルタリングできます。 +デフォルトでは、Middlewareはすべてのリクエストで実行されます。特定のパスでMiddlewareを実行するようにフィルタリングするには、[`matcher`](/docs/app/building-your-application/routing/middleware#matcher)を使用できます。 -CSPヘッダーが不要なプリフェッチ(`next/link`から)や静的資産のマッチングを無視することをお勧めします。 +`next/link`からのプリフェッチやCSPヘッダーが不要な静的アセットのマッチングを無視することをお勧めします。 @@ -143,11 +144,11 @@ CSPヘッダーが不要なプリフェッチ(`next/link`から)や静的資 export const config = { matcher: [ /* - * 次で始まるリクエストパスを除くすべてのリクエストパスと一致します: + * 次のもので始まるリクエストパスを除くすべてのリクエストパスにマッチ: * - api (APIルート) * - _next/static (静的ファイル) * - _next/image (画像最適化ファイル) - * - favicon.ico (faviconファイル) + * - favicon.ico (ファビコンファイル) */ { source: '/((?!api|_next/static|_next/image|favicon.ico).*)', @@ -167,11 +168,11 @@ export const config = { export const config = { matcher: [ /* - * 次で始まるリクエストパスを除くすべてのリクエストパスと一致します: + * 次のもので始まるリクエストパスを除くすべてのリクエストパスにマッチ: * - api (APIルート) * - _next/static (静的ファイル) * - _next/image (画像最適化ファイル) - * - favicon.ico (faviconファイル) + * - favicon.ico (ファビコンファイル) */ { source: '/((?!api|_next/static|_next/image|favicon.ico).*)', @@ -189,7 +190,7 @@ export const config = { ### nonceの読み取り {#reading-the-nonce} -`headers`を使用して、[Server Component](/docs/app/building-your-application/rendering/server-components)からnonceを読み取ることができます: +[Server Component](/docs/app/building-your-application/rendering/server-components)を使用して[`headers`](/docs/app/api-reference/functions/headers)からnonceを読み取ることができます: @@ -234,9 +235,9 @@ export default async function Page() { -## Nonceを使用しない場合 {#without-nonces} +## Noncesを使用しない場合 {#without-nonces} -nonceを必要としないアプリケーションの場合、[`next.config.js`](/docs/app/api-reference/config/next-config-js)ファイルにCSPヘッダーを直接設定できます: +nonceが不要なアプリケーションの場合、[`next.config.js`](/docs/app/api-reference/config/next-config-js)ファイルでCSPヘッダーを直接設定できます: ```js title="next.config.js" const cspHeader = ` @@ -271,4 +272,4 @@ module.exports = { ## バージョン履歴 {#version-history} -nonceを適切に処理して適用するには、Next.jsの`v13.4.20+`の使用をお勧めします。 +nonceを適切に処理し適用するために、Next.jsの`v13.4.20+`の使用を推奨します。 diff --git a/docs/01-app/03-building-your-application/05-styling/04-css-in-js.mdx b/docs/01-app/02-guides/css-in-js.mdx similarity index 77% rename from docs/01-app/03-building-your-application/05-styling/04-css-in-js.mdx rename to docs/01-app/02-guides/css-in-js.mdx index 3dc6b8f5..6d20fde5 100644 --- a/docs/01-app/03-building-your-application/05-styling/04-css-in-js.mdx +++ b/docs/01-app/02-guides/css-in-js.mdx @@ -1,13 +1,14 @@ --- -title: 'CSS-in-JS' +title: 'CSS-in-JSライブラリの使用方法' +nav_title: 'CSS-in-JS' description: 'Next.jsでCSS-in-JSライブラリを使用する' --- -{/* このドキュメントの内容は、app routerとpages routerの間で共有されています。Pages Routerに特有のコンテンツを追加するには、`Content`コンポーネントを使用できます。共有コンテンツはコンポーネントでラップしないでください。 */} +{/* このドキュメントの内容は、app routerとpages routerの間で共有されています。Pages Routerに特化したコンテンツを追加するには、`Content`コンポーネントを使用できます。共有コンテンツはコンポーネントでラップしないでください。 */} -> **警告:** CSS-in-JSをServer ComponentsやStreamingのような新しいReact機能と一緒に使用するには、ライブラリの作者が最新のReactバージョンをサポートする必要があります。これには[concurrent rendering](https://react.dev/blog/2022/03/29/react-v18#what-is-concurrent-react)も含まれます。 +> **警告:** CSS-in-JSを新しいReactの機能、例えばServer ComponentsやStreamingと共に使用するには、ライブラリの作者がReactの最新バージョン、特に[concurrent rendering](https://react.dev/blog/2022/03/29/react-v18#what-is-concurrent-react)をサポートする必要があります。 以下のライブラリは、`app`ディレクトリ内のClient Componentsでサポートされています(アルファベット順): @@ -25,21 +26,21 @@ description: 'Next.jsでCSS-in-JSライブラリを使用する' - [`tss-react`](https://tss-react.dev/) - [`vanilla-extract`](https://vanilla-extract.style) -以下のライブラリは現在サポートに取り組んでいます: +現在サポートに取り組んでいるライブラリ: - [`emotion`](https://github.com/emotion-js/emotion/issues/2928) -> **Good to know**: 異なるCSS-in-JSライブラリをテストしており、React 18の機能や`app`ディレクトリをサポートするライブラリの例を追加していく予定です。 +> **Good to know**: 私たちはさまざまなCSS-in-JSライブラリをテストしており、React 18の機能や`app`ディレクトリをサポートするライブラリの例をさらに追加していく予定です。 -Server Componentsをスタイル付けしたい場合は、[CSS Modules](/docs/app/building-your-application/styling/css)や、PostCSSや[Tailwind CSS](/docs/app/building-your-application/styling/tailwind-css)のようにCSSファイルを出力する他のソリューションを使用することをお勧めします。 +Server Componentsをスタイルする場合は、[CSS Modules](/docs/app/building-your-application/styling/css)や、PostCSSや[Tailwind CSS](/docs/app/building-your-application/styling/tailwind-css)のようにCSSファイルを出力する他のソリューションを使用することをお勧めします。 ## `app`でのCSS-in-JSの設定 {#configuring-css-in-js-in-app} CSS-in-JSの設定は、以下の3ステップのオプトインプロセスを含みます: -1. レンダリング中にすべてのCSSルールを収集するための**スタイルレジストリ**。 -2. それらを使用する可能性のあるコンテンツの前にルールを挿入するための新しい`useServerInsertedHTML`フック。 -3. 初期のサーバーサイドレンダリング中にアプリをスタイルレジストリでラップするClient Component。 +1. レンダリング中にすべてのCSSルールを収集する**スタイルレジストリ** +2. それらを使用する可能性のあるコンテンツの前にルールを挿入するための新しい`useServerInsertedHTML`フック +3. 初期のサーバーサイドレンダリング中にアプリをスタイルレジストリでラップするClient Component ### `styled-jsx` {#styled-jsx} @@ -60,7 +61,7 @@ export default function StyledJsxRegistry({ }: { children: React.ReactNode }) { - // 遅延初期状態でスタイルシートを一度だけ作成する + // 初期状態を遅延させてスタイルシートを一度だけ作成 // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state const [jsxStyleRegistry] = useState(() => createStyleRegistry()) @@ -85,7 +86,7 @@ import { useServerInsertedHTML } from 'next/navigation' import { StyleRegistry, createStyleRegistry } from 'styled-jsx' export default function StyledJsxRegistry({ children }) { - // 遅延初期状態でスタイルシートを一度だけ作成する + // 初期状態を遅延させてスタイルシートを一度だけ作成 // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state const [jsxStyleRegistry] = useState(() => createStyleRegistry()) @@ -145,11 +146,11 @@ export default function RootLayout({ children }) { -[こちらで例を確認できます](https://github.com/vercel/app-playground/tree/main/app/styling/styled-jsx)。 +[こちらで例を確認できます](https://github.com/vercel/app-playground/tree/main/app/styling/styled-jsx). ### Styled Components {#styled-components} -以下は、`styled-components@6`以降を設定する方法の例です: +以下は、`styled-components@6`以降を設定する例です: まず、`next.config.js`でstyled-componentsを有効にします。 @@ -178,7 +179,7 @@ export default function StyledComponentsRegistry({ }: { children: React.ReactNode }) { - // 遅延初期状態でスタイルシートを一度だけ作成する + // 初期状態を遅延させてスタイルシートを一度だけ作成 // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet()) @@ -209,7 +210,7 @@ import { useServerInsertedHTML } from 'next/navigation' import { ServerStyleSheet, StyleSheetManager } from 'styled-components' export default function StyledComponentsRegistry({ children }) { - // 遅延初期状態でスタイルシートを一度だけ作成する + // 初期状態を遅延させてスタイルシートを一度だけ作成 // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet()) @@ -275,14 +276,14 @@ export default function RootLayout({ children }) {
-[こちらで例を確認できます](https://github.com/vercel/app-playground/tree/main/app/styling/styled-components)。 +[こちらで例を確認できます](https://github.com/vercel/app-playground/tree/main/app/styling/styled-components). > **Good to know**: > -> - サーバーレンダリング中、スタイルはグローバルレジストリに抽出され、HTMLの``にフラッシュされます。これにより、スタイルルールがそれらを使用する可能性のあるコンテンツの前に配置されることが保証されます。将来的には、スタイルを挿入する場所を決定するために、今後のReact機能を使用するかもしれません。 -> - ストリーミング中、各チャンクからのスタイルは収集され、既存のスタイルに追加されます。クライアントサイドのハイドレーションが完了した後、`styled-components`は通常どおり動作し、さらに動的なスタイルを挿入します。 -> - スタイルレジストリのためにツリーの最上位でClient Componentを使用するのは、CSSルールを抽出するのに効率的だからです。これにより、後続のサーバーレンダリングでスタイルが再生成されるのを防ぎ、Server Componentのペイロードに送信されるのを防ぎます。 -> - styled-componentsのコンパイルの個々のプロパティを設定する必要がある高度なユースケースについては、[Next.js styled-components APIリファレンス](/docs/architecture/nextjs-compiler#styled-components)を読んで詳細を学ぶことができます。 +> - サーバーレンダリング中、スタイルはグローバルレジストリに抽出され、HTMLの``にフラッシュされます。これにより、スタイルルールがそれらを使用する可能性のあるコンテンツの前に配置されることが保証されます。将来的には、スタイルを挿入する場所を決定するために、今後のReactの機能を使用する可能性があります。 +> - ストリーミング中、各チャンクからのスタイルは収集され、既存のスタイルに追加されます。クライアントサイドのハイドレーションが完了した後、`styled-components`は通常通り動作し、さらに動的なスタイルを挿入します。 +> - スタイルレジストリのためにツリーの最上位でClient Componentを使用するのは、CSSルールを抽出するのにより効率的だからです。これにより、後続のサーバーレンダーでスタイルが再生成されるのを防ぎ、Server Componentのペイロードに送信されるのを防ぎます。 +> - styled-componentsのコンパイルの個々のプロパティを設定する必要がある高度なユースケースについては、[Next.js styled-components APIリファレンス](/docs/architecture/nextjs-compiler#styled-components)を参照して詳細を学んでください。 @@ -312,7 +313,7 @@ function HiThere() { export default HiThere ``` -[styled-jsx](https://github.com/vercel/styled-jsx)をバンドルして、分離されたスコープのCSSをサポートしています。目標は、Web Componentsに似た「シャドウCSS」をサポートすることですが、残念ながら[サーバーレンダリングをサポートしておらず、JSのみです](https://github.com/w3c/webcomponents/issues/71)。 +私たちは、分離されたスコープのCSSをサポートするために[styled-jsx](https://github.com/vercel/styled-jsx)をバンドルしています。目標は、Web Componentsに似た「シャドウCSS」をサポートすることですが、残念ながら[サーバーレンダリングをサポートせず、JSのみです](https://github.com/w3c/webcomponents/issues/71)。 他の人気のあるCSS-in-JSソリューション(Styled Componentsなど)の例については、上記を参照してください。 @@ -349,10 +350,10 @@ function HelloWorld() { export default HelloWorld ``` -より多くの例については、[styled-jsxのドキュメント](https://github.com/vercel/styled-jsx)を参照してください。 +詳細な例については、[styled-jsxのドキュメント](https://github.com/vercel/styled-jsx)を参照してください。 ### JavaScriptの無効化 {#disabling-javascript} -はい、JavaScriptを無効にしても、CSSは本番ビルド(`next start`)で読み込まれます。開発中は、[Fast Refresh](https://nextjs.org/blog/next-9-4#fast-refresh)を使用して最良の開発者体験を提供するために、JavaScriptを有効にする必要があります。 +はい、JavaScriptを無効にしても、プロダクションビルド(`next start`)ではCSSは読み込まれます。開発中は、[Fast Refresh](https://nextjs.org/blog/next-9-4#fast-refresh)を使用して最良の開発者体験を提供するために、JavaScriptを有効にする必要があります。 diff --git a/docs/01-app/03-building-your-application/07-configuring/10-custom-server.mdx b/docs/01-app/02-guides/custom-server.mdx similarity index 69% rename from docs/01-app/03-building-your-application/07-configuring/10-custom-server.mdx rename to docs/01-app/02-guides/custom-server.mdx index 71e0f240..af742b84 100644 --- a/docs/01-app/03-building-your-application/07-configuring/10-custom-server.mdx +++ b/docs/01-app/02-guides/custom-server.mdx @@ -1,17 +1,17 @@ --- -title: 'Custom Server' -description: 'カスタムサーバーを使用してNext.jsアプリをプログラムで開始する方法。' +title: 'Next.jsでカスタムサーバーを設定する方法' +nav_title: 'カスタムサーバー' +description: 'カスタムサーバーを使用してNext.jsアプリをプログラムで開始します。' --- -{/* このドキュメントの内容は、app routerとpages routerの間で共有されています。Pages Routerに特化した内容を追加するには、`Content`コンポーネントを使用できます。共有される内容はコンポーネントでラップしないでください。 */} +{/* このドキュメントの内容は、app routerとpages routerの間で共有されています。Pages Routerに特化した内容を追加するには、`Content`コンポーネントを使用できます。共有されるコンテンツはコンポーネントでラップしないでください。 */} -Next.jsはデフォルトで`next start`とともに独自のサーバーを含んでいます。既存のバックエンドがある場合でも、Next.jsと一緒に使用できます(これはカスタムサーバーではありません)。カスタムNext.jsサーバーを使用すると、カスタムパターンのためにプログラムでサーバーを開始できます。ほとんどの場合、このアプローチは必要ありませんが、必要に応じて使用可能です。 +Next.jsはデフォルトで`next start`を使用して独自のサーバーを含んでいます。既存のバックエンドがある場合でも、Next.jsと一緒に使用できます(これはカスタムサーバーではありません)。カスタムNext.jsサーバーを使用すると、カスタムパターンのためにプログラムでサーバーを開始できます。ほとんどの場合、このアプローチは必要ありませんが、必要に応じて使用可能です。 > **Good to know**: > -> - カスタムサーバーを使用する前に、Next.jsの統合されたルーターがアプリの要件を満たせない場合にのみ使用することを覚えておいてください。カスタムサーバーは、**[Automatic Static Optimization](https://nextjs.org/docs/canary/pages/building-your-application/rendering/automatic-static-optimization)**のような重要なパフォーマンス最適化を削除します。 -> - カスタムサーバーは[Vercel](https://vercel.com/frameworks/nextjs)にデプロイ**できません**。 -> - スタンドアロン出力モードを使用する場合、カスタムサーバーファイルをトレースしません。このモードは、代わりに別の最小限の`server.js`ファイルを出力します。これらは一緒に使用できません。 +> - カスタムサーバーを使用する前に、Next.jsの統合されたルーターがアプリの要件を満たせない場合にのみ使用することを覚えておいてください。カスタムサーバーを使用すると、**[Automatic Static Optimization](https://nextjs.org/docs/canary/pages/building-your-application/rendering/automatic-static-optimization)**のような重要なパフォーマンス最適化が削除されます。 +> - スタンドアロン出力モードを使用する場合、カスタムサーバーファイルをトレースしません。このモードでは、代わりに最小限の`server.js`ファイルを出力します。これらは一緒に使用できません。 カスタムサーバーの[次の例](https://github.com/vercel/next.js/tree/canary/examples/custom-server)を見てみましょう: @@ -72,7 +72,7 @@ app.prepare().then(() => { -> `server.js`はNext.jsコンパイラやバンドルプロセスを通過しません。このファイルが必要とする構文とソースコードが、使用している現在のNode.jsバージョンと互換性があることを確認してください。[例を参照](https://github.com/vercel/next.js/tree/canary/examples/custom-server)。 +> `server.js`はNext.jsのコンパイラやバンドルプロセスを通過しません。このファイルが必要とする構文やソースコードが、使用している現在のNode.jsバージョンと互換性があることを確認してください。[例を参照](https://github.com/vercel/next.js/tree/canary/examples/custom-server)。 カスタムサーバーを実行するには、`package.json`の`scripts`を次のように更新する必要があります: @@ -86,7 +86,7 @@ app.prepare().then(() => { } ``` -または、`nodemon`をセットアップすることもできます([例](https://github.com/vercel/next.js/tree/canary/examples/custom-server))。カスタムサーバーは、Next.jsアプリケーションとサーバーを接続するために次のインポートを使用します: +または、`nodemon`を設定することもできます([例](https://github.com/vercel/next.js/tree/canary/examples/custom-server))。カスタムサーバーは、Next.jsアプリケーションとサーバーを接続するために次のインポートを使用します: ```js import next from 'next' @@ -94,9 +94,9 @@ import next from 'next' const app = next({}) ``` -上記の`next`インポートは、次のオプションを持つオブジェクトを受け取る関数です: +上記の`next`インポートは、次のオプションを含むオブジェクトを受け取る関数です: -| オプション | 型 | 説明 | +| Option | Type | Description | | ------------ | ------------------ | --------------------------------------------------------------------------------------------- | | `conf` | `Object` | `next.config.js`で使用するのと同じオブジェクト。デフォルトは`{}` | | `dev` | `Boolean` | (_オプション_)Next.jsを開発モードで起動するかどうか。デフォルトは`false` | @@ -125,6 +125,6 @@ module.exports = { > `useFileSystemPublicRoutes`はSSRからのファイル名ルートを無効にしますが、クライアントサイドのルーティングはこれらのパスにアクセスする可能性があります。このオプションを使用する場合、プログラムでナビゲーションを防ぐべきルートへの移動を防ぐ必要があります。 -> クライアントサイドルーターを設定して、ファイル名ルートへのクライアントサイドリダイレクトを禁止することも検討するかもしれません。そのためには、[`router.beforePopState`](https://nextjs.org/docs/canary/pages/api-reference/functions/use-router#routerbeforepopstate)を参照してください。 +> クライアントサイドルーターを設定して、ファイル名ルートへのクライアントサイドリダイレクトを禁止することも検討してください。そのためには、[`router.beforePopState`](https://nextjs.org/docs/canary/pages/api-reference/functions/use-router#routerbeforepopstate)を参照してください。 diff --git a/docs/01-app/03-building-your-application/07-configuring/16-debugging.mdx b/docs/01-app/02-guides/debugging.mdx similarity index 83% rename from docs/01-app/03-building-your-application/07-configuring/16-debugging.mdx rename to docs/01-app/02-guides/debugging.mdx index aeec4431..5cda66ae 100644 --- a/docs/01-app/03-building-your-application/07-configuring/16-debugging.mdx +++ b/docs/01-app/02-guides/debugging.mdx @@ -1,9 +1,10 @@ --- -title: 'デバッグ' -description: 'VS Code、Chrome DevTools、またはFirefox DevToolsを使用してNext.jsアプリケーションをデバッグする方法を学びましょう。' +title: 'Next.jsでデバッグツールを使用する方法' +nav_title: 'デバッグ' +description: 'VS Code、Chrome DevTools、またはFirefox DevToolsを使用してNext.jsアプリケーションをデバッグする方法を学びます。' --- -{/* このドキュメントの内容はapp routerとpages routerの間で共有されています。Pages Routerに特化した内容を追加するには、`Content`コンポーネントを使用できます。共有されるコンテンツはコンポーネントでラップしないでください。 */} +{/* このドキュメントの内容は、app routerとpages routerの間で共有されています。Pages Routerに特有のコンテンツを追加するには、`Content`コンポーネントを使用できます。共有コンテンツはコンポーネントでラップしないでください。 */} このドキュメントでは、[VS Codeデバッガー](https://code.visualstudio.com/docs/editor/debugging)、[Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools)、または[Firefox DevTools](https://firefox-source-docs.mozilla.org/devtools-user/)を使用して、Next.jsのフロントエンドおよびバックエンドコードをフルソースマップサポートでデバッグする方法を説明します。 @@ -11,7 +12,7 @@ Node.jsにアタッチできるデバッガーであれば、Next.jsアプリケ ## VS Codeでのデバッグ {#debugging-with-vs-code} -プロジェクトのルートに`.vscode/launch.json`という名前のファイルを作成し、次の内容を記述します: +プロジェクトのrootに`.vscode/launch.json`という名前のファイルを作成し、次の内容を記述します: ```json title="launch.json" { @@ -46,7 +47,7 @@ Node.jsにアタッチできるデバッガーであれば、Next.jsアプリケ "name": "Next.js: debug full stack", "type": "node", "request": "launch", - "program": "${workspaceFolder}/node_modules/.bin/next", + "program": "${workspaceFolder}/node_modules/next/dist/bin/next", "runtimeArgs": ["--inspect"], "skipFiles": ["/**"], "serverReadyAction": { @@ -67,7 +68,7 @@ Node.jsにアタッチできるデバッガーであれば、Next.jsアプリケ "Next.js: debug full stack"の設定では、`serverReadyAction.action`がサーバーが準備完了したときに開くブラウザを指定します。`debugWithEdge`はEdgeブラウザを起動することを意味します。Chromeを使用している場合は、この値を`debugWithChrome`に変更してください。 -アプリケーションの起動時に[ポート番号を変更している](https://nextjs.org/docs/canary/pages/api-reference/cli/next#next-dev-options)場合は、`http://localhost:3000`の`3000`を使用しているポートに置き換えてください。 +アプリケーションが起動するポート番号を[変更している場合](https://nextjs.org/docs/canary/pages/api-reference/cli/next#next-dev-options)、`http://localhost:3000`の`3000`を使用しているポートに置き換えてください。 Next.jsをroot以外のディレクトリから実行している場合(例えば、Turborepoを使用している場合)、サーバーサイドおよびフルスタックデバッグタスクに`cwd`を追加する必要があります。例えば、`"cwd": "${workspaceFolder}/apps/web"`のようにします。 @@ -81,16 +82,16 @@ Next.jsをroot以外のディレクトリから実行している場合(例え ### クライアントサイドコード {#client-side-code} -通常どおり`next dev`、`npm run dev`、または`yarn dev`を実行して開発サーバーを起動します。サーバーが起動したら、お好みのブラウザで`http://localhost:3000`(または代替URL)を開きます。 +通常通りに開発サーバーを起動し、`next dev`、`npm run dev`、または`yarn dev`を実行します。サーバーが起動したら、お好みのブラウザで`http://localhost:3000`(または代替URL)を開きます。 Chromeの場合: -- Chromeの開発者ツールを開く(Windows/Linuxでは`Ctrl+Shift+J`、macOSでは`⌥+⌘+I`) +- Chromeのデベロッパーツールを開く(Windows/Linuxでは`Ctrl+Shift+J`、macOSでは`⌥+⌘+I`) - **Sources**タブに移動 Firefoxの場合: -- Firefoxの開発者ツールを開く(Windows/Linuxでは`Ctrl+Shift+I`、macOSでは`⌥+⌘+I`) +- Firefoxのデベロッパーツールを開く(Windows/Linuxでは`Ctrl+Shift+I`、macOSでは`⌥+⌘+I`) - **Debugger**タブに移動 どちらのブラウザでも、クライアントサイドコードが[`debugger`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/debugger)ステートメントに到達するたびに、コードの実行が一時停止し、そのファイルがデバッグエリアに表示されます。また、手動でブレークポイントを設定するためにファイルを検索することもできます: @@ -108,7 +109,7 @@ Firefoxの場合: NODE_OPTIONS='--inspect' next dev ``` -> **Good to know**: `NODE_OPTIONS='--inspect=0.0.0.0'`を使用すると、Dockerコンテナでアプリを実行する場合など、localhost以外でのリモートデバッグアクセスが可能になります。 +> **Good to know**: `NODE_OPTIONS='--inspect=0.0.0.0'`を使用して、Dockerコンテナ内でアプリを実行する場合など、localhost外でのリモートデバッグアクセスを許可します。 `npm run dev`または`yarn dev`を使用している場合は、`package.json`の`dev`スクリプトを更新する必要があります: @@ -155,7 +156,7 @@ Next.jsは、エラーオーバーレイのNext.jsバージョンインジケー ### Windowsでのデバッグ {#debugging-on-windows} -Windowsユーザーは、`NODE_OPTIONS='--inspect'`を使用する際に問題が発生する可能性があります。この構文はWindowsプラットフォームではサポートされていないためです。これを回避するには、[`cross-env`](https://www.npmjs.com/package/cross-env)パッケージを開発依存関係としてインストールし(`npm`と`yarn`では`-D`)、`dev`スクリプトを次のように置き換えます。 +Windowsユーザーは、`NODE_OPTIONS='--inspect'`を使用する際に問題が発生する可能性があります。この構文はWindowsプラットフォームではサポートされていないためです。これを回避するために、[`cross-env`](https://www.npmjs.com/package/cross-env)パッケージを開発依存関係としてインストールし(`npm`と`yarn`では`-D`)、`dev`スクリプトを次のように置き換えます。 ```json title="package.json" { @@ -167,7 +168,7 @@ Windowsユーザーは、`NODE_OPTIONS='--inspect'`を使用する際に問題 `cross-env`は、どのプラットフォーム(Mac、Linux、Windowsを含む)でも`NODE_OPTIONS`環境変数を設定し、デバイスやオペレーティングシステムを問わず一貫してデバッグできるようにします。 -> **Good to know**: Windows Defenderが無効になっていることを確認してください。この外部サービスは*すべてのファイル読み取り*をチェックし、`next dev`でのFast Refresh時間を大幅に増加させることが報告されています。これはNext.jsに関連しない既知の問題ですが、Next.jsの開発に影響を与えます。 +> **Good to know**: Windows Defenderが無効になっていることを確認してください。この外部サービスは*すべてのファイル読み取り*をチェックし、`next dev`でのFast Refresh時間を大幅に増加させると報告されています。これはNext.jsに関連しない既知の問題ですが、Next.jsの開発に影響を与えます。 ## 詳細情報 {#more-information} diff --git a/docs/01-app/02-guides/draft-mode.mdx b/docs/01-app/02-guides/draft-mode.mdx new file mode 100644 index 00000000..ca362ae1 --- /dev/null +++ b/docs/01-app/02-guides/draft-mode.mdx @@ -0,0 +1,251 @@ +--- +title: 'Next.jsでDraft Modeを使用してコンテンツをプレビューする方法' +nav_title: 'Draft Mode' +description: 'Next.jsには、静的ページと動的ページを切り替えるためのdraft modeがあります。App Routerを使用してその動作を学ぶことができます。' +related: + title: '次のステップ' + description: 'Draft Modeの使用方法についての詳細はAPIリファレンスをご覧ください。' + links: + - app/api-reference/functions/draft-mode +--- + +**Draft Mode**を使用すると、Next.jsアプリケーションでヘッドレスCMSからドラフトコンテンツをプレビューできます。これは、ビルド時に生成される静的ページにとって便利で、サイト全体を再ビルドすることなく[動的レンダリング](/docs/app/building-your-application/rendering/server-components#dynamic-rendering)に切り替えてドラフトの変更を確認できます。 + +このページでは、Draft Modeを有効にして使用する方法を説明します。 + +## ステップ1: Route Handlerを作成する {#step-1-create-a-route-handler} + +[Route Handler](/docs/app/building-your-application/routing/route-handlers)を作成します。名前は任意で、例えば`app/api/draft/route.ts`とします。 + + + + +```ts title="app/api/draft/route.ts" switcher +export async function GET(request: Request) { + return new Response('') +} +``` + + + + +```js title="app/api/draft/route.js" switcher +export async function GET() { + return new Response('') +} +``` + + + + +次に、[`draftMode`](/docs/app/api-reference/functions/draft-mode)関数をインポートし、`enable()`メソッドを呼び出します。 + + + + +```ts title="app/api/draft/route.ts" switcher +import { draftMode } from 'next/headers' + +export async function GET(request: Request) { + const draft = await draftMode() + draft.enable() + return new Response('Draft mode is enabled') +} +``` + + + + +```js title="app/api/draft/route.js" switcher +import { draftMode } from 'next/headers' + +export async function GET(request) { + const draft = await draftMode() + draft.enable() + return new Response('Draft mode is enabled') +} +``` + + + + +これにより、**cookie**が設定され、draft modeが有効になります。このcookieを含む後続のリクエストはdraft modeをトリガーし、静的に生成されたページの動作を変更します。 + +`/api/draft`にアクセスし、ブラウザの開発者ツールを確認することで、手動でテストできます。`__prerender_bypass`という名前のcookieを持つ`Set-Cookie`レスポンスヘッダーに注目してください。 + +## ステップ2: ヘッドレスCMSからRoute Handlerにアクセスする {#step-2-access-the-route-handler-from-your-headless-cms} + +> 使用しているヘッドレスCMSが**カスタムドラフトURL**の設定をサポートしていることを前提としています。サポートしていない場合でも、この方法を使用してドラフトURLを保護できますが、ドラフトURLを手動で構築してアクセスする必要があります。具体的な手順は使用しているヘッドレスCMSによって異なります。 + +ヘッドレスCMSからRoute Handlerに安全にアクセスするには: + +1. 任意のトークンジェネレーターを使用して**シークレットトークン文字列**を作成します。このシークレットはNext.jsアプリとヘッドレスCMSのみが知っているものとします。 +2. ヘッドレスCMSがカスタムドラフトURLの設定をサポートしている場合、ドラフトURLを指定します(Route Handlerが`app/api/draft/route.ts`にあると仮定します)。例えば: + +```bash title="Terminal" +https:///api/draft?secret=&slug= +``` + +> - ``はデプロイメントドメインに置き換えてください。 +> - ``は生成したシークレットトークンに置き換えてください。 +> - ``は表示したいページのパスに置き換えてください。`/posts/one`を表示したい場合は、`&slug=/posts/one`を使用します。 +> +> ヘッドレスCMSによっては、ドラフトURLに変数を含めることができ、CMSのデータに基づいて``を動的に設定できるかもしれません:`&slug=/posts/{entry.fields.slug}` + +3. Route Handler内で、シークレットが一致し、`slug`パラメータが存在することを確認します(存在しない場合、リクエストは失敗するべきです)。`draftMode.enable()`を呼び出してcookieを設定し、`slug`で指定されたパスにブラウザをリダイレクトします: + + + + +```ts title="app/api/draft/route.ts" switcher +import { draftMode } from 'next/headers' +import { redirect } from 'next/navigation' + +export async function GET(request: Request) { + // クエリ文字列パラメータを解析 + const { searchParams } = new URL(request.url) + const secret = searchParams.get('secret') + const slug = searchParams.get('slug') + + // シークレットと次のパラメータを確認 + // このシークレットはこのRoute HandlerとCMSのみが知っているべきです + if (secret !== 'MY_SECRET_TOKEN' || !slug) { + return new Response('Invalid token', { status: 401 }) + } + + // 提供された`slug`が存在するかヘッドレスCMSをチェック + // getPostBySlugはヘッドレスCMSへの必要なフェッチロジックを実装します + const post = await getPostBySlug(slug) + + // slugが存在しない場合、draft modeの有効化を防ぐ + if (!post) { + return new Response('Invalid slug', { status: 401 }) + } + + // Draft Modeを有効にするためにcookieを設定 + const draft = await draftMode() + draft.enable() + + // フェッチした投稿からのパスにリダイレクト + // searchParams.slugにリダイレクトしないのは、オープンリダイレクトの脆弱性を避けるためです + redirect(post.slug) +} +``` + + + + +```js title="app/api/draft/route.js" switcher +import { draftMode } from 'next/headers' +import { redirect } from 'next/navigation' + +export async function GET(request) { + // クエリ文字列パラメータを解析 + const { searchParams } = new URL(request.url) + const secret = searchParams.get('secret') + const slug = searchParams.get('slug') + + // シークレットと次のパラメータを確認 + // このシークレットはこのRoute HandlerとCMSのみが知っているべきです + if (secret !== 'MY_SECRET_TOKEN' || !slug) { + return new Response('Invalid token', { status: 401 }) + } + + // 提供された`slug`が存在するかヘッドレスCMSをチェック + // getPostBySlugはヘッドレスCMSへの必要なフェッチロジックを実装します + const post = await getPostBySlug(slug) + + // slugが存在しない場合、draft modeの有効化を防ぐ + if (!post) { + return new Response('Invalid slug', { status: 401 }) + } + + // Draft Modeを有効にするためにcookieを設定 + const draft = await draftMode() + draft.enable() + + // フェッチした投稿からのパスにリダイレクト + // searchParams.slugにリダイレクトしないのは、オープンリダイレクトの脆弱性を避けるためです + redirect(post.slug) +} +``` + + + + +成功すれば、ブラウザはdraft modeのcookieを持って表示したいパスにリダイレクトされます。 + +## ステップ3: ドラフトコンテンツをプレビューする {#step-3-preview-the-draft-content} + +次のステップは、ページを更新して`draftMode().isEnabled`の値を確認することです。 + +cookieが設定されたページをリクエストすると、データは**リクエスト時**にフェッチされます(ビルド時ではなく)。 + +さらに、`isEnabled`の値は`true`になります。 + + + + +```tsx title="app/page.tsx" switcher +// データをフェッチするページ +import { draftMode } from 'next/headers' + +async function getData() { + const { isEnabled } = await draftMode() + + const url = isEnabled + ? 'https://draft.example.com' + : 'https://production.example.com' + + const res = await fetch(url) + + return res.json() +} + +export default async function Page() { + const { title, desc } = await getData() + + return ( +
+

{title}

+

{desc}

+
+ ) +} +``` + +
+ + +```jsx title="app/page.js" switcher +// データをフェッチするページ +import { draftMode } from 'next/headers' + +async function getData() { + const { isEnabled } = await draftMode() + + const url = isEnabled + ? 'https://draft.example.com' + : 'https://production.example.com' + + const res = await fetch(url) + + return res.json() +} + +export default async function Page() { + const { title, desc } = await getData() + + return ( +
+

{title}

+

{desc}

+
+ ) +} +``` + +
+
+ +ヘッドレスCMSから(`secret`と`slug`を使用して)またはURLを手動で使用してドラフトRoute Handlerにアクセスすると、ドラフトコンテンツを確認できるはずです。また、ドラフトを公開せずに更新した場合でも、ドラフトを表示できるはずです。 diff --git a/docs/01-app/03-building-your-application/07-configuring/03-environment-variables.mdx b/docs/01-app/02-guides/environment-variables.mdx similarity index 64% rename from docs/01-app/03-building-your-application/07-configuring/03-environment-variables.mdx rename to docs/01-app/02-guides/environment-variables.mdx index 5fa9cbee..008329d7 100644 --- a/docs/01-app/03-building-your-application/07-configuring/03-environment-variables.mdx +++ b/docs/01-app/02-guides/environment-variables.mdx @@ -1,11 +1,12 @@ --- -title: '環境変数' +title: 'Next.jsで環境変数を使用する方法' +nav_title: '環境変数' description: 'Next.jsアプリケーションで環境変数を追加し、アクセスする方法を学びます。' --- -{/* このドキュメントの内容はapp routerとpages routerの間で共有されています。Pages Routerに特有の内容を追加するには、`Content`コンポーネントを使用できます。共有される内容はコンポーネントでラップしないでください。 */} +{/* このドキュメントの内容は、app routerとpages routerの両方で共有されています。Pages Routerに特有の内容を追加するには、`Content`コンポーネントを使用できます。共有される内容はコンポーネントでラップしないでください。 */} -Next.jsには環境変数のサポートが組み込まれており、以下のことが可能です: +Next.jsには環境変数の組み込みサポートがあり、以下のことが可能です: - [`.env`を使用して環境変数を読み込む](#loading-environment-variables) - [`NEXT_PUBLIC_`でプレフィックスを付けてブラウザ用に環境変数をバンドルする](#bundling-environment-variables-for-the-browser) @@ -14,7 +15,7 @@ Next.jsには環境変数のサポートが組み込まれており、以下の ## 環境変数の読み込み {#loading-environment-variables} -Next.jsは、`.env*`ファイルから`process.env`に環境変数を読み込むためのサポートを組み込んでいます。 +Next.jsは、`.env*`ファイルから`process.env`に環境変数を読み込むための組み込みサポートを提供しています。 ```txt title=".env" DB_HOST=localhost @@ -24,7 +25,7 @@ DB_PASS=mypassword -これにより、`process.env.DB_HOST`、`process.env.DB_USER`、`process.env.DB_PASS`がNode.js環境に自動的に読み込まれ、[Next.jsのデータ取得メソッド](https://nextjs.org/docs/canary/pages/building-your-application/data-fetching)や[APIルート](https://nextjs.org/docs/canary/pages/building-your-application/routing/api-routes)で使用できるようになります。 +これにより、`process.env.DB_HOST`、`process.env.DB_USER`、および`process.env.DB_PASS`がNode.js環境に自動的に読み込まれ、[Next.jsのデータ取得メソッド](https://nextjs.org/docs/canary/pages/building-your-application/data-fetching)や[APIルート](https://nextjs.org/docs/canary/pages/building-your-application/routing/api-routes)で使用できるようになります。 例えば、[`getStaticProps`](https://nextjs.org/docs/canary/pages/building-your-application/data-fetching/get-static-props)を使用する場合: @@ -55,12 +56,12 @@ export async function getStaticProps() { > ... > -----END DSA PRIVATE KEY-----" > -> # またはダブルクォート内に`\n`を使用して +> # または、ダブルクォート内に`\n`を使用して > PRIVATE_KEY="-----BEGIN RSA PRIVATE KEY-----\nKh9NV...\n-----END DSA PRIVATE KEY-----\n" > ``` -> **注意:** `/src`フォルダを使用している場合、Next.jsは.envファイルを**親フォルダからのみ**読み込み、`/src`フォルダからは**読み込みません**。 -> これにより、`process.env.DB_HOST`、`process.env.DB_USER`、`process.env.DB_PASS`がNode.js環境に自動的に読み込まれ、[Route Handlers](/docs/app/building-your-application/routing/route-handlers)で使用できるようになります。 +> **注意:** `/src`フォルダを使用している場合、Next.jsは親フォルダからのみ.envファイルを読み込み、`/src`フォルダからは読み込みません。 +> これにより、`process.env.DB_HOST`、`process.env.DB_USER`、および`process.env.DB_PASS`がNode.js環境に自動的に読み込まれ、[Route Handlers](/docs/app/building-your-application/routing/route-handlers)で使用できるようになります。 例えば: @@ -81,7 +82,7 @@ export async function GET() { Next.jsランタイムの外部、例えばORMやテストランナーのroot設定ファイルで環境変数を読み込む必要がある場合、`@next/env`パッケージを使用できます。 -このパッケージは、Next.jsが内部で`.env*`ファイルから環境変数を読み込むために使用しています。 +このパッケージは、Next.jsが`.env*`ファイルから環境変数を読み込むために内部で使用しています。 使用するには、パッケージをインストールし、`loadEnvConfig`関数を使用して環境変数を読み込みます: @@ -145,7 +146,7 @@ export default defineConfig({ ### 他の変数の参照 {#referencing-other-variables} -Next.jsは、`.env*`ファイル内で他の変数を参照するために`$`を使用する変数を自動的に展開します。これにより、他のシークレットを参照できます。例えば: +Next.jsは、`.env*`ファイル内で他の変数を参照するために`$`を使用する変数を自動的に展開します。例えば、`$VARIABLE`のように記述できます。これにより、他のシークレットを参照することができます。例えば: ```txt title=".env" TWITTER_USER=nextjs @@ -154,13 +155,13 @@ TWITTER_URL=https://x.com/$TWITTER_USER 上記の例では、`process.env.TWITTER_URL`は`https://x.com/nextjs`に設定されます。 -> **Good to know**: 実際の値に`$`を含む変数を使用する必要がある場合は、`\$`でエスケープする必要があります。 +> **Good to know**: 実際の値に`$`を含む変数を使用する必要がある場合は、`\$`のようにエスケープする必要があります。 ## ブラウザ用に環境変数をバンドルする {#bundling-environment-variables-for-the-browser} `NEXT_PUBLIC_`で始まらない環境変数はNode.js環境でのみ利用可能であり、ブラウザからはアクセスできません(クライアントは異なる*環境*で実行されます)。 -環境変数の値をブラウザでアクセス可能にするために、Next.jsはビルド時にその値をクライアントに配信されるjsバンドルに「インライン」化し、`process.env.[variable]`へのすべての参照をハードコードされた値に置き換えることができます。これを行うには、変数に`NEXT_PUBLIC_`をプレフィックスとして付けるだけです。例えば: +環境変数の値をブラウザでアクセス可能にするために、Next.jsはビルド時にその値をクライアントに配信されるjsバンドルに「インライン」することができます。これにより、`process.env.[variable]`へのすべての参照がハードコードされた値に置き換えられます。これを行うには、変数に`NEXT_PUBLIC_`をプレフィックスとして付けるだけです。例えば: ```txt title="Terminal" NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk @@ -168,7 +169,7 @@ NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk これにより、Next.jsはNode.js環境内の`process.env.NEXT_PUBLIC_ANALYTICS_ID`へのすべての参照を、`next build`を実行する環境からの値に置き換え、コード内のどこでも使用できるようにします。これはブラウザに送信されるJavaScriptにインライン化されます。 -> **注意:** ビルド後、アプリはこれらの環境変数の変更に応答しなくなります。例えば、Herokuパイプラインを使用してある環境でビルドされたスラグを別の環境にプロモートする場合や、単一のDockerイメージを複数の環境にデプロイする場合、すべての`NEXT_PUBLIC_`変数はビルド時に評価された値で固定されるため、プロジェクトがビルドされるときにこれらの値を適切に設定する必要があります。ランタイム環境の値にアクセスする必要がある場合は、クライアントにそれらを提供する独自のAPIを設定する必要があります(オンデマンドまたは初期化時に)。 +> **注意:** ビルド後、アプリはこれらの環境変数の変更に応答しなくなります。例えば、Herokuパイプラインを使用してある環境でビルドされたスラグを別の環境にプロモートする場合や、単一のDockerイメージを複数の環境にデプロイする場合、すべての`NEXT_PUBLIC_`変数はビルド時に評価された値で固定されるため、プロジェクトがビルドされるときにこれらの値を適切に設定する必要があります。ランタイム環境の値にアクセスする必要がある場合は、クライアントに提供する独自のAPIを設定する必要があります(オンデマンドまたは初期化時に)。 ```js title="pages/index.js" import setupAnalyticsService from '../lib/my-analytics-service' @@ -187,11 +188,11 @@ export default HomePage 動的なルックアップはインライン化されないことに注意してください。例えば: ```js -// これはインライン化されません。なぜなら、変数を使用しているからです +// これはインライン化されません。変数を使用しているためです const varName = 'NEXT_PUBLIC_ANALYTICS_ID' setupAnalyticsService(process.env[varName]) -// これはインライン化されません。なぜなら、変数を使用しているからです +// これはインライン化されません。変数を使用しているためです const env = process.env setupAnalyticsService(env.NEXT_PUBLIC_ANALYTICS_ID) ``` @@ -204,13 +205,13 @@ Next.jsはビルド時とランタイムの両方の環境変数をサポート -ランタイム環境変数を読み取るには、`getServerSideProps`または[App Routerの段階的な採用](/docs/app/guides/migrating/app-router-migration)を使用することをお勧めします。 +ランタイム環境変数を読み取るには、`getServerSideProps`を使用するか、[App Routerを段階的に採用する](/docs/app/guides/migrating/app-router-migration)ことをお勧めします。 -動的レンダリング中にサーバー上で環境変数を安全に読み取ることができます: +動的レンダリング中にサーバーで環境変数を安全に読み取ることができます: @@ -253,37 +254,23 @@ export default async function Component() { **Good to know:** -- [`register`関数](/docs/app/building-your-application/optimizing/instrumentation)を使用してサーバーの起動時にコードを実行できます。 -- [`runtimeConfig`](https://nextjs.org/docs/canary/pages/api-reference/config/next-config-js/runtime-configuration)オプションの使用は推奨しません。これはスタンドアロン出力モードでは機能しないためです。この機能が必要な場合は、[段階的にApp Routerを採用する](/docs/app/guides/migrating/app-router-migration)ことをお勧めします。 - -## Vercelでの環境変数 {#environment-variables-on-vercel} - -Next.jsアプリケーションを[Vercel](https://vercel.com)にデプロイする際、環境変数は[プロジェクト設定](https://vercel.com/docs/projects/environment-variables?utm_medium=docs&utm_source=next-site&utm_campaign=next-website)で設定できます。 - -すべての種類の環境変数はそこで設定する必要があります。開発で使用される環境変数でさえも、後で[ローカルデバイスにダウンロード](https://vercel.com/docs/concepts/projects/environment-variables#development-environment-variables?utm_source=next-site&utm_medium=docs&utm_campaign=next-website)できます。 - -[開発環境変数](https://vercel.com/docs/concepts/projects/environment-variables#development-environment-variables?utm_source=next-site&utm_medium=docs&utm_campaign=next-website)を設定した場合、次のコマンドを使用してローカルマシンで使用するために`.env.local`にプルできます: - -```bash title="Terminal" -vercel env pull -``` - -> **Good to know**: Next.jsアプリケーションを[Vercel](https://vercel.com)にデプロイする際、`.env*`ファイル内の環境変数は、名前が`NEXT_PUBLIC_`でプレフィックスされていない限り、Edge Runtimeで利用できません。すべての環境変数が利用可能な[プロジェクト設定](https://vercel.com/docs/projects/environment-variables?utm_medium=docs&utm_source=next-site&utm_campaign=next-website)で環境変数を管理することを強くお勧めします。 +- [`register`関数](/docs/app/guides/instrumentation)を使用してサーバーの起動時にコードを実行できます。 +- [`runtimeConfig`](https://nextjs.org/docs/canary/pages/api-reference/config/next-config-js/runtime-configuration)オプションの使用は推奨しません。これはスタンドアロン出力モードでは機能しないためです。この機能が必要な場合は、App Routerを[段階的に採用する](/docs/app/guides/migrating/app-router-migration)ことをお勧めします。 ## テスト環境変数 {#test-environment-variables} -`development`および`production`環境とは別に、3番目のオプションとして`test`環境があります。開発または本番環境のデフォルトを設定できるのと同様に、`testing`環境用に`.env.test`ファイルを使用して同じことができます(ただし、これは前述の2つほど一般的ではありません)。Next.jsは`testing`環境で`.env.development`または`.env.production`から環境変数を読み込みません。 +`development`および`production`環境とは別に、3番目のオプションとして`test`があります。開発または本番環境のデフォルトを設定できるのと同様に、`testing`環境用に`.env.test`ファイルを使用して同じことができます(ただし、これは前述の2つほど一般的ではありません)。Next.jsは`testing`環境で`.env.development`または`.env.production`から環境変数を読み込みません。 -これは、`jest`や`cypress`のようなツールを使用してテストを実行する際に、テスト目的で特定の環境変数を設定する必要がある場合に便利です。`NODE_ENV`が`test`に設定されている場合、テストのデフォルト値が読み込まれますが、通常は手動でこれを行う必要はありません。テストツールがそれを処理します。 +これは、`jest`や`cypress`のようなツールを使用してテストを実行する際に、テスト目的で特定の環境変数を設定する必要がある場合に便利です。`NODE_ENV`が`test`に設定されている場合、テストのデフォルト値が読み込まれますが、通常は手動で行う必要はありません。テストツールがそれを処理します。 -`test`環境と`development`および`production`環境の間には、小さな違いがあります:`.env.local`は読み込まれません。これは、テストがすべての人に同じ結果をもたらすことを期待しているためです。このようにして、`.env.local`(デフォルトセットを上書きすることを意図している)を無視することで、異なる実行間で同じ環境デフォルトを使用します。 +`test`環境と`development`および`production`の間には小さな違いがあります:`.env.local`は読み込まれません。これは、テストがすべての人に対して同じ結果を生成することを期待しているためです。このようにして、`.env.local`(デフォルトセットを上書きすることを意図している)を無視することで、異なる実行間で同じ環境デフォルトを使用します。 > **Good to know**: デフォルトの環境変数と同様に、`.env.test`ファイルはリポジトリに含めるべきですが、`.env.test.local`は含めるべきではありません。`.env*.local`は`.gitignore`を通じて無視されることを意図しています。 ユニットテストを実行する際、`@next/env`パッケージの`loadEnvConfig`関数を活用して、Next.jsが行うのと同じ方法で環境変数を読み込むことを確認できます。 ```js -// 以下は、Jestのグローバルセットアップファイルや、テストセットアップ用の類似のファイルで使用できます +// 以下は、Jestのグローバルセットアップファイルや、テストセットアップ用の類似ファイルで使用できます import { loadEnvConfig } from '@next/env' export default async () => { @@ -294,22 +281,22 @@ export default async () => { ## 環境変数の読み込み順序 {#environment-variable-load-order} -環境変数は、以下の場所で順番に検索され、変数が見つかった時点で停止します。 +環境変数は、以下の場所で順番に検索され、変数が見つかると停止します。 1. `process.env` 1. `.env.$(NODE_ENV).local` -1. `.env.local`(`NODE_ENV`が`test`の場合はチェックされません。) +1. `.env.local` (`NODE_ENV`が`test`の場合はチェックされません。) 1. `.env.$(NODE_ENV)` 1. `.env` 例えば、`NODE_ENV`が`development`で、`.env.development.local`と`.env`の両方に変数を定義した場合、`.env.development.local`の値が使用されます。 -> **Good to know**: `NODE_ENV`の許可される値は`production`、`development`、`test`です。 +> **Good to know**: `NODE_ENV`の許可される値は`production`、`development`、および`test`です。 ## Good to know {#good-to-know} -- [`/src`ディレクトリ](/docs/app/building-your-application/configuring/src-directory)を使用している場合、`.env.*`ファイルはプロジェクトのrootに残すべきです。 -- 環境変数`NODE_ENV`が未割り当ての場合、Next.jsは`next dev`コマンドを実行する際に自動的に`development`を割り当て、他のすべてのコマンドには`production`を割り当てます。 +- [`/src`ディレクトリ](/docs/app/api-reference/file-conventions/src-folder)を使用している場合、`.env.*`ファイルはプロジェクトのrootに残すべきです。 +- 環境変数`NODE_ENV`が未割り当ての場合、Next.jsは`next dev`コマンドを実行するときに自動的に`development`を割り当て、他のすべてのコマンドには`production`を割り当てます。 ## バージョン履歴 {#version-history} diff --git a/docs/01-app/02-guides/index.mdx b/docs/01-app/02-guides/index.mdx index 96382bf9..d25748c6 100644 --- a/docs/01-app/02-guides/index.mdx +++ b/docs/01-app/02-guides/index.mdx @@ -6,7 +6,7 @@ description: 'Next.jsを使用して一般的なUIパターンやユースケー ### データフェッチング {#data-fetching} - [`fetch` APIを使用する](/docs/app/building-your-application/data-fetching/fetching#fetching-data-on-the-server-with-the-fetch-api) -- [ORMやデータベースクライアントを使用する](/docs/app/building-your-application/data-fetching/fetching#fetching-data-on-the-server-with-an-orm-or-database) +- [ORMまたはデータベースクライアントを使用する](/docs/app/building-your-application/data-fetching/fetching#fetching-data-on-the-server-with-an-orm-or-database) - [サーバーで検索パラメータを読み取る](/docs/app/api-reference/file-conventions/page) - [クライアントで検索パラメータを読み取る](/docs/app/api-reference/functions/use-search-params) @@ -27,10 +27,10 @@ description: 'Next.jsを使用して一般的なUIパターンやユースケー ### サーバーアクション {#server-actions} - [追加の値を渡す](/docs/app/building-your-application/data-fetching/server-actions-and-mutations#passing-additional-arguments) -- [データを再検証する](/docs/app/building-your-application/data-fetching/server-actions-and-mutations#revalidating-data) +- [データの再検証](/docs/app/building-your-application/data-fetching/server-actions-and-mutations#revalidating-data) - [リダイレクト](/docs/app/building-your-application/data-fetching/server-actions-and-mutations#redirecting) -- [cookieを設定する](/docs/app/api-reference/functions/cookies#setting-a-cookie) -- [cookieを削除する](/docs/app/api-reference/functions/cookies#deleting-cookies) +- [cookieの設定](/docs/app/api-reference/functions/cookies#setting-a-cookie) +- [cookieの削除](/docs/app/api-reference/functions/cookies#deleting-cookies) ### メタデータ {#metadata} @@ -43,21 +43,21 @@ description: 'Next.jsを使用して一般的なUIパターンやユースケー ### 認証 {#auth} -- [サインアップフォームを作成する](/docs/app/building-your-application/authentication#sign-up-and-login-functionality) -- [ステートレスでcookieベースのセッション管理](/docs/app/building-your-application/authentication#stateless-sessions) -- [ステートフルでデータベースをバックにしたセッション管理](/docs/app/building-your-application/authentication#database-sessions) -- [認可の管理](/docs/app/building-your-application/authentication#authorization) +- [サインアップフォームを作成する](/docs/app/guides/authentication#sign-up-and-login-functionality) +- [ステートレスなcookieベースのセッション管理](/docs/app/guides/authentication#stateless-sessions) +- [ステートフルなデータベースバックのセッション管理](/docs/app/guides/authentication#database-sessions) +- [認可の管理](/docs/app/guides/authentication#authorization) ### テスト {#testing} -- [Vitest](/docs/app/building-your-application/testing/vitest) -- [Jest](/docs/app/building-your-application/testing/jest) -- [Playwright](/docs/app/building-your-application/testing/playwright) -- [Cypress](/docs/app/building-your-application/testing/cypress) +- [Vitest](/docs/app/guides/testing/vitest) +- [Jest](/docs/app/guides/testing/jest) +- [Playwright](/docs/app/guides/testing/playwright) +- [Cypress](/docs/app/guides/testing/cypress) ### デプロイ {#deployment} -- [Dockerfileを作成する](/docs/app/building-your-application/deploying#docker-image) -- [静的エクスポート(SPA)を作成する](/docs/app/building-your-application/deploying/static-exports) -- [セルフホスティング時のキャッシュ設定](/docs/app/building-your-application/deploying#configuring-caching) -- [セルフホスティング時の画像最適化の設定](/docs/app/building-your-application/deploying#image-optimization) +- [Dockerfileを作成する](/docs/app/getting-started/deploying#docker) +- [静的エクスポート(SPA)を作成する](/docs/app/guides/static-exports) +- [セルフホスティング時のキャッシュ設定](/docs/app/guides/self-hosting#configuring-caching) +- [セルフホスティング時の画像最適化の設定](/docs/app/guides/self-hosting#image-optimization) diff --git a/docs/01-app/02-guides/instrumentation.mdx b/docs/01-app/02-guides/instrumentation.mdx new file mode 100644 index 00000000..aef353fe --- /dev/null +++ b/docs/01-app/02-guides/instrumentation.mdx @@ -0,0 +1,123 @@ +--- +title: 'インストゥルメンテーションの設定方法' +nav_title: 'Instrumentation' +description: 'Next.jsアプリでサーバー起動時にコードを実行するためのインストゥルメンテーションの使い方を学びましょう' +related: + title: 'インストゥルメンテーションについてもっと学ぶ' + links: + - app/api-reference/file-conventions/instrumentation +--- + +{/* このドキュメントの内容は、app routerとpages routerの両方で共有されています。Pages Routerに特有の内容を追加するには、`Content`コンポーネントを使用できます。共有される内容はコンポーネントでラップしないでください。 */} + +インストゥルメンテーションとは、アプリケーションにモニタリングやロギングツールを統合するためにコードを使用するプロセスです。これにより、アプリケーションのパフォーマンスや動作を追跡し、本番環境での問題をデバッグすることができます。 + +## 規約 {#convention} + +インストゥルメンテーションを設定するには、プロジェクトの**ルートディレクトリ**(または[`src`](/docs/app/api-reference/file-conventions/src-folder)フォルダを使用している場合はその中)に`instrumentation.ts|js`ファイルを作成します。 + +次に、そのファイルで`register`関数をエクスポートします。この関数は、新しいNext.jsサーバーインスタンスが開始されると**一度だけ**呼び出されます。 + +例えば、Next.jsを[OpenTelemetry](https://opentelemetry.io/)や[@vercel/otel](https://vercel.com/docs/observability/otel-overview)と一緒に使用するには、以下のようにします: + + + + +```ts title="instrumentation.ts" switcher +import { registerOTel } from '@vercel/otel' + +export function register() { + registerOTel('next-app') +} +``` + + + + +```js title="instrumentation.js" switcher +import { registerOTel } from '@vercel/otel' + +export function register() { + registerOTel('next-app') +} +``` + + + + +完全な実装については、[Next.js with OpenTelemetryの例](https://github.com/vercel/next.js/tree/canary/examples/with-opentelemetry)を参照してください。 + +> **Good to know**: +> +> - `instrumentation`ファイルはプロジェクトのルートに置くべきで、`app`や`pages`ディレクトリの中に置いてはいけません。`src`フォルダを使用している場合は、`pages`や`app`と並んで`src`の中にファイルを置いてください。 +> - [`pageExtensions`設定オプション](/docs/app/api-reference/config/next-config-js/pageExtensions)を使用してサフィックスを追加する場合、`instrumentation`ファイル名もそれに合わせて更新する必要があります。 + +## 例 {#examples} + +### 副作用のあるファイルのインポート {#importing-files-with-side-effects} + +時には、コード内で副作用を引き起こすためにファイルをインポートすることが有用です。例えば、一連のグローバル変数を定義するファイルをインポートするが、コード内でそのインポートされたファイルを明示的に使用しない場合があります。それでも、パッケージが宣言したグローバル変数にアクセスできます。 + +`register`関数内でJavaScriptの`import`構文を使用してファイルをインポートすることをお勧めします。以下の例は、`register`関数内での`import`の基本的な使用法を示しています: + + + + +```ts title="instrumentation.ts" switcher +export async function register() { + await import('package-with-side-effect') +} +``` + + + + +```js title="instrumentation.js" switcher +export async function register() { + await import('package-with-side-effect') +} +``` + + + + +> **Good to know:** +> +> ファイルの先頭ではなく、`register`関数内からファイルをインポートすることをお勧めします。これにより、すべての副作用をコード内の一箇所にまとめ、ファイルの先頭でグローバルにインポートすることによる意図しない結果を避けることができます。 + +### ランタイム固有のコードのインポート {#importing-runtime-specific-code} + +Next.jsはすべての環境で`register`を呼び出すため、特定のランタイム(例:[EdgeやNode.js](/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes))をサポートしないコードを条件付きでインポートすることが重要です。現在の環境を取得するには、`NEXT_RUNTIME`環境変数を使用できます: + + + + +```ts title="instrumentation.ts" switcher +export async function register() { + if (process.env.NEXT_RUNTIME === 'nodejs') { + await import('./instrumentation-node') + } + + if (process.env.NEXT_RUNTIME === 'edge') { + await import('./instrumentation-edge') + } +} +``` + + + + +```js title="instrumentation.js" switcher +export async function register() { + if (process.env.NEXT_RUNTIME === 'nodejs') { + await import('./instrumentation-node') + } + + if (process.env.NEXT_RUNTIME === 'edge') { + await import('./instrumentation-edge') + } +} +``` + + + diff --git a/docs/01-app/03-building-your-application/06-optimizing/07-lazy-loading.mdx b/docs/01-app/02-guides/lazy-loading.mdx similarity index 62% rename from docs/01-app/03-building-your-application/06-optimizing/07-lazy-loading.mdx rename to docs/01-app/02-guides/lazy-loading.mdx index ffd04c1c..e432a7e6 100644 --- a/docs/01-app/03-building-your-application/06-optimizing/07-lazy-loading.mdx +++ b/docs/01-app/02-guides/lazy-loading.mdx @@ -1,20 +1,21 @@ --- -title: 'Lazy Loading' -description: 'インポートされたライブラリやReactコンポーネントを遅延ロードして、アプリケーションの読み込みパフォーマンスを向上させます。' +title: 'Client Componentsとライブラリを遅延読み込みする方法' +nav_title: '遅延読み込み' +description: 'インポートされたライブラリやReactコンポーネントを遅延読み込みして、アプリケーションの読み込みパフォーマンスを向上させます。' --- -{/* このドキュメントの内容はapp routerとpages routerの間で共有されています。Pages Routerに特有のコンテンツを追加するには、`Content`コンポーネントを使用できます。共有コンテンツはコンポーネントでラップしないでください。 */} +{/* このドキュメントの内容はapp routerとpages routerの間で共有されています。Pages Routerに特化した内容を追加するには、`Content`コンポーネントを使用できます。共有される内容はコンポーネントでラップしないでください。 */} -[Lazy loading](https://developer.mozilla.org/docs/Web/Performance/Lazy_loading)は、Next.jsにおいて、ルートをレンダリングするために必要なJavaScriptの量を減らすことで、アプリケーションの初期読み込みパフォーマンスを向上させます。 +[遅延読み込み](https://developer.mozilla.org/docs/Web/Performance/Lazy_loading)は、Next.jsにおいて、ルートをレンダリングするために必要なJavaScriptの量を減らすことで、アプリケーションの初期読み込みパフォーマンスを向上させます。 -これにより、**client component**やインポートされたライブラリの読み込みを遅らせ、必要なときにのみクライアントバンドルに含めることができます。たとえば、ユーザーがモーダルを開くためにクリックするまで、その読み込みを遅らせることができます。 +これにより、**Client Components**やインポートされたライブラリの読み込みを遅らせ、必要なときにのみクライアントバンドルに含めることができます。たとえば、ユーザーがクリックしてモーダルを開くまで、その読み込みを遅らせることができます。 -Next.jsで遅延ロードを実装する方法は2つあります: +Next.jsで遅延読み込みを実装する方法は2つあります: -1. `next/dynamic`を使用した[Dynamic Imports](#nextdynamic) +1. `next/dynamic`を使用した[動的インポート](#nextdynamic) 2. [Suspense](https://react.dev/reference/react/Suspense)と共に[`React.lazy()`](https://react.dev/reference/react/lazy)を使用 -デフォルトでは、server componentは自動的に[コード分割](https://developer.mozilla.org/docs/Glossary/Code_splitting)され、[ストリーミング](/docs/app/building-your-application/routing/loading-ui-and-streaming)を使用して、UIの部分をサーバーからクライアントに段階的に送信できます。遅延ロードはclient componentに適用されます。 +デフォルトでは、Server Componentsは自動的に[コード分割](https://developer.mozilla.org/docs/Glossary/Code_splitting)され、[ストリーミング](/docs/app/building-your-application/routing/loading-ui-and-streaming)を使用して、UIの部分をサーバーからクライアントに段階的に送信できます。遅延読み込みはClient Componentsに適用されます。 ## `next/dynamic` {#next-dynamic} @@ -41,29 +42,29 @@ export default function ClientComponentExample() { return (
- {/* 即座に読み込まれますが、別のクライアントバンドルで */} + {/* 即座に読み込むが、別のクライアントバンドルで */} - {/* 条件が満たされた場合にのみオンデマンドで読み込まれます */} + {/* 条件が満たされた場合にのみオンデマンドで読み込む */} {showMore && } - {/* クライアントサイドでのみ読み込まれます */} + {/* クライアントサイドでのみ読み込む */}
) } ``` -> **Note:** server componentがclient componentを動的にインポートする場合、自動的な[コード分割](https://developer.mozilla.org/docs/Glossary/Code_splitting)は現在サポートされていません。 +> **注意:** Server ComponentがClient Componentを動的にインポートする場合、自動的な[コード分割](https://developer.mozilla.org/docs/Glossary/Code_splitting)は現在サポートされていません。 -### SSRのスキップ {#skipping-ssr} +### SSRをスキップする {#skipping-ssr} -`React.lazy()`とSuspenseを使用する場合、client componentはデフォルトで[プリレンダリング](https://github.com/reactwg/server-components/discussions/4)(SSR)されます。 +`React.lazy()`とSuspenseを使用する場合、Client Componentsはデフォルトで[プリレンダリング](https://github.com/reactwg/server-components/discussions/4)(SSR)されます。 -> **Note:** `ssr: false`オプションはclient componentでのみ機能し、クライアントのコード分割が適切に動作するようにclient componentに移動してください。 +> **注意:** `ssr: false`オプションはClient Componentsでのみ機能し、クライアントのコード分割が適切に動作するようにClient Componentsに移動してください。 -client componentのプリレンダリングを無効にしたい場合は、`ssr`オプションを`false`に設定できます: +Client Componentのプリレンダリングを無効にしたい場合は、`ssr`オプションを`false`に設定できます: ```jsx const ComponentC = dynamic(() => import('../components/C'), { ssr: false }) @@ -71,8 +72,7 @@ const ComponentC = dynamic(() => import('../components/C'), { ssr: false }) ### Server Componentsのインポート {#importing-server-components} -server componentを動的にインポートする場合、そのserver componentの子であるclient componentのみが遅延ロードされます。server component自体は遅延ロードされません。 -また、server componentで使用する場合、CSSなどの静的アセットのプリロードにも役立ちます。 +Server Componentを動的にインポートする場合、Server Component自体ではなく、その子であるClient Componentsのみが遅延読み込みされます。また、Server Componentsで使用する際にCSSなどの静的アセットをプリロードするのにも役立ちます。 ```jsx title="app/page.js" import dynamic from 'next/dynamic' @@ -89,8 +89,8 @@ export default function ServerComponentExample() { } ``` -> **Note:** server componentでは`ssr: false`オプションはサポートされていません。server componentで使用しようとするとエラーが表示されます。 -> `ssr: false`はserver componentで`next/dynamic`と共に使用することはできません。client componentに移動してください。 +> **注意:** Server Componentsでは`ssr: false`オプションはサポートされていません。Server Componentsで使用しようとするとエラーが発生します。 +> `ssr: false`はServer Componentsで`next/dynamic`と共に使用することはできません。Client Componentに移動してください。 ### 外部ライブラリの読み込み {#loading-external-libraries} @@ -126,7 +126,7 @@ export default function Page() { } ``` -### カスタムローディングコンポーネントの追加 {#adding-a-custom-loading-component} +### カスタムローディングコンポーネントを追加する {#adding-a-custom-loading-component} ```jsx title="app/page.js" 'use client' @@ -188,7 +188,7 @@ export default function Home() { } ``` -> **Good to know**: `import('path/to/component')`では、パスは明示的に記述する必要があります。テンプレート文字列や変数を使用することはできません。さらに、`import()`は`dynamic()`呼び出しの中にある必要があります。これは、Next.jsがwebpackバンドル/モジュールIDを特定の`dynamic()`呼び出しに一致させ、レンダリング前にプリロードできるようにするためです。`dynamic()`はReactレンダリング内で使用することはできません。プリロードが機能するためには、モジュールのトップレベルでマークされている必要があります。これは`React.lazy`と同様です。 +> **Good to know**: `import('path/to/component')`では、パスは明示的に記述する必要があります。テンプレート文字列や変数を使用することはできません。また、`import()`は`dynamic()`呼び出しの中にある必要があります。これにより、Next.jsはwebpackバンドル/モジュールIDを特定の`dynamic()`呼び出しにマッチさせ、レンダリング前にプリロードすることができます。`dynamic()`はReactレンダリング内で使用することはできません。プリロードが機能するためには、モジュールのトップレベルでマークされている必要があります。これは`React.lazy`と同様です。 ## 名前付きエクスポートの場合 {#with-named-exports} @@ -209,7 +209,7 @@ const DynamicComponent = dynamic(() => ## SSRなしの場合 {#with-no-ssr} -クライアントサイドでコンポーネントを動的に読み込むには、`ssr`オプションを使用してサーバーレンダリングを無効にできます。これは、外部依存関係やコンポーネントが`window`のようなブラウザAPIに依存している場合に便利です。 +クライアントサイドでコンポーネントを動的に読み込むには、`ssr`オプションを使用してサーバーレンダリングを無効にできます。これは、`window`のようなブラウザAPIに依存する外部依存関係やコンポーネントに役立ちます。 ```jsx 'use client' diff --git a/docs/01-app/03-building-your-application/06-optimizing/14-local-development.mdx b/docs/01-app/02-guides/local-development.mdx similarity index 79% rename from docs/01-app/03-building-your-application/06-optimizing/14-local-development.mdx rename to docs/01-app/02-guides/local-development.mdx index 54a203c5..5b8719ae 100644 --- a/docs/01-app/03-building-your-application/06-optimizing/14-local-development.mdx +++ b/docs/01-app/02-guides/local-development.mdx @@ -1,9 +1,10 @@ --- -title: 'ローカル開発' +title: 'ローカル開発環境を最適化する方法' +nav_title: '開発環境' description: 'Next.jsでローカル開発環境を最適化する方法を学びましょう。' --- -Next.jsは、優れた開発者体験を提供するように設計されています。アプリケーションが成長するにつれて、ローカル開発中のコンパイル時間が遅くなることに気付くかもしれません。このガイドでは、一般的なコンパイル時のパフォーマンス問題を特定し、修正する方法を説明します。 +Next.jsは、優れた開発者体験を提供するように設計されています。アプリケーションが成長するにつれて、ローカル開発中のコンパイル時間が遅くなることがあります。このガイドでは、一般的なコンパイル時のパフォーマンス問題を特定し、修正する方法を説明します。 ## ローカル開発と本番環境の違い {#local-dev-vs-production} @@ -15,13 +16,13 @@ Next.jsは、優れた開発者体験を提供するように設計されてい ### 1. コンピュータのウイルス対策ソフトを確認する {#1-check-your-computer-s-antivirus} -ウイルス対策ソフトウェアはファイルアクセスを遅くする可能性があります。 +ウイルス対策ソフトウェアはファイルアクセスを遅くすることがあります。 -プロジェクトフォルダをウイルス対策の除外リストに追加してみてください。これはWindowsマシンで一般的ですが、ウイルス対策ツールがインストールされているシステムには推奨されます。 +プロジェクトフォルダをウイルス対策の除外リストに追加してみてください。これはWindowsマシンでよく見られますが、ウイルス対策ツールがインストールされているシステムには推奨されます。 ### 2. Next.jsを更新し、Turbopackを有効にする {#2-update-next-js-and-enable-turbopack} -Next.jsの最新バージョンを使用していることを確認してください。新しいバージョンには、パフォーマンスの向上が含まれていることがよくあります。 +Next.jsの最新バージョンを使用していることを確認してください。新しいバージョンには、しばしばパフォーマンスの改善が含まれています。 Turbopackは、Next.jsに統合された新しいバンドラーで、ローカルパフォーマンスを向上させることができます。 @@ -34,7 +35,7 @@ npm run dev --turbopack ### 3. インポートを確認する {#3-check-your-imports} -コードのインポート方法は、コンパイルとバンドルの時間に大きく影響します。[パッケージバンドルの最適化](/docs/app/building-your-application/optimizing/package-bundling)について詳しく学び、[Dependency Cruiser](https://github.com/sverweij/dependency-cruiser)や[Madge](https://github.com/pahen/madge)などのツールを探索してください。 +コードのインポート方法は、コンパイルとバンドルの時間に大きく影響します。[パッケージバンドルの最適化](/docs/app/guides/package-bundling)について詳しく学び、[Dependency Cruiser](https://github.com/sverweij/dependency-cruiser)や[Madge](https://github.com/pahen/madge)などのツールを探索してください。 ### アイコンライブラリ {#icon-libraries} @@ -51,7 +52,7 @@ import Icon2 from 'react-icons/md/Icon2' `react-icons`のようなライブラリには、多くの異なるアイコンセットが含まれています。1つのセットを選び、そのセットを使用し続けてください。 -例えば、アプリケーションが`react-icons`を使用し、以下のすべてをインポートしている場合: +たとえば、アプリケーションが`react-icons`を使用し、以下のすべてをインポートしている場合: - `pi` (Phosphor Icons) - `md` (Material Design Icons) @@ -62,13 +63,13 @@ import Icon2 from 'react-icons/md/Icon2' ### バレルファイル {#barrel-files} -"バレルファイル"は、他のファイルから多くのアイテムをエクスポートするファイルです。これらは、モジュールスコープで副作用があるかどうかをインポートを使用してコンパイラが解析する必要があるため、ビルドを遅くする可能性があります。 +"バレルファイル"は、他のファイルから多くのアイテムをエクスポートするファイルです。これらは、モジュールスコープ内で副作用があるかどうかをインポートを使用して見つけるためにコンパイラが解析する必要があるため、ビルドを遅くすることがあります。 可能であれば、特定のファイルから直接インポートするようにしてください。[バレルファイルについて詳しくはこちら](https://vercel.com/blog/how-we-optimized-package-imports-in-next-js)とNext.jsの組み込み最適化について学びましょう。 ### パッケージインポートの最適化 {#optimize-package-imports} -Next.jsは特定のパッケージのインポートを自動的に最適化できます。バレルファイルを利用するパッケージを使用している場合は、`next.config.js`に追加してください: +Next.jsは特定のパッケージのインポートを自動的に最適化できます。バレルファイルを利用するパッケージを使用している場合は、それらを`next.config.js`に追加してください: ```jsx module.exports = { @@ -84,7 +85,7 @@ Turbopackはインポートを自動的に解析し、最適化します。こ Tailwind CSSを使用している場合は、正しく設定されていることを確認してください。 -一般的な間違いは、`content`配列を`node_modules`やスキャンすべきでない大きなディレクトリを含むように設定することです。 +一般的な間違いは、`content`配列を`node_modules`やスキャンすべきでない他の大きなディレクトリを含むように設定することです。 Tailwind CSSバージョン3.4.8以降では、ビルドを遅くする可能性のある設定について警告します。 @@ -106,7 +107,7 @@ Tailwind CSSバージョン3.4.8以降では、ビルドを遅くする可能性 ```jsx module.exports = { content: [ - // より良い - 'src'フォルダのみをスキャン + // より良い例 - 'src'フォルダのみをスキャン '../../packages/ui/src/**/*.{js,ts,jsx,tsx}', ], } @@ -116,25 +117,25 @@ Tailwind CSSバージョン3.4.8以降では、ビルドを遅くする可能性 カスタムwebpack設定を追加した場合、それがコンパイルを遅くしている可能性があります。 -ローカル開発に本当に必要かどうかを検討してください。特定のツールを本番ビルドのみに含めるか、Turbopackに移行して[loaders](/docs/app/api-reference/config/next-config-js/turbopack#supported-loaders)を使用することを検討してください。 +ローカル開発に本当に必要かどうかを考慮してください。特定のツールを本番ビルドのみに含めるか、Turbopackに移行して[loaders](/docs/app/api-reference/config/next-config-js/turbopack#supported-loaders)を使用することを検討してください。 -### 6. メモリ使用量を最適化する {#6-optimize-memory-usage} +### 6. メモリ使用量の最適化 {#6-optimize-memory-usage} -アプリが非常に大きい場合、より多くのメモリが必要になるかもしれません。 +アプリが非常に大きい場合、より多くのメモリが必要になることがあります。 -[メモリ使用量の最適化について詳しくはこちら](/docs/app/building-your-application/optimizing/memory-usage)。 +[メモリ使用量の最適化について詳しくはこちら](/docs/app/guides/memory-usage)。 ### 7. Server Componentsとデータフェッチ {#7-server-components-and-data-fetching} -Server Componentsへの変更は、ローカルでページ全体を再レンダリングし、新しい変更を表示するためにコンポーネントの新しいデータをフェッチすることを含みます。 +Server Componentsへの変更は、ページ全体を再レンダリングし、新しいデータをコンポーネントに表示するためにローカルで再レンダリングを引き起こします。 -実験的な`serverComponentsHmrCache`オプションを使用すると、ローカル開発でのホットモジュールリプレースメント(HMR)リフレッシュ中にServer Components内の`fetch`レスポンスをキャッシュできます。これにより、応答が高速化され、課金されるAPIコールのコストが削減されます。 +実験的な`serverComponentsHmrCache`オプションを使用すると、ローカル開発でのホットモジュールリプレースメント(HMR)リフレッシュ間でServer Components内の`fetch`レスポンスをキャッシュできます。これにより、レスポンスが高速化され、APIコールのコストが削減されます。 [実験的オプションについて詳しくはこちら](/docs/app/api-reference/config/next-config-js/serverComponentsHmrCache)。 ## 問題を見つけるためのツール {#tools-for-finding-problems} -### 詳細なフェッチログ {#detailed-fetch-logging} +### 詳細なfetchログ {#detailed-fetch-logging} 開発中に何が起こっているのかをより詳細に知るために、このコマンドを使用してください: diff --git a/docs/01-app/03-building-your-application/07-configuring/05-mdx.mdx b/docs/01-app/02-guides/mdx.mdx similarity index 81% rename from docs/01-app/03-building-your-application/07-configuring/05-mdx.mdx rename to docs/01-app/02-guides/mdx.mdx index 3f1669fe..2c0a156d 100644 --- a/docs/01-app/03-building-your-application/07-configuring/05-mdx.mdx +++ b/docs/01-app/02-guides/mdx.mdx @@ -1,12 +1,12 @@ --- -title: 'MarkdownとMDX' +title: 'Next.jsでのMarkdownとMDXの使用方法' nav_title: 'MDX' 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に変換することができます。ウェブサイトやブログのコンテンツを書く際によく使用されます。 +[Markdown](https://daringfireball.net/projects/markdown/syntax)は、テキストをフォーマットするために使用される軽量のマークアップ言語です。プレーンテキストの構文を使用して書き、それを構造的に有効なHTMLに変換することができます。ウェブサイトやブログのコンテンツを書く際によく使用されます。 次のように書くと... @@ -22,15 +22,15 @@ 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)テンプレートを参照してください。 ## 依存関係のインストール {#install-dependencies} -`@next/mdx`パッケージと関連パッケージは、Next.jsを設定してMarkdownとMDXを処理できるようにするために使用されます。**ローカルファイルからデータを取得**し、`/pages`または`/app`ディレクトリ内に直接`.md`または`.mdx`拡張子のページを作成できます。 +`@next/mdx`パッケージと関連パッケージは、Next.jsを設定してMarkdownとMDXを処理できるようにするために使用されます。**これはローカルファイルからデータを取得し**、`/pages`または`/app`ディレクトリ内に直接`.md`または`.mdx`拡張子のページを作成できるようにします。 -Next.jsでMDXをレンダリングするために、これらのパッケージをインストールします: +Next.jsでMDXをレンダリングするためにこれらのパッケージをインストールします: ```bash title="Terminal" npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx @@ -45,7 +45,7 @@ import createMDX from '@next/mdx' /** @type {import('next').NextConfig} */ const nextConfig = { - // `pageExtensions`を設定して、MarkdownとMDXファイルを含める + // `pageExtensions`を設定してMarkdownとMDXファイルを含める pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'], // 必要に応じて、他のNext.jsの設定を以下に追加 } @@ -58,7 +58,19 @@ const withMDX = createMDX({ export default withMDX(nextConfig) ``` -これにより、`.md`および`.mdx`ファイルがアプリケーション内でページ、ルート、またはインポートとして機能するようになります。 +これにより、`.mdx`ファイルをアプリケーション内のページ、ルート、またはインポートとして機能させることができます。 + +### `.md`ファイルの処理 {#handling-md-files} + +デフォルトでは、`next/mdx`は`.mdx`拡張子のファイルのみをコンパイルします。webpackで`.md`ファイルを処理するには、`extension`オプションを更新します: + +```js title="next.config.mjs" +const withMDX = createMDX({ + extension: /\.(md|mdx)$/, +}) +``` + +> **Good to know**: [Turbopack](/docs/app/api-reference/turbopack)は現在、`extension`オプションをサポートしていないため、`.md`ファイルをサポートしていません。 ## `mdx-components.tsx`ファイルの追加 {#add-an-mdx-components-tsx-file} @@ -95,7 +107,7 @@ export function useMDXComponents(components) { > > - `mdx-components.tsx`は、App Routerで`@next/mdx`を使用するために**必須**であり、これがないと動作しません。 > - [`mdx-components.tsx`ファイルの規約](/docs/app/api-reference/file-conventions/mdx-components)について詳しく学びましょう。 -> - [カスタムスタイルとコンポーネントの使用](#using-custom-styles-and-components)について学びましょう。 +> - [カスタムスタイルとコンポーネントの使用方法](#using-custom-styles-and-components)を学びましょう。 ## MDXのレンダリング {#rendering-mdx} @@ -136,7 +148,7 @@ App Routerアプリでは、[メタデータ](/docs/app/building-your-applicatio
-これらのファイル内でMDXを使用し、MDXページ内で直接Reactコンポーネントをインポートすることもできます: +これらのファイル内でMDXを使用し、MDXページ内でReactコンポーネントを直接インポートすることもできます: ```mdx import { MyComponent } from 'my-component' @@ -193,7 +205,7 @@ Checkout my React component: -これらのファイル内でMDXを使用し、MDXページ内で直接Reactコンポーネントをインポートすることもできます: +これらのファイル内でMDXを使用し、MDXページ内でReactコンポーネントを直接インポートすることもできます: @@ -297,7 +309,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 +386,7 @@ This is a list in markdown: ``` -Markdownをスタイルするために、生成されたHTML要素にマッピングされるカスタムコンポーネントを提供できます。スタイルとコンポーネントは、グローバル、ローカル、および共有レイアウトで実装できます。 +Markdownをスタイルするには、生成されたHTML要素にマッピングされるカスタムコンポーネントを提供できます。スタイルとコンポーネントは、グローバル、ローカル、および共有レイアウトで実装できます。 ### グローバルスタイルとコンポーネント {#global-styles-and-components} @@ -543,7 +555,7 @@ MDXページ間でレイアウトを共有するには、App Routerで[組み込 ```tsx title="app/mdx-page/layout.tsx" switcher export default function MdxLayout({ children }: { children: React.ReactNode }) { - // ここで共有レイアウトやスタイルを作成 + // ここで共有レイアウトやスタイルを作成します return
{children}
} ``` @@ -553,7 +565,7 @@ export default function MdxLayout({ children }: { children: React.ReactNode }) { ```jsx title="app/mdx-page/layout.js" switcher export default function MdxLayout({ children }) { - // ここで共有レイアウトやスタイルを作成 + // ここで共有レイアウトやスタイルを作成します return
{children}
} ``` @@ -572,7 +584,7 @@ MDXページ周りでレイアウトを共有するには、レイアウトコ ```tsx title="components/mdx-layout.tsx" switcher export default function MdxLayout({ children }: { children: React.ReactNode }) { - // ここで共有レイアウトやスタイルを作成 + // ここで共有レイアウトやスタイルを作成します return
{children}
} ``` @@ -582,7 +594,7 @@ export default function MdxLayout({ children }: { children: React.ReactNode }) { ```jsx title="components/mdx-layout.js" switcher export default function MdxLayout({ children }) { - // ここで共有レイアウトやスタイルを作成 + // ここで共有レイアウトやスタイルを作成します return
{children}
} ``` @@ -590,7 +602,7 @@ export default function MdxLayout({ children }) {
-次に、MDXページにレイアウトコンポーネントをインポートし、MDXコンテンツをレイアウトでラップしてエクスポートします: +次に、レイアウトコンポーネントをMDXページにインポートし、MDXコンテンツをレイアウトでラップしてエクスポートします: ```mdx import MdxLayout from '../components/mdx-layout' @@ -611,7 +623,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`を追加します。 @@ -620,7 +632,7 @@ export default function MDXPage({ children }) { ```tsx title="app/mdx-page/layout.tsx" switcher export default function MdxLayout({ children }: { children: React.ReactNode }) { - // ここで共有レイアウトやスタイルを作成 + // ここで共有レイアウトやスタイルを作成します return (
{children} @@ -634,7 +646,7 @@ export default function MdxLayout({ children }: { children: React.ReactNode }) { ```jsx title="app/mdx-page/layout.js" switcher export default function MdxLayout({ children }) { - // ここで共有レイアウトやスタイルを作成 + // ここで共有レイアウトやスタイルを作成します return (
{children} @@ -657,7 +669,7 @@ MDXページ周りでレイアウトを共有するには、レイアウトコ ```tsx title="components/mdx-layout.tsx" switcher export default function MdxLayout({ children }: { children: React.ReactNode }) { - // ここで共有レイアウトやスタイルを作成 + // ここで共有レイアウトやスタイルを作成します return (
{children} @@ -671,7 +683,7 @@ export default function MdxLayout({ children }: { children: React.ReactNode }) { ```jsx title="components/mdx-layout.js" switcher export default function MdxLayout({ children }) { - // ここで共有レイアウトやスタイルを作成 + // ここで共有レイアウトやスタイルを作成します return (
{children} @@ -683,7 +695,7 @@ export default function MdxLayout({ children }) { -次に、MDXページにレイアウトコンポーネントをインポートし、MDXコンテンツをレイアウトでラップしてエクスポートします: +次に、レイアウトコンポーネントをMDXページにインポートし、MDXコンテンツをレイアウトでラップしてエクスポートします: ```mdx import MdxLayout from '../components/mdx-layout' @@ -700,13 +712,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 +802,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,7 +823,7 @@ import createMDX from '@next/mdx' /** @type {import('next').NextConfig} */ const nextConfig = { - // ファイルの.mdおよび.mdx拡張子を許可 + // ファイルの.md拡張子を許可 pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'], // 必要に応じて、他のNext.jsの設定を以下に追加 } @@ -828,7 +840,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,11 +868,11 @@ 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-client`](https://github.com/ipikuka/next-mdx-remote-client?tab=readme-ov-file#the-part-associated-with-nextjs-app-router)です。 -> **Good to know**: 注意して進めてください。MDXはJavaScriptにコンパイルされ、サーバー上で実行されます。信頼できるソースからのみMDXコンテンツを取得する必要があります。そうしないと、リモートコード実行(RCE)につながる可能性があります。 +> **Good to know**: 注意して進めてください。MDXはJavaScriptにコンパイルされ、サーバー上で実行されます。信頼できるソースからのみMDXコンテンツをフェッチする必要があります。そうでない場合、リモートコード実行(RCE)につながる可能性があります。 -次の例では`next-mdx-remote`を使用しています: +次の例では、`next-mdx-remote-client`を使用しています: @@ -868,7 +880,7 @@ MDXファイルやコンテンツが*他の場所*にある場合、サーバー ```tsx title="app/mdx-page-remote/page.tsx" switcher -import { MDXRemote } from 'next-mdx-remote/rsc' +import { MDXRemote } from 'next-mdx-remote-client/rsc' export default async function RemoteMdxPage() { // MDXテキスト - データベース、CMS、フェッチ、どこからでも... @@ -882,7 +894,7 @@ export default async function RemoteMdxPage() { ```jsx title="app/mdx-page-remote/page.js" switcher -import { MDXRemote } from 'next-mdx-remote/rsc' +import { MDXRemote } from 'next-mdx-remote-client/rsc' export default async function RemoteMdxPage() { // MDXテキスト - データベース、CMS、フェッチ、どこからでも... @@ -903,22 +915,28 @@ export default async function RemoteMdxPage() { ```tsx title="pages/mdx-page-remote.tsx" switcher -import { serialize } from 'next-mdx-remote/serialize' -import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote' - -interface Props { - mdxSource: MDXRemoteSerializeResult +import { + serialize, + type SerializeResult, +} from 'next-mdx-remote-client/serialize' +import { MDXClient } from 'next-mdx-remote-client' + +type Props = { + mdxSource: SerializeResult } export default function RemoteMdxPage({ mdxSource }: Props) { - return + if ('error' in mdxSource) { + // エラーUIをレンダリングするか、`mdxSource.error`をスローします + } + return } export async function getStaticProps() { // MDXテキスト - データベース、CMS、フェッチ、どこからでも... const res = await fetch('https:...') const mdxText = await res.text() - const mdxSource = await serialize(mdxText) + const mdxSource = await serialize({ source: mdxText }) return { props: { mdxSource } } } ``` @@ -927,18 +945,21 @@ export async function getStaticProps() { ```jsx title="pages/mdx-page-remote.js" switcher -import { serialize } from 'next-mdx-remote/serialize' -import { MDXRemote } from 'next-mdx-remote' +import { serialize } from 'next-mdx-remote-client/serialize' +import { MDXClient } from 'next-mdx-remote-client' export default function RemoteMdxPage({ mdxSource }) { - return + if ('error' in mdxSource) { + // エラーUIをレンダリングするか、`mdxSource.error`をスローします + } + return } export async function getStaticProps() { // MDXテキスト - データベース、CMS、フェッチ、どこからでも... const res = await fetch('https:...') const mdxText = await res.text() - const mdxSource = await serialize(mdxText) + const mdxSource = await serialize({ source: mdxText }) return { props: { mdxSource } } } ``` @@ -952,9 +973,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,7 +1000,7 @@ 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} diff --git a/docs/01-app/02-guides/memory-usage.mdx b/docs/01-app/02-guides/memory-usage.mdx new file mode 100644 index 00000000..b4841ed7 --- /dev/null +++ b/docs/01-app/02-guides/memory-usage.mdx @@ -0,0 +1,137 @@ +--- +title: 'メモリ使用量を最適化する方法' +nav_title: 'メモリ使用量' +description: '開発および本番環境でアプリケーションのメモリ使用量を最適化します。' +--- + +アプリケーションが成長し、機能が豊富になるにつれて、ローカルでの開発や本番ビルドの作成時により多くのリソースを要求することがあります。 + +Next.jsでのメモリ最適化のための戦略と技術を探ってみましょう。 + +## 依存関係の数を減らす {#reduce-number-of-dependencies} + +大量の依存関係を持つアプリケーションは、より多くのメモリを使用します。 + +[Bundle Analyzer](/docs/app/guides/package-bundling)を使用すると、アプリケーション内の大きな依存関係を調査し、パフォーマンスとメモリ使用量を改善するために削除できる可能性のあるものを見つけることができます。 + +## `experimental.webpackMemoryOptimizations`を試す {#try-experimental-webpackmemoryoptimizations} + +`v15.0.0`から、`next.config.js`ファイルに`experimental.webpackMemoryOptimizations: true`を追加することで、Webpackの動作を変更し、最大メモリ使用量を削減することができますが、コンパイル時間がわずかに増加する可能性があります。 + +> **Good to know**: この機能は現在実験的であり、より多くのプロジェクトでテストするために提供されていますが、リスクは低いと考えられています。 + +## `next build`を`--experimental-debug-memory-usage`で実行する {#run-next-build-with-experimental-debug-memory-usage} + +`14.2.0`から、`next build --experimental-debug-memory-usage`を実行することで、ビルド中にNext.jsがメモリ使用量に関する情報を継続的に出力するモードでビルドを実行できます。ヒープ使用量やガベージコレクションの統計情報などが表示されます。メモリ使用量が設定された制限に近づくと、自動的にヒープスナップショットが取得されます。 + +> **Good to know**: この機能は、カスタムwebpack設定がない限り自動的に有効になるWebpackビルドワーカーオプションとは互換性がありません。 + +## ヒーププロファイルを記録する {#record-a-heap-profile} + +メモリの問題を探すために、Node.jsからヒーププロファイルを記録し、Chrome DevToolsで読み込んでメモリリークの潜在的な原因を特定できます。 + +ターミナルで、Next.jsビルドを開始する際にNode.jsに`--heap-prof`フラグを渡します: + +```sh +node --heap-prof node_modules/next/dist/bin/next build +``` + +ビルドの終了時に、Node.jsによって`.heapprofile`ファイルが作成されます。 + +Chrome DevToolsで、メモリタブを開き、「Load Profile」ボタンをクリックしてファイルを視覚化できます。 + +## ヒープのスナップショットを分析する {#analyze-a-snapshot-of-the-heap} + +インスペクターツールを使用して、アプリケーションのメモリ使用量を分析できます。 + +`next build`または`next dev`コマンドを実行する際に、コマンドの先頭に`NODE_OPTIONS=--inspect`を追加します。これにより、デフォルトポートでインスペクターエージェントが公開されます。 +ユーザーコードが開始する前にブレークしたい場合は、代わりに`--inspect-brk`を渡すことができます。プロセスが実行中の間、Chrome DevToolsなどのツールを使用してデバッグポートに接続し、ヒープのスナップショットを記録して分析し、どのメモリが保持されているかを確認できます。 + +`14.2.0`から、`--experimental-debug-memory-usage`フラグを使用して`next build`を実行することもでき、ヒープスナップショットを簡単に取得できます。 + +このモードで実行中に、任意の時点でプロセスに`SIGUSR2`シグナルを送信すると、プロセスはヒープスナップショットを取得します。 + +ヒープスナップショットはNext.jsアプリケーションのプロジェクトrootに保存され、Chrome DevToolsなどのヒープアナライザーで読み込んで、どのメモリが保持されているかを確認できます。このモードはまだWebpackビルドワーカーとは互換性がありません。 + +詳細については、[ヒープスナップショットの記録と分析方法](https://developer.chrome.com/docs/devtools/memory-problems/heap-snapshots)を参照してください。 + +## Webpackビルドワーカー {#webpack-build-worker} + +Webpackビルドワーカーを使用すると、別のNode.jsワーカー内でWebpackコンパイルを実行でき、ビルド中のアプリケーションのメモリ使用量を削減できます。 + +このオプションは、`v14.1.0`以降、カスタムWebpack設定がない場合にデフォルトで有効になります。 + +古いバージョンのNext.jsを使用している場合やカスタムWebpack設定がある場合は、`next.config.js`内に`experimental.webpackBuildWorker: true`を設定してこのオプションを有効にできます。 + +> **Good to know**: この機能はすべてのカスタムWebpackプラグインと互換性がない場合があります。 + +## Webpackキャッシュを無効にする {#disable-webpack-cache} + +[Webpackキャッシュ](https://webpack.js.org/configuration/cache/)は、ビルドの速度を向上させるために生成されたWebpackモジュールをメモリおよび/またはディスクに保存します。これによりパフォーマンスが向上しますが、キャッシュされたデータを保存するためにアプリケーションのメモリ使用量も増加します。 + +アプリケーションに[カスタムWebpack設定](/docs/app/api-reference/config/next-config-js/webpack)を追加することで、この動作を無効にできます: + +```js title="next.config.mjs" +/** @type {import('next').NextConfig} */ +const nextConfig = { + webpack: ( + config, + { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack } + ) => { + if (config.cache && !dev) { + config.cache = Object.freeze({ + type: 'memory', + }) + } + // 重要: 修正された設定を返す + return config + }, +} + +export default nextConfig +``` + +## 静的解析を無効にする {#disable-static-analysis} + +型チェックやリンティングは、特に大規模なプロジェクトでは多くのメモリを必要とする場合があります。 +ただし、ほとんどのプロジェクトにはこれらのタスクをすでに処理する専用のCIランナーがあります。 +ビルド中に「型の有効性のリンティングとチェック」ステップでメモリ不足の問題が発生する場合、ビルド中にこれらのタスクを無効にできます: + +```js title="next.config.mjs" +/** @type {import('next').NextConfig} */ +const nextConfig = { + eslint: { + // 警告: プロジェクトにESLintエラーがある場合でも + // 本番ビルドが正常に完了することを許可します。 + ignoreDuringBuilds: true, + }, + typescript: { + // !! 警告 !! + // プロジェクトに型エラーがある場合でも + // 本番ビルドが正常に完了することを危険に許可します。 + // !! 警告 !! + ignoreBuildErrors: true, + }, +} + +export default nextConfig +``` + +- [TypeScriptエラーの無視](/docs/app/api-reference/config/typescript#disabling-typescript-errors-in-production) +- [Next.js設定でのESLint](https://nextjs.org/docs/canary/pages/api-reference/config/next-config-js/eslint) + +これにより、型エラーやリンティングの問題が原因で誤ったデプロイが発生する可能性があることに注意してください。 +静的解析が完了した後にのみビルドを本番環境に昇格させることを強くお勧めします。 +Vercelにデプロイする場合は、[ステージングデプロイメントのガイド](https://vercel.com/docs/deployments/managing-deployments#staging-and-promoting-a-production-deployment)を参照して、カスタムタスクが成功した後にビルドを本番環境に昇格させる方法を学ぶことができます。 + +## ソースマップを無効にする {#disable-source-maps} + +ソースマップの生成は、ビルドプロセス中に追加のメモリを消費します。 + +ソースマップの生成を無効にするには、Next.js設定に`productionBrowserSourceMaps: false`と`experimental.serverSourceMaps: false`を追加します。 + +> **Good to know**: 一部のプラグインはソースマップをオンにする可能性があり、無効にするためにカスタム設定が必要な場合があります。 + +## Edgeのメモリ問題 {#edge-memory-issues} + +Next.js `v14.1.3`では、Edge runtimeを使用する際のメモリ問題が修正されました。このバージョン(またはそれ以降)に更新して、問題が解決するかどうかを確認してください。 diff --git a/docs/01-app/02-guides/migrating/app-router-migration.mdx b/docs/01-app/02-guides/migrating/app-router-migration.mdx index 5a53b5b7..cc6b9765 100644 --- a/docs/01-app/02-guides/migrating/app-router-migration.mdx +++ b/docs/01-app/02-guides/migrating/app-router-migration.mdx @@ -1,22 +1,22 @@ --- title: 'Pages から App Router への移行方法' nav_title: 'App Router' -description: '既存の Next.js アプリケーションを Pages Router から App Router にアップグレードする方法を学びます。' +description: '既存の Next.js アプリケーションを Pages Router から App Router にアップグレードする方法を学びましょう。' --- このガイドでは、以下のことをサポートします: -- [Next.js アプリケーションをバージョン 12 からバージョン 13 に更新する](#next-js-version) +- [Next.js アプリケーションをバージョン 12 からバージョン 13 に更新する](#nextjs-version) - [`pages` ディレクトリと `app` ディレクトリの両方で動作する機能をアップグレードする](#upgrading-new-features) - [既存のアプリケーションを `pages` から `app` に段階的に移行する](#migrating-from-pages-to-app) ## アップグレード {#upgrading} -### Node.js バージョン {#node-js-version} +### Node.js のバージョン {#node-js-version} -最低限必要な Node.js のバージョンは **v18.17** です。詳細は [Node.js のドキュメント](https://nodejs.org/docs/latest-v18.x/api/)を参照してください。 +Node.js の最小バージョンは **v18.17** です。詳細は [Node.js のドキュメント](https://nodejs.org/docs/latest-v18.x/api/)を参照してください。 -### Next.js バージョン {#next-js-version} +### Next.js のバージョン {#next-js-version} Next.js バージョン 13 に更新するには、お好みのパッケージマネージャーを使用して次のコマンドを実行してください: @@ -24,9 +24,9 @@ Next.js バージョン 13 に更新するには、お好みのパッケージ npm install next@latest react@latest react-dom@latest ``` -### ESLint バージョン {#eslint-version} +### ESLint のバージョン {#eslint-version} -ESLint を使用している場合、ESLint のバージョンをアップグレードする必要があります: +ESLint を使用している場合は、ESLint のバージョンをアップグレードする必要があります: ```bash title="Terminal" npm install -D eslint-config-next@latest @@ -60,7 +60,7 @@ Next.js 12 では、`next/future/image` という一時的なインポートを ### `` コンポーネント {#link-component} -[`` コンポーネント](/docs/app/building-your-application/routing/linking-and-navigating#link-component) は、子として `` タグを手動で追加する必要がなくなりました。この動作は [バージョン 12.2](https://nextjs.org/blog/next-12-2) で実験的なオプションとして追加され、現在はデフォルトです。Next.js 13 では、`` は常に `` をレンダリングし、props を基礎となるタグに転送することができます。 +[`` コンポーネント](/docs/app/building-your-application/routing/linking-and-navigating#link-component) は、子として `` タグを手動で追加する必要がなくなりました。この動作は [バージョン 12.2](https://nextjs.org/blog/next-12-2) で実験的なオプションとして追加され、現在はデフォルトです。Next.js 13 では、`` は常に `` をレンダリングし、props を基礎となるタグに転送できるようにします。 例えば: @@ -85,8 +85,8 @@ Next.js 13 にリンクをアップグレードするには、[`new-link` codemo [`next/script`](/docs/app/api-reference/components/script) の動作は、`pages` と `app` の両方をサポートするように更新されましたが、スムーズな移行を確保するためにいくつかの変更が必要です: - 以前 `_document.js` に含めていた `beforeInteractive` スクリプトを root レイアウトファイル(`app/layout.tsx`)に移動します。 -- 実験的な `worker` 戦略は `app` ではまだ動作しないため、この戦略で示されたスクリプトは削除するか、別の戦略(例:`lazyOnload`)を使用するように変更する必要があります。 -- `onLoad`、`onReady`、`onError` ハンドラは Server Components では動作しないため、[Client Component](/docs/app/building-your-application/rendering/server-components) に移動するか、完全に削除する必要があります。 +- 実験的な `worker` 戦略は `app` ではまだ動作しないため、この戦略で指定されたスクリプトは削除するか、別の戦略(例:`lazyOnload`)を使用するように変更する必要があります。 +- `onLoad`、`onReady`、`onError` ハンドラは Server Components では動作しないため、[Client Component](/docs/app/building-your-application/rendering/server-components) に移動するか、完全に削除してください。 ### Font 最適化 {#font-optimization} @@ -94,7 +94,7 @@ Next.js 13 にリンクをアップグレードするには、[`new-link` codemo `pages` では CSS のインライン化がまだ機能しますが、`app` では機能しません。代わりに [`next/font`](/docs/app/building-your-application/optimizing/fonts) を使用する必要があります。 -`next/font` の使用方法については、[Font 最適化](/docs/app/building-your-application/optimizing/fonts) ページを参照してください。 +`next/font` の使用方法については、[Font Optimization](/docs/app/building-your-application/optimizing/fonts) ページを参照してください。 ## `pages` から `app` への移行 {#migrating-from-pages-to-app} @@ -104,18 +104,18 @@ App Router への移行は、Next.js が基盤として構築する React の機 これらの更新の複雑さを軽減するために、移行を小さなステップに分解することをお勧めします。`app` ディレクトリは、`pages` ディレクトリと同時に動作するように意図的に設計されており、ページごとに段階的に移行することができます。 -- `app` ディレクトリはネストされたルート _と_ レイアウトをサポートしています。[詳細はこちら](/docs/app/building-your-application/routing)。 +- `app` ディレクトリはネストされたルートとレイアウトをサポートしています。[詳細はこちら](/docs/app/building-your-application/routing)。 - ネストされたフォルダを使用してルートを定義し、特別な `page.js` ファイルを使用してルートセグメントを公開します。[詳細はこちら](#step-4-migrating-pages)。 - [特別なファイルの規約](/docs/app/api-reference/file-conventions) は、各ルートセグメントの UI を作成するために使用されます。最も一般的な特別なファイルは `page.js` と `layout.js` です。 - `page.js` を使用して、ルートに固有の UI を定義します。 - `layout.js` を使用して、複数のルートに共通する UI を定義します。 - 特別なファイルには `.js`、`.jsx`、または `.tsx` の拡張子を使用できます。 -- コンポーネント、スタイル、テストなどの他のファイルを `app` ディレクトリ内に配置することができます。[詳細はこちら](/docs/app/building-your-application/routing)。 +- `app` ディレクトリ内にコンポーネント、スタイル、テストなどの他のファイルを配置できます。[詳細はこちら](/docs/app/building-your-application/routing)。 - `getServerSideProps` や `getStaticProps` などのデータフェッチ関数は、`app` 内の [新しい API](/docs/app/building-your-application/data-fetching) に置き換えられました。`getStaticPaths` は [`generateStaticParams`](/docs/app/api-reference/functions/generate-static-params) に置き換えられました。 - `pages/_app.js` と `pages/_document.js` は、単一の `app/layout.js` root レイアウトに置き換えられました。[詳細はこちら](/docs/app/building-your-application/routing/layouts-and-templates#root-layout-required)。 - `pages/_error.js` は、より細かい `error.js` 特別なファイルに置き換えられました。[詳細はこちら](/docs/app/building-your-application/routing/error-handling)。 - `pages/404.js` は [`not-found.js`](/docs/app/api-reference/file-conventions/not-found) ファイルに置き換えられました。 -- `pages/api/*` API Routes は、[`route.js`](/docs/app/api-reference/file-conventions/route)(Route Handler)特別なファイルに置き換えられました。 +- `pages/api/*` API ルートは、[`route.js`](/docs/app/api-reference/file-conventions/route)(Route Handler)特別なファイルに置き換えられました。 ### ステップ 1: `app` ディレクトリの作成 {#step-1-creating-the-app-directory} @@ -171,7 +171,7 @@ export default function RootLayout({ - `app` ディレクトリには **必ず** root レイアウトが含まれている必要があります。 -- root レイアウトは `` と `` タグを定義する必要があります。Next.js は自動的にそれらを作成しません。 +- root レイアウトは `` と `` タグを定義する必要があります。Next.js は自動的にこれらを作成しません。 - root レイアウトは `pages/_app.tsx` と `pages/_document.tsx` ファイルを置き換えます。 - レイアウトファイルには `.js`、`.jsx`、または `.tsx` の拡張子を使用できます。 @@ -204,9 +204,9 @@ export const metadata = { #### `_document.js` と `_app.js` の移行 {#migrating-document-js-and-app-js} -既存の `_app` または `_document` ファイルがある場合、その内容(例:グローバルスタイル)を root レイアウト(`app/layout.tsx`)にコピーできます。`app/layout.tsx` のスタイルは `pages/*` には適用されません。移行中に `pages/*` ルートが壊れないように `_app`/`_document` を保持する必要があります。完全に移行が完了したら、それらを安全に削除できます。 +既存の `_app` または `_document` ファイルがある場合は、その内容(例:グローバルスタイル)を root レイアウト(`app/layout.tsx`)にコピーできます。`app/layout.tsx` のスタイルは `pages/*` には適用されません。移行中に `pages/*` ルートが壊れないようにするために、`_app`/`_document` を保持する必要があります。完全に移行が完了したら、それらを安全に削除できます。 -React Context プロバイダーを使用している場合、それらを [Client Component](/docs/app/building-your-application/rendering/client-components) に移動する必要があります。 +React Context プロバイダーを使用している場合は、それらを [Client Component](/docs/app/building-your-application/rendering/client-components) に移動する必要があります。 #### `getLayout()` パターンをレイアウトに移行する(オプション) {#migrating-the-getlayout-pattern-to-layouts-optional} @@ -373,7 +373,7 @@ export default function Page() { ページの移行を 2 つの主要なステップに分解することをお勧めします: - ステップ 1: デフォルトでエクスポートされた Page コンポーネントを新しい Client Component に移動します。 -- ステップ 2: 新しい `page.js` ファイル内で新しい Client Component をインポートします。 +- ステップ 2: 新しい Client Component を `app` ディレクトリ内の新しい `page.js` ファイルにインポートします。 > **Good to know**: これは `pages` ディレクトリと最も比較可能な動作を持つため、最も簡単な移行パスです。 @@ -429,7 +429,7 @@ export default function HomePage({ recentPosts }) { - `app` ディレクトリ内に新しい `app/page.tsx` ファイルを作成します。これはデフォルトで Server Component です。 - `home-page.tsx` Client Component をページにインポートします。 -- `pages/index.js` でデータをフェッチしていた場合、新しい [データフェッチ API](/docs/app/building-your-application/data-fetching/fetching) を使用してデータフェッチロジックを直接 Server Component に移動します。詳細は [データフェッチのアップグレードガイド](#step-6-migrating-data-fetching-methods) を参照してください。 +- `pages/index.js` でデータをフェッチしていた場合は、新しい [データフェッチ API](/docs/app/building-your-application/data-fetching/fetching) を使用してデータフェッチロジックを直接 Server Component に移動します。詳細は [データフェッチのアップグレードガイド](#step-6-migrating-data-fetching-methods) を参照してください。 @@ -476,7 +476,7 @@ export default async function Page() { -- 以前のページで `useRouter` を使用していた場合、新しいルーティングフックに更新する必要があります。[詳細はこちら](/docs/app/api-reference/functions/use-router)。 +- 以前のページで `useRouter` を使用していた場合は、新しいルーティングフックに更新する必要があります。[詳細はこちら](/docs/app/api-reference/functions/use-router)。 - 開発サーバーを起動し、[`http://localhost:3000`](http://localhost:3000) にアクセスします。`app` ディレクトリを通じて提供される既存のインデックスルートが表示されるはずです。 ### ステップ 5: ルーティングフックの移行 {#step-5-migrating-routing-hooks} @@ -625,7 +625,7 @@ export default function Dashboard({ projects }) { } ``` -App Router では、[Server Components](/docs/app/building-your-application/rendering/server-components) を使用して React コンポーネント内にデータフェッチを配置できます。これにより、クライアントに送信する JavaScript の量を減らしながら、サーバーからレンダリングされた HTML を維持できます。 +App Router では、[Server Components](/docs/app/building-your-application/rendering/server-components) を使用して React コンポーネント内にデータフェッチを配置できます。これにより、クライアントに送信する JavaScript の量を減らしながら、サーバーからのレンダリングされた HTML を維持できます。 `cache` オプションを `no-store` に設定することで、フェッチされたデータが [決してキャッシュされない](/docs/app/building-your-application/data-fetching/fetching) ことを示すことができます。これは `pages` ディレクトリの `getServerSideProps` に似ています。 @@ -726,8 +726,8 @@ async function getData() { } export default async function Page() { - // `cookies` または `headers` を Server Components 内で - // 直接またはデータフェッチ関数内で使用できます + // Server Components 内で `cookies` や `headers` を直接使用することができます + // またはデータフェッチ関数内で使用することができます const theme = (await cookies()).get('theme') const data = await getData() return '...' @@ -748,8 +748,8 @@ async function getData() { } export default async function Page() { - // `cookies` または `headers` を Server Components 内で - // 直接またはデータフェッチ関数内で使用できます + // Server Components 内で `cookies` や `headers` を直接使用することができます + // またはデータフェッチ関数内で使用することができます const theme = (await cookies()).get('theme') const data = await getData() return '...' @@ -761,7 +761,7 @@ export default async function Page() { #### 静的サイト生成 (`getStaticProps`) {#static-site-generation-getstaticprops} -`pages` ディレクトリでは、`getStaticProps` 関数を使用してビルド時にページをプリレンダリングします。この関数は、外部 API からデータをフェッチしたり、データベースから直接データを取得したりして、このデータをページ全体に渡すために使用されます。 +`pages` ディレクトリでは、`getStaticProps` 関数を使用してビルド時にページをプリレンダリングします。この関数は、外部 API からデータをフェッチしたり、データベースから直接データを取得したりして、ビルド中に生成されるページ全体にこのデータを渡すことができます。 ```jsx title="pages/index.js" // `pages` ディレクトリ @@ -826,7 +826,7 @@ export default function Post({ post }) { `app` ディレクトリでは、`getStaticPaths` は [`generateStaticParams`](/docs/app/api-reference/functions/generate-static-params) に置き換えられました。 -[`generateStaticParams`](/docs/app/api-reference/functions/generate-static-params) は `getStaticPaths` と同様に動作しますが、ルートパラメータを返すためのシンプルな API を持ち、[レイアウト](/docs/app/building-your-application/routing/layouts-and-templates) 内で使用できます。`generateStaticParams` の戻り値の形は、ネストされた `param` オブジェクトの配列や解決されたパスの文字列ではなく、セグメントの配列です。 +[`generateStaticParams`](/docs/app/api-reference/functions/generate-static-params) は `getStaticPaths` と同様に動作しますが、ルートパラメータを返すための簡素化された API を持ち、[レイアウト](/docs/app/building-your-application/routing/layouts-and-templates) 内で使用できます。`generateStaticParams` の戻り値の形状は、ネストされた `param` オブジェクトの配列ではなく、解決されたパスの文字列の配列です。 ```jsx title="app/posts/[id]/page.js" // `app` ディレクトリ @@ -850,13 +850,13 @@ export default async function Post({ params }) { } ``` -`app` ディレクトリの新しいモデルにおいて、`generateStaticParams` という名前を使用することは `getStaticPaths` よりも適切です。`get` プレフィックスは、`getStaticProps` や `getServerSideProps` がもはや必要ないため、より説明的な `generate` に置き換えられています。`Paths` サフィックスは、複数の動的セグメントを持つネストされたルーティングに対してより適切な `Params` に置き換えられています。 +`app` ディレクトリの新しいモデルには `generateStaticParams` という名前が `getStaticPaths` よりも適しています。`get` プレフィックスは、`getStaticProps` や `getServerSideProps` がもはや必要ないため、より説明的な `generate` に置き換えられています。`Paths` サフィックスは、複数の動的セグメントを持つネストされたルーティングにより適した `Params` に置き換えられています。 --- #### `fallback` の置き換え {#replacing-fallback} -`pages` ディレクトリでは、`getStaticPaths` から返される `fallback` プロパティを使用して、ビルド時にプリレンダリングされていないページの動作を定義します。このプロパティは、ページが生成される間にフォールバックページを表示するために `true` に設定したり、404 ページを表示するために `false` に設定したり、リクエスト時にページを生成するために `blocking` に設定したりできます。 +`pages` ディレクトリでは、`getStaticPaths` から返される `fallback` プロパティを使用して、ビルド時にプリレンダリングされていないページの動作を定義します。このプロパティは、ページが生成されている間にフォールバックページを表示するために `true` に設定したり、404 ページを表示するために `false` に設定したり、リクエスト時にページを生成するために `blocking` に設定したりできます。 ```jsx title="pages/posts/[id].js" // `pages` ディレクトリ @@ -877,12 +877,12 @@ export default function Post({ post }) { } ``` -`app` ディレクトリでは、[`config.dynamicParams` プロパティ](/docs/app/api-reference/file-conventions/route-segment-config#dynamicparams) が [`generateStaticParams`](/docs/app/api-reference/functions/generate-static-params) の外でのパラメータの処理方法を制御します: +`app` ディレクトリでは、[`config.dynamicParams` プロパティ](/docs/app/api-reference/file-conventions/route-segment-config#dynamicparams) が [`generateStaticParams`](/docs/app/api-reference/functions/generate-static-params) の外部でのパラメータの処理方法を制御します: - **`true`**: (デフォルト)`generateStaticParams` に含まれていない動的セグメントはオンデマンドで生成されます。 - **`false`**: `generateStaticParams` に含まれていない動的セグメントは 404 を返します。 -これは `pages` ディレクトリの `getStaticPaths` の `fallback: true | false | 'blocking'` オプションを置き換えます。`dynamicParams` に `fallback: 'blocking'` オプションは含まれていません。ストリーミングでは `'blocking'` と `true` の違いはわずかです。 +これは `pages` ディレクトリの `getStaticPaths` の `fallback: true | false | 'blocking'` オプションを置き換えます。`dynamicParams` には `fallback: 'blocking'` オプションは含まれていません。ストリーミングでは `'blocking'` と `true` の違いはわずかです。 ```jsx title="app/posts/[id]/page.js" // `app` ディレクトリ @@ -908,7 +908,7 @@ export default async function Post({ params }) { #### インクリメンタル静的再生成 (`getStaticProps` with `revalidate`) {#incremental-static-regeneration-getstaticprops-with-revalidate} -`pages` ディレクトリでは、`getStaticProps` 関数を使用して、一定の時間が経過した後にページを自動的に再生成するための `revalidate` フィールドを追加できます。 +`pages` ディレクトリでは、`getStaticProps` 関数を使用して、一定時間後にページを自動的に再生成するための `revalidate` フィールドを追加できます。 ```jsx title="pages/index.js" // `pages` ディレクトリ @@ -974,7 +974,7 @@ export async function GET(request) {} -> **Good to know**: 以前にクライアントから外部 API を呼び出すために API ルートを使用していた場合、代わりに [Server Components](/docs/app/building-your-application/rendering/server-components) を使用してデータを安全にフェッチできます。[データフェッチ](/docs/app/building-your-application/data-fetching/fetching) について詳しく学びましょう。 +> **Good to know**: 以前にクライアントから外部 API を呼び出すために API ルートを使用していた場合は、代わりに [Server Components](/docs/app/building-your-application/rendering/server-components) を使用してデータを安全にフェッチできます。[データフェッチ](/docs/app/building-your-application/data-fetching/fetching) について詳しく学びましょう。 #### シングルページアプリケーション {#single-page-applications} @@ -987,13 +987,13 @@ export async function GET(request) {} - [CSS Modules](/docs/app/building-your-application/styling/css#css-modules) - [Tailwind CSS](/docs/app/building-your-application/styling/tailwind-css) - [グローバルスタイル](/docs/app/building-your-application/styling/css#global-styles) -- [CSS-in-JS](/docs/app/building-your-application/styling/css-in-js) +- [CSS-in-JS](/docs/app/guides/css-in-js) - [外部スタイルシート](/docs/app/building-your-application/styling/css#external-stylesheets) -- [Sass](/docs/app/building-your-application/styling/sass) +- [Sass](/docs/app/guides/sass) #### Tailwind CSS {#tailwind-css} -Tailwind CSS を使用している場合、`tailwind.config.js` ファイルに `app` ディレクトリを追加する必要があります: +Tailwind CSS を使用している場合は、`tailwind.config.js` ファイルに `app` ディレクトリを追加する必要があります: ```js title="tailwind.config.js" module.exports = { @@ -1021,7 +1021,7 @@ export default function RootLayout({ children }) { [Tailwind CSS を使用したスタイリング](/docs/app/building-your-application/styling/tailwind-css) について詳しく学びましょう。 -## App Router と Pages Router の併用 {#using-app-router-together-with-pages-router} +## App Router と Pages Router を一緒に使用する {#using-app-router-together-with-pages-router} 異なる Next.js ルーターによって提供されるルート間をナビゲートする際には、ハードナビゲーションが発生します。`next/link` を使用した自動リンクプリフェッチは、ルーター間でプリフェッチしません。 diff --git a/docs/01-app/02-guides/migrating/from-create-react-app.mdx b/docs/01-app/02-guides/migrating/from-create-react-app.mdx index 5c3415e6..72a0ecd3 100644 --- a/docs/01-app/02-guides/migrating/from-create-react-app.mdx +++ b/docs/01-app/02-guides/migrating/from-create-react-app.mdx @@ -10,20 +10,20 @@ description: '既存の React アプリケーションを Create React App か Create React App から Next.js に移行したい理由はいくつかあります: -### 初期ページ読み込み時間の遅さ {#slow-initial-page-loading-time} +### 初期ページの読み込み時間が遅い {#slow-initial-page-loading-time} -Create React App は純粋にクライアントサイドの React を使用しています。クライアントサイドのみのアプリケーション、別名 [シングルページアプリケーション (SPA)](/docs/app/guides/single-page-applications) は、初期ページ読み込み時間が遅くなることがよくあります。これは以下の理由によります: +Create React App は純粋にクライアントサイドの React を使用しています。クライアントサイドのみのアプリケーション、別名 [シングルページアプリケーション (SPA)](/docs/app/guides/single-page-applications) は、初期ページの読み込み時間が遅くなることがよくあります。これにはいくつかの理由があります: -1. ブラウザは、React コードとアプリケーション全体のバンドルがダウンロードされて実行されるまで待つ必要があります。 -2. 新しい機能や依存関係を追加するたびにアプリケーションコードが増加します。 +1. ブラウザは、React コードとアプリケーション全体のバンドルがダウンロードされて実行されるのを待つ必要があり、その後にコードがデータをロードするためのリクエストを送信できるようになります。 +2. 新しい機能や依存関係を追加するたびに、アプリケーションコードが増加します。 ### 自動コード分割がない {#no-automatic-code-splitting} -前述の読み込み時間の遅さの問題は、コード分割である程度緩和できます。しかし、手動でコード分割を試みると、ネットワークウォーターフォールを引き起こす可能性があります。Next.js は、自動コード分割と tree-shaking をルーターとビルドパイプラインに組み込んでいます。 +前述の読み込み時間の遅さの問題は、コード分割によってある程度緩和できます。しかし、手動でコード分割を試みると、ネットワークのウォーターフォールを意図せずに引き起こす可能性があります。Next.js は、自動コード分割と tree-shaking をルーターとビルドパイプラインに組み込んでいます。 ### ネットワークウォーターフォール {#network-waterfalls} -パフォーマンスが悪化する一般的な原因は、データを取得するためにクライアントとサーバー間で順次リクエストを行うことです。[SPA](/docs/app/guides/single-page-applications) でのデータ取得のパターンの1つは、プレースホルダーをレンダリングし、コンポーネントがマウントされた後にデータを取得することです。残念ながら、子コンポーネントは親が自身のデータを読み込んだ後でしかデータを取得できないため、リクエストの「ウォーターフォール」が発生します。 +アプリケーションがデータを取得するためにクライアントとサーバー間で順次リクエストを行うと、パフォーマンスが低下する一般的な原因となります。[SPA](/docs/app/guides/single-page-applications) でのデータ取得のパターンの1つは、プレースホルダーをレンダリングし、コンポーネントがマウントされた後にデータを取得することです。残念ながら、子コンポーネントは親が自身のデータを読み込んだ後でしかデータを取得できないため、リクエストの「ウォーターフォール」が発生します。 Next.js ではクライアントサイドのデータ取得もサポートされていますが、データ取得をサーバーに移動することもできます。これにより、クライアントとサーバー間のウォーターフォールが完全に排除されることがよくあります。 @@ -35,21 +35,21 @@ Next.js ではクライアントサイドのデータ取得もサポートされ ### データ取得戦略の選択 {#choose-the-data-fetching-strategy} -必要に応じて、Next.js ではページまたはコンポーネントレベルでデータ取得戦略を選択できます。たとえば、CMS からデータを取得し、ビルド時(SSG)にブログ投稿をレンダリングして高速な読み込み速度を実現したり、必要に応じてリクエスト時(SSR)にデータを取得したりできます。 +ニーズに応じて、Next.js ではページまたはコンポーネントレベルでデータ取得戦略を選択できます。たとえば、CMS からデータを取得し、ビルド時(SSG)にブログ投稿をレンダリングして高速な読み込み速度を実現したり、必要に応じてリクエスト時(SSR)にデータを取得したりできます。 ### ミドルウェア {#middleware} -[Next.js ミドルウェア](/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/guides/scripts) は、アプリケーションのパフォーマンスに大きな影響を与えることがよくあります。Next.js には、これらを自動的に最適化するための専用コンポーネントと API が含まれています。 ## 移行手順 {#migration-steps} -私たちの目標は、できるだけ早く動作する Next.js アプリケーションを作成し、その後で Next.js の機能を段階的に採用できるようにすることです。まず、アプリケーションを純粋なクライアントサイドアプリケーション([SPA](/docs/app/guides/single-page-applications))として扱い、既存のルーターをすぐに置き換えないようにします。これにより、複雑さとマージの競合が軽減されます。 +目標は、できるだけ早く動作する Next.js アプリケーションを作成し、その後で Next.js の機能を段階的に採用できるようにすることです。まず、アプリケーションを純粋なクライアントサイドアプリケーション([SPA](/docs/app/guides/single-page-applications))として扱い、既存のルーターをすぐに置き換えないようにします。これにより、複雑さとマージの競合が軽減されます。 -> **注意**: `package.json` のカスタム `homepage` フィールド、カスタムサービスワーカー、特定の Babel/webpack 調整など、CRA の高度な設定を使用している場合は、Next.js でこれらの機能を再現または適応するためのヒントについて、このガイドの最後にある **追加の考慮事項** セクションを参照してください。 +> **注意**: `package.json` のカスタム `homepage` フィールド、カスタムサービスワーカー、特定の Babel/webpack 調整など、CRA の高度な設定を使用している場合は、ガイドの最後にある **追加の考慮事項** セクションを参照して、これらの機能を Next.js で再現または適応するためのヒントを確認してください。 ### ステップ 1: Next.js の依存関係をインストールする {#step-1-install-the-next-js-dependency} @@ -61,28 +61,28 @@ npm install next@latest ### ステップ 2: Next.js の設定ファイルを作成する {#step-2-create-the-next-js-configuration-file} -プロジェクトの root に `next.config.ts` を作成します(`package.json` と同じレベル)。このファイルには、[Next.js の設定オプション](/docs/app/api-reference/config/next-config-js)が含まれます。 +プロジェクトの root に `next.config.ts` を作成します(`package.json` と同じレベル)。このファイルには [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 のサーバー機能を活用するには、この行を削除できます。 +> **注意**: `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) アプリケーションには、すべてのページをラップする [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` です。 -1. `src` ディレクトリ内に新しい `app` ディレクトリを作成します(または、`app` を root に配置する場合はプロジェクトの root に作成します)。 +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) と[テスト](/docs/app/building-your-application/testing)のセットアップをサポートしています。 +> **Good to know**: Next.js はデフォルトで CRA の `public/manifest.json`、追加のアイコン、および[テスト設定](/docs/app/guides/testing)を無視します。これらが必要な場合、Next.js には [Metadata API](/docs/app/building-your-application/optimizing/metadata) と [Testing](/docs/app/guides/testing) のセットアップがサポートされています。 ### ステップ 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` ディレクトリに移動した後、`` タグを安全に削除できます: @@ -314,11 +314,11 @@ export default function RootLayout({ children }) { -上記の変更により、`index.html` にすべてを宣言する方法から、フレームワークに組み込まれた Next.js の規約ベースのアプローチ([Metadata API](/docs/app/building-your-application/optimizing/metadata))を使用する方法に移行しました。このアプローチにより、ページの SEO とウェブの共有性をより簡単に向上させることができます。 +上記の変更により、`index.html` にすべてを宣言するのではなく、Next.js のフレームワークに組み込まれた規約ベースのアプローチ([Metadata API](/docs/app/building-your-application/optimizing/metadata))を使用するようにシフトしました。このアプローチにより、ページの SEO とウェブの共有性をより簡単に向上させることができます。 ### ステップ 5: スタイル {#step-5-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)もサポートしています。 +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` にインポートします: @@ -357,7 +357,7 @@ Tailwind CSS を使用している場合は、[インストールドキュメン 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]]` ディレクトリを作成します。** @@ -399,11 +399,11 @@ 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} -次に、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`)を作成します: @@ -440,8 +440,8 @@ export function ClientOnly() { -- `'use client'` ディレクティブは、このファイルを**クライアントコンポーネント**にします。 -- `dynamic` インポートと `ssr: false` は `` コンポーネントのサーバーサイドレンダリングを無効にし、真にクライアント専用(SPA)にします。 +- `'use client'` ディレクティブは、このファイルを **Client Component** にします。 +- `dynamic` インポートと `ssr: false` は、`` コンポーネントのサーバーサイドレンダリングを無効にし、純粋にクライアント専用(SPA)にします。 次に、`page.tsx`(または `page.js`)を更新して新しいコンポーネントを使用します: @@ -490,39 +490,39 @@ 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` からインポートされた画像の絶対インポートパスを相対インポートに変換します:** ```tsx -// 変更前 +// Before import logo from '/logo.png' -// 変更後 +// After import logo from '../public/logo.png' ``` **画像オブジェクト全体ではなく、画像の `src` プロパティを `` タグに渡します:** ```tsx -// 変更前 +// Before -// 変更後 +// After ``` または、ファイル名に基づいて画像アセットの公開 URL を参照することもできます。たとえば、`public/logo.png` はアプリケーションの `/logo.png` で画像を提供し、これが `src` 値になります。 -> **警告**: TypeScript を使用している場合、`src` プロパティにアクセスするときに型エラーが発生する可能性があります。これを修正するには、`tsconfig.json` ファイルの [`include` 配列](https://www.typescriptlang.org/tsconfig#include)に `next-env.d.ts` を追加する必要があります。Next.js は、ステップ 9 でアプリケーションを実行するときにこのファイルを自動的に生成します。 +> **警告:** TypeScript を使用している場合、`src` プロパティにアクセスするときに型エラーが発生する可能性があります。これを修正するには、`tsconfig.json` ファイルの [`include` 配列](https://www.typescriptlang.org/tsconfig#include) に `next-env.d.ts` を追加する必要があります。Next.js は、ステップ 9 でアプリケーションを実行するときにこのファイルを自動的に生成します。 ### ステップ 9: 環境変数を移行する {#step-9-migrate-environment-variables} -Next.js は CRA と同様に[環境変数](/docs/app/building-your-application/configuring/environment-variables)をサポートしていますが、ブラウザで公開したい変数には `NEXT_PUBLIC_` プレフィックスが**必要**です。 +Next.js は CRA と同様に[環境変数](/docs/app/guides/environment-variables)をサポートしていますが、ブラウザで公開したい変数には `NEXT_PUBLIC_` プレフィックスが**必要**です。 主な違いは、クライアントサイドで環境変数を公開するために使用されるプレフィックスです。`REACT_APP_` プレフィックスを持つすべての環境変数を `NEXT_PUBLIC_` に変更します。 @@ -568,7 +568,7 @@ Create React App に特有のアーティファクトを削除できます: ### CRA でカスタム `homepage` を使用する {#using-a-custom-homepage-in-cra} -CRA の `package.json` で `homepage` フィールドを使用してアプリを特定のサブパスで提供していた場合、Next.js の `next.config.ts` で [`basePath` 設定](/docs/app/api-reference/config/next-config-js/basePath)を使用してそれを再現できます: +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' @@ -583,11 +583,11 @@ export default nextConfig ### カスタム `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/guides/progressive-web-apps) を作成する方法を学ぶことができます。 ### 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' @@ -613,7 +613,7 @@ import { NextConfig } from 'next' const nextConfig: NextConfig = { webpack: (config, { isServer }) => { - // ここで webpack 設定を変更します + // ここで webpack 設定を変更 return config }, } @@ -621,7 +621,7 @@ const nextConfig: NextConfig = { export default nextConfig ``` -> **注意**: これには `dev` スクリプトから `--turbopack` を削除して Turbopack を無効にする必要があります。 +> **注意**: これには、`dev` スクリプトから `--turbopack` を削除して Turbopack を無効にする必要があります。 ### TypeScript のセットアップ {#typescript-setup} @@ -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/turbopack) を提供しています: +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 App Router](/docs/app/building-your-application/routing) に**React Router から移行**して: +- **React Router から移行**して、以下のために [Next.js App Router](/docs/app/building-your-application/routing) を使用します: - 自動コード分割 - [ストリーミングサーバーレンダリング](/docs/app/building-your-application/routing/loading-ui-and-streaming) - [React Server Components](/docs/app/building-your-application/rendering/server-components) -- [`` コンポーネント](/docs/app/building-your-application/optimizing/images)で**画像を最適化** -- [`next/font`](/docs/app/building-your-application/optimizing/fonts)で**フォントを最適化** -- [` +``` + +または、`dangerouslySetInnerHTML`プロパティを使用することもできます: + +```jsx + -``` - -または `dangerouslySetInnerHTML` プロパティを使用して: - -```jsx -