-バックグラウンド再生成を処理する際に `getStaticProps` 内でエラーが発生した場合、または手動でエラーをスローした場合、最後に正常に生成されたページが引き続き表示されます。次のリクエスト時に、Next.jsは `getStaticProps` の呼び出しを再試行します。
+バックグラウンド再生成を処理する際に `getStaticProps` 内でエラーが発生した場合、または手動でエラーをスローした場合、最後に正常に生成されたページが表示され続けます。次のリクエスト時に、Next.jsは `getStaticProps` の呼び出しを再試行します。
@@ -566,7 +566,7 @@ export const getStaticProps: GetStaticProps = async ({
if (!res.ok) {
// サーバーエラーが発生した場合、キャッシュが更新されないように
// エラーをスローすることを検討してください。
- // 次の正常なリクエストまでキャッシュは更新されません。
+ // 次の成功したリクエストまで。
throw new Error(`Failed to fetch posts, received status ${res.status}`)
}
@@ -592,7 +592,7 @@ export async function getStaticProps({ params }) {
if (!res.ok) {
// サーバーエラーが発生した場合、キャッシュが更新されないように
// エラーをスローすることを検討してください。
- // 次の正常なリクエストまでキャッシュは更新されません。
+ // 次の成功したリクエストまで。
throw new Error(`Failed to fetch posts, received status ${res.status}`)
}
@@ -613,9 +613,9 @@ export async function getStaticProps({ params }) {
ページのキャッシュと再検証（Incremental Static Regenerationを使用）は、同じ共有キャッシュを使用します。[Vercelにデプロイする](https://vercel.com/docs/incremental-static-regeneration?utm_source=next-site&utm_medium=docs&utm_campaign=next-website)場合、ISRキャッシュは自動的に耐久性のあるストレージに保存されます。
-セルフホスティングの場合、ISRキャッシュはNext.jsサーバーのファイルシステム（ディスク上）に保存されます。PagesとApp Routerの両方を使用してセルフホスティングする場合に自動的に機能します。
+セルフホスティングの場合、ISRキャッシュはNext.jsサーバーのファイルシステム（ディスク上）に保存されます。これは、PagesとApp Routerの両方を使用してセルフホスティングする場合に自動的に機能します。
-キャッシュされたページとデータを耐久性のあるストレージに保存したり、Next.jsアプリケーションの複数のコンテナやインスタンス間でキャッシュを共有したりする場合は、Next.jsのキャッシュの場所を設定できます。[詳細を学ぶ](/docs/app/building-your-application/deploying#caching-and-isr)。
+キャッシュされたページとデータを耐久性のあるストレージに保存したり、Next.jsアプリケーションの複数のコンテナやインスタンス間でキャッシュを共有したい場合は、Next.jsのキャッシュの場所を設定できます。[詳細を学ぶ](/docs/app/guides/self-hosting#caching-and-isr)。
## トラブルシューティング {#troubleshooting}
@@ -643,34 +643,34 @@ module.exports = {
NEXT_PRIVATE_DEBUG_CACHE=1
```
-これにより、Next.jsサーバーのコンソールにISRキャッシュのヒットとミスがログ出力されます。`next build` 中に生成されたページや、パスがオンデマンドでアクセスされる際にページがどのように更新されるかを確認できます。
+これにより、Next.jsサーバーのコンソールにISRキャッシュのヒットとミスがログ出力されます。`next build` 中に生成されたページや、パスがオンデマンドでアクセスされるときにページがどのように更新されるかを確認できます。
## 注意事項 {#caveats}
- ISRはNode.jsランタイム（デフォルト）を使用している場合にのみサポートされます。
-- ISRは[Static Export](/docs/app/building-your-application/deploying/static-exports)を作成する際にはサポートされません。
-- 静的にレンダリングされたルートに複数の `fetch` リクエストがあり、それぞれが異なる `revalidate` 周期を持つ場合、ISRには最も短い時間が使用されます。ただし、これらの再検証頻度は[Data Cache](/docs/app/building-your-application/caching#data-cache)によって引き続き尊重されます。
+- ISRは[Static Export](/docs/app/guides/static-exports)を作成する際にはサポートされていません。
+- 静的にレンダリングされたルートに複数の `fetch` リクエストがあり、それぞれが異なる `revalidate` 周期を持つ場合、ISRには最も短い時間が使用されます。ただし、これらの再検証頻度は[データキャッシュ](/docs/app/building-your-application/caching#data-cache)によって引き続き尊重されます。
- ルートで使用される `fetch` リクエストのいずれかが `revalidate` 時間を `0` に設定している場合、または明示的に `no-store` を指定している場合、そのルートは[動的にレンダリング](/docs/app/building-your-application/rendering/server-components#dynamic-rendering)されます。
-- オンデマンドISRリクエストに対してはミドルウェアは実行されません。つまり、ミドルウェア内のパスの書き換えやロジックは適用されません。正確なパスを再検証していることを確認してください。例えば、書き換えられた `/post-1` ではなく、`/post/1` です。
+- オンデマンドISRリクエストにはミドルウェアが実行されないため、ミドルウェア内のパスの書き換えやロジックは適用されません。正確なパスを再検証していることを確認してください。たとえば、書き換えられた `/post-1` ではなく、`/post/1` です。
- ISRはNode.jsランタイム（デフォルト）を使用している場合にのみサポートされます。
-- ISRは[Static Export](/docs/app/building-your-application/deploying/static-exports)を作成する際にはサポートされません。
-- オンデマンドISRリクエストに対してはミドルウェアは実行されません。つまり、ミドルウェア内のパスの書き換えやロジックは適用されません。正確なパスを再検証していることを確認してください。例えば、書き換えられた `/post-1` ではなく、`/post/1` です。
+- ISRは[Static Export](/docs/app/guides/static-exports)を作成する際にはサポートされていません。
+- オンデマンドISRリクエストにはミドルウェアが実行されないため、ミドルウェア内のパスの書き換えやロジックは適用されません。正確なパスを再検証していることを確認してください。たとえば、書き換えられた `/post-1` ではなく、`/post/1` です。
## バージョン履歴 {#version-history}
-| Version | Changes |
+| Version | 変更点 |
| --------- | ----------------------------------------------------------------------------------------------------------------- |
| `v14.1.0` | カスタム `cacheHandler` が安定版になりました。 |
| `v13.0.0` | App Router が導入されました。 |
-| `v12.2.0` | Pages Router: オンデマンドISRが安定版になりました |
+| `v12.2.0` | Pages Router: オンデマンドISRが安定版になりました。 |
| `v12.0.0` | Pages Router: [Bot-aware ISR fallback](https://nextjs.org/blog/next-12#bot-aware-isr-fallback) が追加されました。 |
| `v9.5.0` | Pages Router: [安定版ISRが導入されました](https://nextjs.org/blog/next-9-5)。 |
diff --git a/docs/01-app/03-building-your-application/07-configuring/16-debugging.mdx b/docs/01-app/03-building-your-application/07-configuring/16-debugging.mdx
index aeec4431..8d56c92a 100644
--- a/docs/01-app/03-building-your-application/07-configuring/16-debugging.mdx
+++ b/docs/01-app/03-building-your-application/07-configuring/16-debugging.mdx
@@ -1,17 +1,17 @@
---
title: 'デバッグ'
-description: 'VS Code、Chrome DevTools、またはFirefox DevToolsを使用してNext.jsアプリケーションをデバッグする方法を学びましょう。'
+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のフロントエンドおよびバックエンドコードをフルソースマップサポートでデバッグする方法を説明します。
+このドキュメントでは、[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 のフロントエンドおよびバックエンドコードをフルソースマップサポートでデバッグする方法を説明します。
-Node.jsにアタッチできるデバッガーであれば、Next.jsアプリケーションのデバッグに使用できます。詳細はNode.jsの[デバッグガイド](https://nodejs.org/en/docs/guides/debugging-getting-started/)をご覧ください。
+Node.js にアタッチできるデバッガーであれば、Next.js アプリケーションのデバッグにも使用できます。詳細は Node.js の[デバッグガイド](https://nodejs.org/en/docs/guides/debugging-getting-started/)をご覧ください。
-## VS Codeでのデバッグ {#debugging-with-vs-code}
+## VS Code でのデバッグ {#debugging-with-vs-code}
-プロジェクトのルートに`.vscode/launch.json`という名前のファイルを作成し、次の内容を記述します：
+プロジェクトの root に `.vscode/launch.json` という名前のファイルを作成し、次の内容を記述します：
```json title="launch.json"
{
@@ -46,7 +46,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": {
@@ -61,56 +61,56 @@ Node.jsにアタッチできるデバッガーであれば、Next.jsアプリケ
}
```
-> **Note**: VS CodeでFirefoxデバッグを使用するには、[Firefox Debugger拡張機能](https://marketplace.visualstudio.com/items?itemName=firefox-devtools.vscode-firefox-debug)をインストールする必要があります。
+> **Note**: VS Code で Firefox デバッグを使用するには、[Firefox Debugger 拡張機能](https://marketplace.visualstudio.com/items?itemName=firefox-devtools.vscode-firefox-debug)をインストールする必要があります。
-`npm run dev`は、Yarnを使用している場合は`yarn dev`、pnpmを使用している場合は`pnpm dev`に置き換えることができます。
+`npm run dev` は、Yarn を使用している場合は `yarn dev`、pnpm を使用している場合は `pnpm dev` に置き換えることができます。
-"Next.js: debug full stack"の設定では、`serverReadyAction.action`がサーバーが準備完了したときに開くブラウザを指定します。`debugWithEdge`はEdgeブラウザを起動することを意味します。Chromeを使用している場合は、この値を`debugWithChrome`に変更してください。
+"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"`のようにします。
+Next.js を root 以外のディレクトリから実行している場合（たとえば、Turborepo を使用している場合）、サーバーサイドおよびフルスタックデバッグタスクに `cwd` を追加する必要があります。たとえば、`"cwd": "${workspaceFolder}/apps/web"` のようにします。
-次に、デバッグパネル（Windows/Linuxでは`Ctrl+Shift+D`、macOSでは`⇧+⌘+D`）に移動し、起動構成を選択して、`F5`を押すか、コマンドパレットから**Debug: Start Debugging**を選択してデバッグセッションを開始します。
+次に、デバッグパネル（Windows/Linux では `Ctrl+Shift+D`、macOS では `⇧+⌘+D`）に移動し、起動構成を選択して `F5` を押すか、コマンドパレットから **Debug: Start Debugging** を選択してデバッグセッションを開始します。
-## Jetbrains WebStormでのデバッガーの使用 {#using-the-debugger-in-jetbrains-webstorm}
+## Jetbrains WebStorm でのデバッガーの使用 {#using-the-debugger-in-jetbrains-webstorm}
-ランタイム構成をリストしているドロップダウンメニューをクリックし、`Edit Configurations...`をクリックします。`http://localhost:3000`をURLとして`JavaScript Debug`デバッグ構成を作成します。お好みに合わせてカスタマイズ（例：デバッグ用のブラウザ、プロジェクトファイルとして保存）し、`OK`をクリックします。このデバッグ構成を実行すると、選択したブラウザが自動的に開きます。この時点で、NextJSノードアプリケーションとクライアント/ブラウザアプリケーションの2つがデバッグモードになります。
+ランタイム構成をリストしているドロップダウンメニューをクリックし、`Edit Configurations...` をクリックします。`http://localhost:3000` を URL として `JavaScript Debug` デバッグ構成を作成します。好みに合わせてカスタマイズ（例：デバッグ用のブラウザ、プロジェクトファイルとして保存）し、`OK` をクリックします。このデバッグ構成を実行すると、選択したブラウザが自動的に開きます。この時点で、NextJS ノードアプリケーションとクライアント/ブラウザアプリケーションの2つがデバッグモードになります。
-## ブラウザDevToolsでのデバッグ {#debugging-with-browser-devtools}
+## ブラウザ DevTools でのデバッグ {#debugging-with-browser-devtools}
### クライアントサイドコード {#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 の場合：
-- Chromeの開発者ツールを開く（Windows/Linuxでは`Ctrl+Shift+J`、macOSでは`⌥+⌘+I`）
-- **Sources**タブに移動
+- Chrome のデベロッパーツールを開く（Windows/Linux では `Ctrl+Shift+J`、macOS では `⌥+⌘+I`）
+- **Sources** タブに移動
-Firefoxの場合：
+Firefox の場合：
-- Firefoxの開発者ツールを開く（Windows/Linuxでは`Ctrl+Shift+I`、macOSでは`⌥+⌘+I`）
-- **Debugger**タブに移動
+- Firefox のデベロッパーツールを開く（Windows/Linux では `Ctrl+Shift+I`、macOS では `⌥+⌘+I`）
+- **Debugger** タブに移動
-どちらのブラウザでも、クライアントサイドコードが[`debugger`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/debugger)ステートメントに到達するたびに、コードの実行が一時停止し、そのファイルがデバッグエリアに表示されます。また、手動でブレークポイントを設定するためにファイルを検索することもできます：
+どちらのブラウザでも、クライアントサイドコードが [`debugger`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/debugger) ステートメントに到達するたびに、コードの実行が一時停止し、そのファイルがデバッグエリアに表示されます。また、ファイルを検索して手動でブレークポイントを設定することもできます：
-- Chromeでは：Windows/Linuxでは`Ctrl+P`、macOSでは`⌘+P`を押す
-- Firefoxでは：Windows/Linuxでは`Ctrl+P`、macOSでは`⌘+P`を押すか、左パネルのファイルツリーを使用
+- Chrome では：Windows/Linux では `Ctrl+P`、macOS では `⌘+P` を押す
+- Firefox では：Windows/Linux では `Ctrl+P`、macOS では `⌘+P` を押すか、左パネルのファイルツリーを使用
-検索時に、ソースファイルのパスは`webpack://_N_E/./`で始まります。
+検索時に、ソースファイルのパスは `webpack://_N_E/./` で始まります。
### サーバーサイドコード {#server-side-code}
-ブラウザDevToolsを使用してサーバーサイドのNext.jsコードをデバッグするには、基盤となるNode.jsプロセスに[`--inspect`](https://nodejs.org/api/cli.html#cli_inspect_host_port)フラグを渡す必要があります：
+ブラウザ DevTools を使用してサーバーサイドの Next.js コードをデバッグするには、基盤となる Node.js プロセスに [`--inspect`](https://nodejs.org/api/cli.html#cli_inspect_host_port) フラグを渡す必要があります：
```bash title="Terminal"
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`スクリプトを更新する必要があります：
+`npm run dev` または `yarn dev` を使用している場合は、`package.json` の `dev` スクリプトを更新する必要があります：
```json title="package.json"
{
@@ -120,7 +120,7 @@ NODE_OPTIONS='--inspect' next dev
}
```
-`--inspect`フラグを使用してNext.js開発サーバーを起動すると、次のようになります：
+`--inspect` フラグを使用して Next.js 開発サーバーを起動すると、次のようになります：
```bash title="Terminal"
Debugger listening on ws://127.0.0.1:9229/0cf90313-350d-4466-a748-cd60f4e47c95
@@ -128,34 +128,34 @@ For help, see: https://nodejs.org/en/docs/inspector
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
```
-Chromeの場合：
+Chrome の場合：
-1. 新しいタブを開き、`chrome://inspect`にアクセス
-2. **Configure...**をクリックして、両方のデバッグポートがリストされていることを確認
-3. `localhost:9229`と`localhost:9230`の両方を追加（まだ存在しない場合）
-4. **Remote Target**セクションでNext.jsアプリケーションを探す
-5. **inspect**をクリックして、別のDevToolsウィンドウを開く
-6. **Sources**タブに移動
+1. 新しいタブを開き、`chrome://inspect` にアクセス
+2. **Configure...** をクリックして、両方のデバッグポートがリストされていることを確認
+3. `localhost:9229` と `localhost:9230` の両方を追加（まだ存在しない場合）
+4. **Remote Target** セクションで Next.js アプリケーションを探す
+5. **inspect** をクリックして、別の DevTools ウィンドウを開く
+6. **Sources** タブに移動
-Firefoxの場合：
+Firefox の場合：
-1. 新しいタブを開き、`about:debugging`にアクセス
-2. 左サイドバーで**This Firefox**をクリック
-3. **Remote Targets**の下でNext.jsアプリケーションを見つける
-4. **Inspect**をクリックしてデバッガーを開く
-5. **Debugger**タブに移動
+1. 新しいタブを開き、`about:debugging` にアクセス
+2. 左サイドバーで **This Firefox** をクリック
+3. **Remote Targets** の下で Next.js アプリケーションを見つける
+4. **Inspect** をクリックしてデバッガーを開く
+5. **Debugger** タブに移動
-サーバーサイドコードのデバッグは、クライアントサイドのデバッグと同様に機能します。ファイルを検索する際（`Ctrl+P`/`⌘+P`）、ソースファイルのパスは`webpack://{application-name}/./`で始まります（`{application-name}`は`package.json`ファイルに従ってアプリケーションの名前に置き換えられます）。
+サーバーサイドコードのデバッグは、クライアントサイドのデバッグと同様に機能します。ファイルを検索する際（`Ctrl+P`/`⌘+P`）、ソースファイルのパスは `webpack://{application-name}/./` で始まります（`{application-name}` は `package.json` ファイルに従ってアプリケーションの名前に置き換えられます）。
-### ブラウザDevToolsでサーバーエラーを検査する {#inspect-server-errors-with-browser-devtools}
+### ブラウザ DevTools でサーバーエラーを検査する {#inspect-server-errors-with-browser-devtools}
エラーが発生した場合、ソースコードを検査することでエラーの根本原因を追跡するのに役立ちます。
-Next.jsは、エラーオーバーレイのNext.jsバージョンインジケーターの下にNode.jsアイコンを表示します。そのアイコンをクリックすると、DevToolsのURLがクリップボードにコピーされます。そのURLで新しいブラウザタブを開くことで、Next.jsサーバープロセスを検査できます。
+Next.js は、エラーオーバーレイの Next.js バージョンインジケーターの下に Node.js アイコンを表示します。そのアイコンをクリックすると、DevTools の URL がクリップボードにコピーされます。その URL を使用して新しいブラウザタブを開き、Next.js サーバープロセスを検査できます。
-### Windowsでのデバッグ {#debugging-on-windows}
+### 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"
{
@@ -165,14 +165,14 @@ Windowsユーザーは、`NODE_OPTIONS='--inspect'`を使用する際に問題
}
```
-`cross-env`は、どのプラットフォーム（Mac、Linux、Windowsを含む）でも`NODE_OPTIONS`環境変数を設定し、デバイスやオペレーティングシステムを問わず一貫してデバッグできるようにします。
+`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}
-JavaScriptデバッガーの使用方法について詳しく学ぶには、次のドキュメントをご覧ください：
+JavaScript デバッガーの使用方法について詳しく学ぶには、次のドキュメントをご覧ください：
-- [VS CodeでのNode.jsデバッグ：ブレークポイント](https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_breakpoints)
-- [Chrome DevTools：JavaScriptのデバッグ](https://developers.google.com/web/tools/chrome-devtools/javascript)
+- [VS Code での Node.js デバッグ：ブレークポイント](https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_breakpoints)
+- [Chrome DevTools：JavaScript のデバッグ](https://developers.google.com/web/tools/chrome-devtools/javascript)
- [Firefox DevTools：デバッガー](https://firefox-source-docs.mozilla.org/devtools-user/debugger/)
diff --git a/docs/01-app/03-building-your-application/07-configuring/16-progressive-web-apps.mdx b/docs/01-app/03-building-your-application/07-configuring/16-progressive-web-apps.mdx
index d4716b3f..877f5b29 100644
--- a/docs/01-app/03-building-your-application/07-configuring/16-progressive-web-apps.mdx
+++ b/docs/01-app/03-building-your-application/07-configuring/16-progressive-web-apps.mdx
@@ -1,24 +1,24 @@
---
title: 'Progressive Web Applications (PWA)'
-description: 'Next.jsでProgressive Web Application (PWA)を構築する方法を学びます。'
+description: 'Next.jsでProgressive Web Application (PWA)を構築する方法を学びましょう。'
related:
links:
- - app/api-reference/file-conventions/metadata/manifest
+ - 'app/api-reference/file-conventions/metadata/manifest'
---
Progressive Web Applications (PWA)は、Webアプリケーションの到達範囲とアクセシビリティを、ネイティブモバイルアプリの機能とユーザーエクスペリエンスと組み合わせたものです。Next.jsを使用すると、複数のコードベースやアプリストアの承認を必要とせずに、すべてのプラットフォームでシームレスでアプリのような体験を提供するPWAを作成できます。
PWAを使用すると、次のことが可能です：
-- アプリストアの承認を待たずに、即座に更新をデプロイする
-- 単一のコードベースでクロスプラットフォームのアプリケーションを作成する
-- ホーム画面へのインストールやプッシュ通知など、ネイティブのような機能を提供する
+- アプリストアの承認を待たずに、即座に更新をデプロイ
+- 単一のコードベースでクロスプラットフォームのアプリケーションを作成
+- ホーム画面へのインストールやプッシュ通知など、ネイティブのような機能を提供
## Next.jsでPWAを作成する {#creating-a-pwa-with-next-js}
-### 1. Webアプリマニフェストの作成 {#1-creating-the-web-app-manifest}
+### 1. Web App Manifestの作成 {#1-creating-the-web-app-manifest}
-Next.jsは、App Routerを使用して[webアプリマニフェスト](/docs/app/api-reference/file-conventions/metadata/manifest)を作成するための組み込みサポートを提供しています。静的または動的なマニフェストファイルを作成できます：
+Next.jsは、App Routerを使用して[web app manifest](/docs/app/api-reference/file-conventions/metadata/manifest)を作成するための組み込みサポートを提供しています。静的または動的なmanifestファイルを作成できます：
例えば、`app/manifest.ts`または`app/manifest.json`ファイルを作成します：
@@ -28,7 +28,7 @@ Next.jsは、App Routerを使用して[webアプリマニフェスト](/docs/app
```tsx title="app/manifest.ts" switcher
import type { MetadataRoute } from 'next'
-// マニフェストを返す関数
+// PWAのメタデータを定義する関数をエクスポート
export default function manifest(): MetadataRoute.Manifest {
return {
name: 'Next.js PWA',
@@ -58,7 +58,7 @@ export default function manifest(): MetadataRoute.Manifest {
```jsx title="app/manifest.js" switcher
-// マニフェストを返す関数
+// PWAのメタデータを定義する関数をエクスポート
export default function manifest() {
return {
name: 'Next.js PWA',
@@ -87,13 +87,13 @@ export default function manifest() {
-このファイルには、名前、アイコン、およびユーザーのデバイスにアイコンとして表示される方法に関する情報を含める必要があります。これにより、ユーザーはPWAをホーム画面にインストールし、ネイティブアプリのような体験を提供できます。
+このファイルには、名前、アイコン、ユーザーのデバイス上でアイコンとして表示される方法に関する情報が含まれている必要があります。これにより、ユーザーはPWAをホーム画面にインストールし、ネイティブアプリのような体験を提供できます。
-[faviconジェネレーター](https://realfavicongenerator.net/)のようなツールを使用して、さまざまなアイコンセットを作成し、生成されたファイルを`public/`フォルダに配置できます。
+[favicon generators](https://realfavicongenerator.net/)のようなツールを使用して、さまざまなアイコンセットを作成し、生成されたファイルを`public/`フォルダに配置できます。
-### 2. Webプッシュ通知の実装 {#2-implementing-web-push-notifications}
+### 2. Web Push Notificationsの実装 {#2-implementing-web-push-notifications}
-Webプッシュ通知は、次のすべての最新ブラウザでサポートされています：
+Web Push Notificationsは、以下を含むすべての最新ブラウザでサポートされています：
- ホーム画面にインストールされたアプリケーション用のiOS 16.4+
- macOS 13以降のSafari 16
@@ -102,9 +102,9 @@ Webプッシュ通知は、次のすべての最新ブラウザでサポート
これにより、PWAはネイティブアプリの代替として有効です。特に、オフラインサポートを必要とせずにインストールプロンプトをトリガーできます。
-Webプッシュ通知を使用すると、ユーザーがアプリを積極的に使用していないときでも再エンゲージできます。Next.jsアプリケーションでの実装方法は次のとおりです：
+Web Push Notificationsを使用すると、ユーザーがアプリを積極的に使用していないときでも再エンゲージできます。Next.jsアプリケーションでの実装方法は次のとおりです：
-まず、`app/page.tsx`にメインページコンポーネントを作成します。理解を深めるために小さな部分に分けて説明します。まず、必要なインポートとユーティリティを追加します。参照されているServer Actionsがまだ存在しないことは問題ありません：
+まず、`app/page.tsx`にメインページコンポーネントを作成します。理解を深めるために、これを小さな部分に分解します。まず、必要なインポートとユーティリティを追加します。参照されているServer Actionsがまだ存在しないことは問題ありません：
```tsx switcher
'use client'
@@ -203,7 +203,7 @@ function PushNotificationManager() {
}
if (!isSupported) {
- return このブラウザではプッシュ通知はサポートされていません。
+ return このブラウザではプッシュ通知がサポートされていません。
}
return (
@@ -280,7 +280,7 @@ function PushNotificationManager() {
}
if (!isSupported) {
- return このブラウザではプッシュ通知はサポートされていません。
;
+ return このブラウザではプッシュ通知がサポートされていません。
;
}
return (
@@ -309,7 +309,7 @@ function PushNotificationManager() {
}
```
-最後に、iOSデバイスにホーム画面にインストールするよう指示するメッセージを表示するコンポーネントを作成し、アプリがすでにインストールされている場合はこれを表示しないようにします。
+最後に、iOSデバイスにホーム画面にインストールするよう指示するメッセージを表示するコンポーネントを作成し、アプリがすでにインストールされていない場合にのみ表示します。
```tsx switcher
function InstallPrompt() {
@@ -339,12 +339,12 @@ function InstallPrompt() {
{' '}
⎋{' '}
- てから「ホーム画面に追加」を選択します
+ てから「ホーム画面に追加」
{' '}
➕{' '}
- 。
+ を選択してください。
)}
@@ -389,11 +389,12 @@ function InstallPrompt() {
{' '}
⎋{' '}
- てから「ホーム画面に追加」を選択します
+ てから「ホーム画面に追加」
{' '}
➕{' '}
- 。
+
+ を選択してください。
)}
@@ -437,7 +438,7 @@ let subscription: PushSubscription | null = null
export async function subscribeUser(sub: PushSubscription) {
subscription = sub
// 本番環境では、購読をデータベースに保存することをお勧めします
- // 例：await db.subscriptions.create({ data: sub })
+ // 例: await db.subscriptions.create({ data: sub })
return { success: true }
}
@@ -445,7 +446,7 @@ export async function subscribeUser(sub: PushSubscription) {
export async function unsubscribeUser() {
subscription = null
// 本番環境では、データベースから購読を削除することをお勧めします
- // 例：await db.subscriptions.delete({ where: { ... } })
+ // 例: await db.subscriptions.delete({ where: { ... } })
return { success: true }
}
@@ -493,7 +494,7 @@ let subscription= null;
export async function subscribeUser(sub) {
subscription = sub;
// 本番環境では、購読をデータベースに保存することをお勧めします
- // 例：await db.subscriptions.create({ data: sub })
+ // 例: await db.subscriptions.create({ data: sub })
return { success: true };
}
@@ -501,7 +502,7 @@ export async function subscribeUser(sub) {
export async function unsubscribeUser() {
subscription = null;
// 本番環境では、データベースから購読を削除することをお勧めします
- // 例：await db.subscriptions.delete({ where: { ... } })
+ // 例: await db.subscriptions.delete({ where: { ... } })
return { success: true };
}
@@ -558,12 +559,12 @@ NEXT_PUBLIC_VAPID_PUBLIC_KEY=your_public_key_here
VAPID_PRIVATE_KEY=your_private_key_here
```
-### 5. サービスワーカーの作成 {#5-creating-a-service-worker}
+### 5. Service Workerの作成 {#5-creating-a-service-worker}
サービスワーカー用に`public/sw.js`ファイルを作成します：
```js title="public/sw.js"
-// プッシュイベントのリスナー
+// プッシュイベントをリッスン
self.addEventListener('push', function (event) {
if (event.data) {
const data = event.data.json()
@@ -581,7 +582,7 @@ self.addEventListener('push', function (event) {
}
})
-// 通知クリックイベントのリスナー
+// 通知クリックイベントをリッスン
self.addEventListener('notificationclick', function (event) {
console.log('通知クリックを受信しました。')
event.notification.close()
@@ -591,11 +592,11 @@ self.addEventListener('notificationclick', function (event) {
このサービスワーカーは、カスタム画像と通知をサポートします。受信したプッシュイベントと通知クリックを処理します。
-- 通知のカスタムアイコンを`icon`と`badge`プロパティを使用して設定できます。
-- `vibrate`パターンを調整して、サポートされているデバイスでカスタム振動アラートを作成できます。
-- `data`プロパティを使用して、通知に追加のデータを添付できます。
+- 通知のカスタムアイコンは、`icon`と`badge`プロパティを使用して設定できます。
+- `vibrate`パターンは、サポートされているデバイスでカスタム振動アラートを作成するために調整できます。
+- 追加のデータは、`data`プロパティを使用して通知に添付できます。
-サービスワーカーが異なるデバイスやブラウザで期待どおりに動作することを確認するために、十分にテストしてください。また、`notificationclick`イベントリスナー内の`'https://your-website.com'`リンクをアプリケーションの適切なURLに更新することを忘れないでください。
+サービスワーカーがさまざまなデバイスやブラウザで期待どおりに動作することを確認するために、十分にテストしてください。また、`notificationclick`イベントリスナー内の`'https://your-website.com'`リンクをアプリケーションの適切なURLに更新することを忘れないでください。
### 6. ホーム画面への追加 {#6-adding-to-home-screen}
@@ -603,7 +604,7 @@ self.addEventListener('notificationclick', function (event) {
モバイルのホーム画面にアプリケーションをインストールできるようにするには、次の要件を満たす必要があります：
-1. 有効なwebアプリマニフェスト（ステップ1で作成）
+1. 有効なweb app manifest（ステップ1で作成）
2. HTTPSで提供されるウェブサイト
これらの条件が満たされると、最新のブラウザは自動的にユーザーにインストールプロンプトを表示します。[`beforeinstallprompt`](https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeinstallprompt_event)を使用してカスタムインストールボタンを提供することもできますが、これはクロスブラウザおよびプラットフォームではないため（Safari iOSでは動作しません）、お勧めしません。
@@ -621,7 +622,7 @@ self.addEventListener('notificationclick', function (event) {
### 8. アプリケーションのセキュリティ {#8-securing-your-application}
-セキュリティは、特にPWAにおいて、Webアプリケーションの重要な側面です。Next.jsでは、`next.config.js`ファイルを使用してセキュリティヘッダーを設定できます。例えば：
+セキュリティは、特にPWAにおいて、すべてのWebアプリケーションの重要な側面です。Next.jsでは、`next.config.js`ファイルを使用してセキュリティヘッダーを設定できます。例えば：
```js title="next.config.js"
module.exports = {
@@ -671,18 +672,18 @@ module.exports = {
1. グローバルヘッダー（すべてのルートに適用）：
1. `X-Content-Type-Options: nosniff`：MIMEタイプのスニッフィングを防止し、悪意のあるファイルアップロードのリスクを軽減します。
2. `X-Frame-Options: DENY`：クリックジャッキング攻撃から保護し、サイトがiframeに埋め込まれるのを防ぎます。
- 3. `Referrer-Policy: strict-origin-when-cross-origin`：リクエストに含まれるリファラー情報の量を制御し、セキュリティと機能性のバランスを取ります。
+ 3. `Referrer-Policy: strict-origin-when-cross-origin`：リクエストに含まれるリファラー情報の量を制御し、セキュリティと機能のバランスを取ります。
2. サービスワーカー固有のヘッダー：
1. `Content-Type: application/javascript; charset=utf-8`：サービスワーカーが正しくJavaScriptとして解釈されることを保証します。
- 2. `Cache-Control: no-cache, no-store, must-revalidate`：サービスワーカーのキャッシュを防止し、常に最新バージョンをユーザーに提供します。
- 3. `Content-Security-Policy: default-src 'self'; script-src 'self'`：サービスワーカーに対して厳格なコンテンツセキュリティポリシーを実装し、同じオリジンからのスクリプトのみを許可します。
+ 2. `Cache-Control: no-cache, no-store, must-revalidate`：サービスワーカーのキャッシュを防止し、ユーザーが常に最新バージョンを取得することを保証します。
+ 3. `Content-Security-Policy: default-src 'self'; script-src 'self'`：サービスワーカーのための厳格なコンテンツセキュリティポリシーを実装し、同じオリジンからのスクリプトのみを許可します。
-Next.jsでの[コンテンツセキュリティポリシーの定義](/docs/app/building-your-application/configuring/content-security-policy)について詳しく学びましょう。
+Next.jsでの[Content Security Policiesの定義](/docs/app/building-your-application/configuring/content-security-policy)について詳しく学びましょう。
## 次のステップ {#next-steps}
-1. **PWAの機能を探る**：PWAはさまざまなWeb APIを活用して高度な機能を提供できます。バックグラウンド同期、定期的なバックグラウンド同期、またはファイルシステムアクセスAPIなどの機能を探求して、アプリケーションを強化することを検討してください。PWAの機能に関するインスピレーションや最新情報については、[What PWA Can Do Today](https://whatpwacando.today/)などのリソースを参照できます。
-2. **静的エクスポート**：アプリケーションがサーバーを実行せず、代わりにファイルの静的エクスポートを使用する必要がある場合、Next.jsの設定を更新してこの変更を有効にできます。[Next.js静的エクスポートのドキュメント](/docs/app/building-your-application/deploying/static-exports)で詳しく学びましょう。ただし、Server Actionsから外部APIの呼び出しに移行し、定義されたヘッダーをプロキシに移動する必要があります。
+1. **PWAの機能を探る**：PWAはさまざまなWeb APIを活用して高度な機能を提供できます。バックグラウンド同期、定期的なバックグラウンド同期、またはFile System Access APIなどの機能を探求して、アプリケーションを強化することを検討してください。PWAの機能に関するインスピレーションや最新情報については、[What PWA Can Do Today](https://whatpwacando.today/)などのリソースを参照できます。
+2. **静的エクスポート**：アプリケーションがサーバーを実行せず、代わりにファイルの静的エクスポートを使用する必要がある場合は、Next.jsの設定を更新してこの変更を有効にできます。[Next.js Static Exportドキュメント](/docs/app/guides/static-exports)で詳しく学びましょう。ただし、Server Actionsから外部APIの呼び出しに移行し、定義されたヘッダーをプロキシに移動する必要があります。
3. **オフラインサポート**：オフライン機能を提供するための1つのオプションは、Next.jsと[Serwist](https://github.com/serwist/serwist)を使用することです。Next.jsとSerwistを統合する方法の例は、[ドキュメント](https://github.com/serwist/serwist/tree/main/examples/next-basic)で見つけることができます。**注意**：このプラグインは現在、webpackの設定が必要です。
4. **セキュリティの考慮事項**：サービスワーカーが適切に保護されていることを確認してください。これには、HTTPSの使用、プッシュメッセージのソースの検証、適切なエラーハンドリングの実装が含まれます。
-5. **ユーザーエクスペリエンス**：ユーザーのブラウザが特定のPWA機能をサポートしていない場合でも、アプリが正常に動作するように、プログレッシブエンハンスメント技術を実装することを検討してください。
+5. **ユーザーエクスペリエンス**：ユーザーのブラウザが特定のPWA機能をサポートしていない場合でも、アプリがうまく動作するように、プログレッシブエンハンスメント技術を実装することを検討してください。
diff --git a/docs/01-app/03-building-your-application/index.mdx b/docs/01-app/03-building-your-application/index.mdx
index 69d07e4d..891c2ab3 100644
--- a/docs/01-app/03-building-your-application/index.mdx
+++ b/docs/01-app/03-building-your-application/index.mdx
@@ -3,20 +3,20 @@ title: 'アプリケーションの構築'
description: 'Next.jsの機能を使ってアプリケーションを構築する方法を学びましょう。'
---
-{/* このドキュメントの内容は、app router と pages router の間で共有されています。Pages Router に特有の内容を追加するには、`Content` コンポーネントを使用できます。共有される内容はコンポーネントでラップしないでください。 */}
+{/* このドキュメントの内容は、app routerとpages routerの間で共有されています。Pages Routerに特化した内容を追加するには、`Content`コンポーネントを使用できます。共有される内容はコンポーネントでラップしないでください。 */}
-Next.jsは、柔軟なフルスタックWebアプリケーションを作成するための基盤を提供します。**アプリケーションの構築**ガイドでは、これらの機能をどのように使用し、アプリケーションの動作をどのようにカスタマイズするかを説明します。
+Next.jsは、柔軟でフルスタックなWebアプリケーションを作成するための基盤を提供します。**アプリケーションの構築**ガイドでは、これらの機能をどのように使用し、アプリケーションの動作をどのようにカスタマイズするかを説明します。
セクションとページは基本から高度なものへと順に整理されているため、Next.jsアプリケーションを構築する際にステップバイステップで進めることができます。ただし、どの順序で読んでもよく、あなたのユースケースに適したページに直接進むこともできます。
-Next.jsを初めて使用する場合は、[ルーティング](/docs/app/building-your-application/routing)、[レンダリング](/docs/app/building-your-application/rendering)、[データフェッチング](/docs/app/building-your-application/data-fetching)、[スタイリング](/docs/app/building-your-application/styling)のセクションから始めることをお勧めします。これらのセクションは、Next.jsとWebの基本概念を紹介し、スタートを切るのに役立ちます。その後、[最適化](/docs/app/building-your-application/optimizing)や[設定](/docs/app/building-your-application/configuring)などの他のセクションを深く掘り下げることができます。最後に、準備が整ったら、[デプロイ](/docs/app/building-your-application/deploying)と[アップグレード](/docs/app/guides/upgrading)のセクションを確認してください。
+Next.jsを初めて使用する場合は、[ルーティング](/docs/app/building-your-application/routing)、[レンダリング](/docs/app/building-your-application/rendering)、[データフェッチング](/docs/app/building-your-application/data-fetching)、[スタイリング](/docs/app/building-your-application/styling)のセクションから始めることをお勧めします。これらのセクションは、Next.jsとWebの基本概念を紹介し、スタートを切るのに役立ちます。その後、[最適化](/docs/app/building-your-application/optimizing)や[設定](/docs/app/building-your-application/configuring)などの他のセクションに深く入り込むことができます。最後に、準備が整ったら、[デプロイ](/docs/app/getting-started/deploying)と[アップグレード](/docs/app/guides/upgrading)のセクションを確認してください。
-Next.jsを初めて使用する場合は、[ルーティング](https://nextjs.org/docs/canary/pages/building-your-application/routing)、[レンダリング](https://nextjs.org/docs/canary/pages/building-your-application/rendering)、[データフェッチング](https://nextjs.org/docs/canary/pages/building-your-application/data-fetching)、[スタイリング](https://nextjs.org/docs/canary/pages/building-your-application/styling)のセクションから始めることをお勧めします。これらのセクションは、Next.jsとWebの基本概念を紹介し、スタートを切るのに役立ちます。その後、[最適化](https://nextjs.org/docs/canary/pages/building-your-application/optimizing)や[設定](https://nextjs.org/docs/canary/pages/building-your-application/configuring)などの他のセクションを深く掘り下げることができます。最後に、準備が整ったら、[デプロイ](https://nextjs.org/docs/canary/pages/building-your-application/deploying)と[アップグレード](https://nextjs.org/docs/canary/pages/guides/upgrading)のセクションを確認してください。
+Next.jsを初めて使用する場合は、[ルーティング](https://nextjs.org/docs/canary/pages/building-your-application/routing)、[レンダリング](https://nextjs.org/docs/canary/pages/building-your-application/rendering)、[データフェッチング](https://nextjs.org/docs/canary/pages/building-your-application/data-fetching)、[スタイリング](https://nextjs.org/docs/canary/pages/building-your-application/styling)のセクションから始めることをお勧めします。これらのセクションは、Next.jsとWebの基本概念を紹介し、スタートを切るのに役立ちます。その後、[最適化](https://nextjs.org/docs/canary/pages/building-your-application/optimizing)や[設定](https://nextjs.org/docs/canary/pages/building-your-application/configuring)などの他のセクションに深く入り込むことができます。最後に、準備が整ったら、[デプロイ](https://nextjs.org/docs/canary/pages/getting-started/deploying)と[アップグレード](https://nextjs.org/docs/canary/pages/guides/upgrading)のセクションを確認してください。
diff --git a/docs/01-app/05-api-reference/05-config/01-next-config-js/assetPrefix.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/assetPrefix.mdx
index 9b94920f..fed4f816 100644
--- a/docs/01-app/05-api-reference/05-config/01-next-config-js/assetPrefix.mdx
+++ b/docs/01-app/05-api-reference/05-config/01-next-config-js/assetPrefix.mdx
@@ -1,32 +1,32 @@
---
title: 'assetPrefix'
-description: 'CDNを設定するためにassetPrefix設定オプションを使用する方法を学びましょう'
+description: 'CDNを設定するためのassetPrefix設定オプションの使い方を学びましょう。'
---
-{/* このドキュメントの内容はapp routerとpages routerの間で共有されています。Pages Routerに特化したコンテンツを追加するには、`コンテンツ`コンポーネントを使用できます。共有コンテンツはコンポーネントでラップしないでください。 */}
+{/* このドキュメントの内容はapp routerとpages routerの両方で共有されています。Pages Routerに特化した内容を追加するには、`Content`コンポーネントを使用できます。共有される内容はコンポーネントでラップしないでください。 */}
-> **注意**：[Vercelにデプロイする](/docs/app/building-your-application/deploying)と、あなたのNext.jsプロジェクトに自動的にグローバルCDNが設定されます；
-> Asset Prefixを手動で設定する必要はありません。
+> **注意**: [Vercelへのデプロイ](/docs/app/getting-started/deploying)は、Next.jsプロジェクトのためにグローバルCDNを自動的に設定します。
+> 手動でAsset Prefixを設定する必要はありません。
-> **注意**：[Vercelにデプロイする](https://nextjs.org/docs/canary/pages/building-your-application/deploying)と、あなたのNext.jsプロジェクトに自動的にグローバルCDNが設定されます；
-> Asset Prefixを手動で設定する必要はありません。
+> **注意**: [Vercelへのデプロイ](https://nextjs.org/docs/canary/pages/getting-started/deploying)は、Next.jsプロジェクトのためにグローバルCDNを自動的に設定します。
+> 手動でAsset Prefixを設定する必要はありません。
-> **Good to know**：Next.js 9.5+では、カスタマイズ可能な[Base Path](/docs/app/api-reference/config/next-config-js/basePath)のサポートが追加され、`/docs`のようなサブパスでアプリケーションをホスティングするのに適しています；
-> このユースケースでは、カスタムAsset Prefixを使用することをお勧めしません。
+> **Good to know**: Next.js 9.5+では、カスタマイズ可能な[Base Path](/docs/app/api-reference/config/next-config-js/basePath)のサポートが追加されました。これは、`/docs`のようなサブパスでアプリケーションをホスティングするのに適しています。
+> このユースケースでは、カスタムAsset Prefixの使用をお勧めしません。
## CDNの設定 {#set-up-a-cdn}
-[CDN](https://en.wikipedia.org/wiki/Content_delivery_network)を設定するには、asset prefixを設定し、Next.jsがホストされているドメインにCDNのオリジンを解決するように設定します；
+[CDN](https://en.wikipedia.org/wiki/Content_delivery_network)を設定するには、asset prefixを設定し、Next.jsがホストされているドメインに解決するようにCDNのオリジンを設定します。
-`next.config.mjs`を開き、[フェーズ](/docs/app/api-reference/config/next-config-js#async-configuration)に基づいてassetPrefix設定を追加します：
+`next.config.mjs`を開き、[phase](/docs/app/api-reference/config/next-config-js#async-configuration)に基づいて`assetPrefix`設定を追加します：
```js title="next.config.mjs"
// @ts-check
@@ -44,32 +44,32 @@ export default (phase) => {
}
```
-Next.jsは、自動的に`/_next/`パス（`.next/static/`フォルダー）からロードするJavaScriptとCSSファイルに対して、あなたのasset prefixを使用します；例えば、上記の設定を使用すると、JSチャンクのリクエストは次のようになります：
+Next.jsは、`/_next/`パス（`.next/static/`フォルダ）から読み込むJavaScriptおよびCSSファイルに対して自動的にasset prefixを使用します。たとえば、上記の設定では、次のJSチャンクのリクエストが：
```
/_next/static/chunks/4b9b41aaa062cbbfeff4add70f256968c51ece5d.4d708494b3aed70c04f0.js
```
-これは代わりに次のようになります：
+次のようになります：
```
https://cdn.mydomain.com/_next/static/chunks/4b9b41aaa062cbbfeff4add70f256968c51ece5d.4d708494b3aed70c04f0.js
```
-指定したCDNにファイルをアップロードするための具体的な設定は、選択するCDNに依存します；CDNにホストする必要がある唯一のフォルダーは、`.next/static/`の内容であり、上記のURLリクエストが示すように`_next/static/`としてアップロードする必要があります。**`.next/`フォルダーの残りをアップロードしないでください**；あなたのサーバーコードや他の設定を公開するべきではありません。
+特定のCDNにファイルをアップロードするための正確な設定は、選択したCDNによって異なります。CDNにホストする必要がある唯一のフォルダは、`.next/static/`の内容であり、上記のURLリクエストが示すように`_next/static/`としてアップロードする必要があります。**他の`.next/`フォルダをアップロードしないでください**。サーバーコードやその他の設定を公開しないようにするためです。
-`assetPrefix`は、`_next/static`へのリクエストをカバーしますが、次のパスには影響しません：
+`assetPrefix`は`_next/static`へのリクエストをカバーしますが、次のパスには影響しません：
-- [public](/docs/app/building-your-application/optimizing/static-assets)フォルダー内のファイル；これらのアセットをCDN経由で提供したい場合は、自分でプレフィックスを導入する必要があります
+- [public](/docs/app/building-your-application/optimizing/static-assets)フォルダ内のファイル；これらのアセットをCDN経由で提供したい場合は、自分でプレフィックスを導入する必要があります
-- [public](https://nextjs.org/docs/canary/pages/building-your-application/optimizing/static-assets)フォルダー内のファイル；これらのアセットをCDN経由で提供したい場合は、自分でプレフィックスを導入する必要があります
+- [public](https://nextjs.org/docs/canary/pages/building-your-application/optimizing/static-assets)フォルダ内のファイル；これらのアセットをCDN経由で提供したい場合は、自分でプレフィックスを導入する必要があります
- `getServerSideProps`ページの`/_next/data/`リクエスト。これらのリクエストは静的ではないため、常にメインドメインに対して行われます。
-- `getStaticProps`ページの`/_next/data/`リクエスト。これらのリクエストは、[incremental static regeneration](https://nextjs.org/docs/canary/pages/building-your-application/data-fetching/incremental-static-regeneration)をサポートするため、使用していない場合でもメインドメインに対して行われます（一貫性のため）。
+- `getStaticProps`ページの`/_next/data/`リクエスト。これらのリクエストは、[Incremental Static Generation](https://nextjs.org/docs/canary/pages/building-your-application/data-fetching/incremental-static-regeneration)をサポートするために、使用していなくても一貫性のために常にメインドメインに対して行われます。
diff --git a/docs/01-app/05-api-reference/05-config/01-next-config-js/exportPathMap.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/exportPathMap.mdx
index 3468a614..025b9b9a 100644
--- a/docs/01-app/05-api-reference/05-config/01-next-config-js/exportPathMap.mdx
+++ b/docs/01-app/05-api-reference/05-config/01-next-config-js/exportPathMap.mdx
@@ -1,22 +1,22 @@
---
title: 'exportPathMap'
-description: '`next export` を使用する際にHTMLファイルとしてエクスポートされるページをカスタマイズ'
-version: 'レガシー'
+description: '`next export`を使用する際にHTMLファイルとしてエクスポートされるページをカスタマイズします。'
+version: 'legacy'
---
-{/* このドキュメントの内容は、app router と pages router の間で共有されています。Pages Router に特有のコンテンツを追加するには `Content` コンポーネントを使用できます。共有コンテンツはコンポーネントでラップしないでください。 */}
+{/* このドキュメントの内容はapp routerとpages routerの間で共有されています。Pages Routerに特有の内容を追加するには、`Content`コンポーネントを使用できます。共有される内容はコンポーネントでラップしないでください。 */}
-> この機能は `next export` に特有のもので、現在は `pages` での `getStaticPaths` か、`app` での `generateStaticParams` が推奨されており、**非推奨** となっています。
+> この機能は`next export`に特有のもので、現在は`pages`での`getStaticPaths`や`app`での`generateStaticParams`が推奨されています。
-`exportPathMap` は、エクスポート時に使用されるリクエストパスとページのマッピングを指定することができます。`exportPathMap` で定義されたパスは、[`next dev`](/docs/app/api-reference/cli/next#next-dev-options) を使用する際にも使用可能です。
+`exportPathMap`を使用すると、エクスポート時に使用されるリクエストパスとページのマッピングを指定できます。`exportPathMap`で定義されたパスは、[`next dev`](/docs/app/api-reference/cli/next#next-dev-options)を使用する際にも利用可能です。
-以下のページを持つアプリのために、カスタムの `exportPathMap` を作成する例から始めましょう：
+次に、以下のページを持つアプリのカスタム`exportPathMap`を作成する例を示します：
- `pages/index.js`
- `pages/about.js`
- `pages/post.js`
-`next.config.js` を開いて、次のように `exportPathMap` の設定を追加します：
+`next.config.js`を開き、以下の`exportPathMap`設定を追加します：
```js title="next.config.js"
module.exports = {
@@ -35,30 +35,30 @@ module.exports = {
}
```
-> **Good to know**：`exportPathMap` の `query` フィールドは、[自動的に静的に最適化されたページ](https://nextjs.org/docs/canary/pages/building-your-application/rendering/automatic-static-optimization)や [`getStaticProps` ページ](https://nextjs.org/docs/canary/pages/building-your-application/data-fetching/get-static-props)とは使用できません；これらはビルド時にHTMLファイルとしてレンダリングされ、追加のクエリ情報は `next export` 中に提供できません。
+> **Good to know**: `exportPathMap`の`query`フィールドは、[自動的に静的最適化されたページ](https://nextjs.org/docs/canary/pages/building-your-application/rendering/automatic-static-optimization)や[`getStaticProps`ページ](https://nextjs.org/docs/canary/pages/building-your-application/data-fetching/get-static-props)では使用できません。これらはビルド時にHTMLファイルとしてレンダリングされ、`next export`中に追加のクエリ情報を提供することはできません。
-その後、ページはHTMLファイルとしてエクスポートされます。たとえば、`/about` は `/about.html` になります。
+その後、ページはHTMLファイルとしてエクスポートされます。例えば、`/about`は`/about.html`になります。
-`exportPathMap` は2つの引数を受け取る `async` 関数です：最初のものは Next.js が使用するデフォルトマップである `defaultPathMap` です。2番目の引数は次のフィールドを持つオブジェクトです：
+`exportPathMap`は2つの引数を受け取る`async`関数です。最初の引数はNext.jsが使用するデフォルトのマップである`defaultPathMap`です。2番目の引数は以下のフィールドを持つオブジェクトです：
-- `dev` - 開発中に `exportPathMap` が呼ばれるときは `true`；`next export` を実行するときは `false`。開発中には `exportPathMap` を使用してルートを定義します。
+- `dev` - `exportPathMap`が開発中に呼び出されている場合は`true`。`next export`を実行している場合は`false`。開発中は`exportPathMap`がルートを定義するために使用されます。
- `dir` - プロジェクトディレクトリへの絶対パス
-- `outDir` - `out/` ディレクトリへの絶対パス（[`-o`](#customizing-the-output-directory) で設定可能）。`dev` が `true` の場合、`outDir` の値は `null` です。
-- `distDir` - `.next/` ディレクトリへの絶対パス（[`distDir`](https://nextjs.org/docs/canary/pages/api-reference/config/next-config-js/distDir) 設定で設定可能）
+- `outDir` - `out/`ディレクトリへの絶対パス（[`-o`](#customizing-the-output-directory)で設定可能）。`dev`が`true`の場合、`outDir`の値は`null`になります。
+- `distDir` - `.next/`ディレクトリへの絶対パス（[`distDir`](https://nextjs.org/docs/canary/pages/api-reference/config/next-config-js/distDir)設定で設定可能）
- `buildId` - 生成されたビルドID
-返されるオブジェクトは、ページのマップであり、`key` が `pathname`、`value` が次のフィールドを受け入れるオブジェクトです：
+返されるオブジェクトはページのマップで、`key`が`pathname`で、`value`が以下のフィールドを受け入れるオブジェクトです：
-- `page`: `String` - レンダリングする `pages` ディレクトリ内のページ
-- `query`: `Object` - プリレンダリング時に `getInitialProps` に渡される `query` オブジェクト。デフォルトは `{}`
+- `page`: `String` - レンダリングする`pages`ディレクトリ内のページ
+- `query`: `Object` - プリレンダリング時に`getInitialProps`に渡される`query`オブジェクト。デフォルトは`{}`
-> エクスポートされた `pathname` は、（たとえば `/readme.md` のように）ファイル名でも可能ですが、それが `.html` でない場合、そのコンテンツを提供する際に `Content-Type` ヘッダーを `text/html` に設定する必要があるかもしれません。
+> エクスポートされた`pathname`はファイル名（例えば、`/readme.md`）にすることもできますが、内容を提供する際に`.html`と異なる場合は`Content-Type`ヘッダーを`text/html`に設定する必要があるかもしれません。
-## 末尾のスラッシュを追加する {#adding-a-trailing-slash}
+## トレーリングスラッシュを追加する {#adding-a-trailing-slash}
-Next.js を設定してページを `index.html` ファイルとしてエクスポートし、末尾のスラッシュを必要とするようにすることが可能です。`/about` は `/about/index.html` になり、`/about/` からルーティング可能になります。これは Next.js 9 より以前のデフォルトの動作でした。
+Next.jsを設定してページを`index.html`ファイルとしてエクスポートし、トレーリングスラッシュを必要とするようにすることができます。`/about`は`/about/index.html`となり、`/about/`でルーティング可能です。これはNext.js 9以前のデフォルトの動作でした。
-元に戻して末尾のスラッシュを追加するには、`next.config.js` を開き、`trailingSlash` 設定を有効にします：
+トレーリングスラッシュを追加するには、`next.config.js`を開き、`trailingSlash`設定を有効にします：
```js title="next.config.js"
module.exports = {
@@ -66,22 +66,22 @@ module.exports = {
}
```
-## 出力ディレクトリをカスタマイズする {#customizing-the-output-directory}
+## 出力ディレクトリのカスタマイズ {#customizing-the-output-directory}
-[`next export`](/docs/app/building-your-application/deploying/static-exports) はデフォルトで `out` を出力ディレクトリとして使用しますが、次のように `-o` 引数を使用してカスタマイズできます：
+[`next export`](/docs/app/guides/static-exports)はデフォルトで`out`を出力ディレクトリとして使用しますが、以下のように`-o`引数を使用してカスタマイズできます：
-[`next export`](https://nextjs.org/docs/canary/pages/building-your-application/deploying/static-exports) はデフォルトで `out` を出力ディレクトリとして使用しますが、次のように `-o` 引数を使用してカスタマイズできます：
+[`next export`](https://nextjs.org/docs/canary/pages/guides/static-exports)はデフォルトで`out`を出力ディレクトリとして使用しますが、以下のように`-o`引数を使用してカスタマイズできます：
-```bash title="ターミナル"
+```bash title="Terminal"
next export -o outdir
```
-> **警告**：`exportPathMap` の使用は非推奨であり、`pages` 内の `getStaticPaths` によって上書きされます；これらを一緒に使用することは推奨しません。
+> **Warning**: `exportPathMap`の使用は非推奨であり、`pages`内の`getStaticPaths`によって上書きされます。これらを一緒に使用することはお勧めしません。
diff --git a/docs/01-app/05-api-reference/05-config/01-next-config-js/incrementalCacheHandlerPath.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/incrementalCacheHandlerPath.mdx
index c2beb3a7..61bdf4fe 100644
--- a/docs/01-app/05-api-reference/05-config/01-next-config-js/incrementalCacheHandlerPath.mdx
+++ b/docs/01-app/05-api-reference/05-config/01-next-config-js/incrementalCacheHandlerPath.mdx
@@ -1,63 +1,63 @@
---
title: 'カスタム Next.js キャッシュハンドラー'
nav_title: 'cacheHandler'
-description: 'データの保存と再検証に使用する Next.js のキャッシュを、Redis、Memcached、その他の外部サービスに設定できます。'
+description: 'Redis、Memcached、その他の外部サービスを使用してデータを保存および再検証するための Next.js キャッシュを設定します。'
---
-ページのキャッシュと再検証（Incremental Static Regenerationを使用）では、同じ共有キャッシュを使用します。 [Vercel にデプロイすると](https://vercel.com/docs/incremental-static-regeneration?utm_source=next-site&utm_medium=docs&utm_campaign=next-website)、ISR キャッシュは自動的に耐久性のあるストレージに永続化されます。
+ページのキャッシュと再検証（Incremental Static Regeneration を使用）は、同じ共有キャッシュを使用します。[Vercel にデプロイする際](https://vercel.com/docs/incremental-static-regeneration?utm_source=next-site&utm_medium=docs&utm_campaign=next-website)、ISR キャッシュは自動的に耐久性のあるストレージに保存されます。
-自己ホスティングの場合、ISR キャッシュは Next.js サーバー上のファイルシステム（ディスク）に保存されます。これは、PagesとApp Routerの両方を使用して自己ホスティングする場合、自動的に動作します。
+セルフホスティングの場合、ISR キャッシュは Next.js サーバーのファイルシステム（ディスク上）に保存されます。これは、Pages Router と App Router の両方を使用してセルフホスティングする場合に自動的に機能します。
-キャッシュされたページとデータを耐久性のあるストレージに永続化したり、Next.js アプリケーションの複数のコンテナやインスタンス間でキャッシュを共有したりしたい場合は、Next.js のキャッシュの場所を設定できます。
+キャッシュされたページとデータを耐久性のあるストレージに保存したり、Next.js アプリケーションの複数のコンテナやインスタンス間でキャッシュを共有したりする場合は、Next.js キャッシュの場所を設定できます。
```js title="next.config.js"
module.exports = {
cacheHandler: require.resolve('./cache-handler.js'),
- cacheMaxMemorySize: 0, // デフォルトのメモリ内キャッシュを無効にします
+ cacheMaxMemorySize: 0, // デフォルトのメモリ内キャッシュを無効にする
}
```
-[カスタムキャッシュハンドラー](/docs/app/building-your-application/deploying#configuring-caching)の例を確認し、実装について詳しく学んでください。
+[カスタムキャッシュハンドラー](/docs/app/guides/self-hosting#configuring-caching)の例を参照し、実装について詳しく学んでください。
-## APIリファレンス {#api-reference}
+## API リファレンス {#api-reference}
-キャッシュハンドラーは以下のメソッドを実装できます：`get`、`set`、`revalidateTag`
+キャッシュハンドラーは、次のメソッドを実装できます：`get`、`set`、および `revalidateTag`。
### `get()` {#get}
-| パラメーター | 型 | 説明 |
-| ------------ | -------- | -------------------------------- |
-| `key` | `string` | キャッシュされている値のキーです |
+| パラメーター | 型 | 説明 |
+| ------------ | -------- | -------------------------- |
+| `key` | `string` | キャッシュされた値のキー。 |
-キャッシュされた値を返します。見つからなければ `null` を返します。
+キャッシュされた値を返すか、見つからない場合は `null` を返します。
### `set()` {#set}
-| パラメーター | 型 | 説明 |
-| ------------ | ------------------ | ---------------------------- |
-| `key` | `string` | データを保存するキーです |
-| `data` | Data または `null` | キャッシュするデータです |
-| `ctx` | `{ tags: [] }` | 提供されるキャッシュタグです |
+| パラメーター | 型 | 説明 |
+| ------------ | ------------------ | -------------------------- |
+| `key` | `string` | データを保存するキー。 |
+| `data` | Data または `null` | キャッシュするデータ。 |
+| `ctx` | `{ tags: [] }` | 提供されたキャッシュタグ。 |
`Promise` を返します。
### `revalidateTag()` {#revalidatetag}
-| パラメーター | 型 | 説明 |
-| ------------ | ---------------------- | ---------------------------- |
-| `tag` | `string` or `string[]` | 再検証するキャッシュタグです |
+| パラメーター | 型 | 説明 |
+| ------------ | -------------------------- | -------------------------- |
+| `tag` | `string` または `string[]` | 再検証するキャッシュタグ。 |
-`Promise` を返します。データの[再検証について詳しく](/docs/app/building-your-application/data-fetching/incremental-static-regeneration)知るか、[`revalidateTag()`](/docs/app/api-reference/functions/revalidateTag) 関数について理解を深めてください。
+`Promise` を返します。[データの再検証](/docs/app/building-your-application/data-fetching/incremental-static-regeneration)や [`revalidateTag()`](/docs/app/api-reference/functions/revalidateTag) 関数について詳しく学んでください。
**Good to know:**
-- `revalidatePath` はキャッシュタグの上位にある便利なレイヤーです。`revalidatePath` を呼び出すと、`revalidateTag` 関数が呼び出され、そこからパスに基づいてキャッシュキーにタグを付けるかどうか選択できます。
+- `revalidatePath` はキャッシュタグの上にある便利なレイヤーです。`revalidatePath` を呼び出すと、`revalidateTag` 関数が呼び出され、その後、パスに基づいてキャッシュキーにタグを付けるかどうかを選択できます。
## バージョン履歴 {#version-history}
-| バージョン | 変更点 |
-| ---------- | ------------------------------------------------------------------------- |
-| `v14.1.0` | `cacheHandler` に改名され、安定化しました。 |
-| `v13.4.0` | `revalidateTag` 用の `incrementalCacheHandlerPath` をサポートしました。 |
-| `v13.4.0` | スタンドアロン出力用の `incrementalCacheHandlerPath` をサポートしました。 |
-| `v12.2.0` | 実験的な `incrementalCacheHandlerPath` が追加されました。 |
+| バージョン | 変更内容 |
+| ---------- | ------------------------------------------------------------------- |
+| `v14.1.0` | `cacheHandler` に名前が変更され、安定版になりました。 |
+| `v13.4.0` | `revalidateTag` のための `incrementalCacheHandlerPath` サポート。 |
+| `v13.4.0` | スタンドアロン出力のための `incrementalCacheHandlerPath` サポート。 |
+| `v12.2.0` | 実験的な `incrementalCacheHandlerPath` が追加されました。 |
diff --git a/docs/01-app/05-api-reference/05-config/01-next-config-js/reactCompiler.mdx b/docs/01-app/05-api-reference/05-config/01-next-config-js/reactCompiler.mdx
index 2adff7aa..59bbed62 100644
--- a/docs/01-app/05-api-reference/05-config/01-next-config-js/reactCompiler.mdx
+++ b/docs/01-app/05-api-reference/05-config/01-next-config-js/reactCompiler.mdx
@@ -4,9 +4,17 @@ description: 'React Compilerを有効にして、コンポーネントのレン
version: 'experimental'
---
-Next.js 15では、[React Compiler](https://react.dev/learn/react-compiler)のサポートが導入されました。コンパイラはコンポーネントのレンダリングを自動的に最適化することでパフォーマンスを向上させます。これにより、開発者が`useMemo`や`useCallback`などのAPIを通じて手動で行うメモ化の量が減少します。
+Next.jsは、コンポーネントのレンダリングを自動的に最適化することでパフォーマンスを向上させることを目的としたツールである[React Compiler](https://react.dev/learn/react-compiler)をサポートしています。これにより、`useMemo`や`useCallback`を使用した手動のメモ化の必要性が減少します。
-使用するには、Next.js 15にアップグレードし、`babel-plugin-react-compiler`をインストールします：
+Next.jsには、React Compilerをより効率的にするためにSWCで書かれたカスタムのパフォーマンス最適化が含まれています。すべてのファイルに対してコンパイラを実行するのではなく、Next.jsはプロジェクトを分析し、関連するファイルにのみReact Compilerを適用します。これにより、不要な作業を避け、Babelプラグインを単独で使用する場合と比較してビルドが高速化されます。
+
+## 仕組み {#how-it-works}
+
+React CompilerはBabelプラグインを通じて実行されます。ビルドを高速に保つために、Next.jsはカスタムのSWC最適化を使用し、JSXやReactフックを含む関連ファイルにのみReact Compilerを適用します。
+
+これにより、すべてをコンパイルすることを避け、パフォーマンスコストを最小限に抑えます。デフォルトのRustベースのコンパイラと比較して、ビルドがわずかに遅くなることがありますが、その影響は小さく局所的です。
+
+使用するには、`babel-plugin-react-compiler`をインストールします：
```bash title="Terminal"
npm install babel-plugin-react-compiler
@@ -46,8 +54,6 @@ module.exports = nextConfig