From 50d875354f6ef7e921fa7e6932e27ec930c6bc20 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Thu, 17 Apr 2025 02:52:57 +0000 Subject: [PATCH] sync docs@304c54a --- .../01-getting-started/11-deploying.mdx | 43 + .../01-getting-started/12-upgrading.mdx | 36 +- .../migrating/app-router-migration.mdx | 1032 +++++++++++++++++ .../migrating/from-create-react-app.mdx} | 66 +- .../migrating/from-vite.mdx} | 93 +- docs/01-app/02-guides/migrating/index.mdx | 4 + docs/01-app/02-guides/multi-tenant.mdx | 7 + docs/01-app/02-guides/multi-zones.mdx | 140 +++ .../01-app/02-guides/production-checklist.mdx | 166 +++ .../single-page-applications.mdx} | 56 +- .../upgrading/codemods.mdx} | 56 +- docs/01-app/02-guides/upgrading/index.mdx | 7 + .../01-app/02-guides/upgrading/version-14.mdx | 37 + .../upgrading/version-15.mdx} | 177 +-- .../01-routing/03-layouts-and-templates.mdx | 8 +- .../01-routing/10-dynamic-routes.mdx | 38 +- .../01-routing/13-route-handlers.mdx | 42 +- .../06-optimizing/03-fonts.mdx | 80 +- .../06-optimizing/04-metadata.mdx | 36 +- .../06-optimizing/06-package-bundling.mdx | 44 +- .../06-optimizing/14-local-development.mdx | 55 +- .../03-environment-variables.mdx | 44 +- .../08-testing/02-jest.mdx | 130 +-- .../10-deploying/01-production-checklist.mdx | 165 --- .../10-deploying/03-multi-zones.mdx | 139 --- .../10-deploying/index.mdx | 94 +- .../11-upgrading/02-canary.mdx | 38 - .../11-upgrading/04-version-14.mdx | 36 - .../11-upgrading/05-app-router-migration.mdx | 1032 ----------------- .../11-upgrading/index.mdx | 11 - .../03-building-your-application/index.mdx | 16 +- .../05-api-reference/02-components/image.mdx | 164 +-- .../05-api-reference/02-components/link.mdx | 72 +- .../03-file-conventions/layout.mdx | 76 +- .../03-file-conventions/page.mdx | 32 +- .../route-segment-config.mdx | 82 +- .../03-file-conventions/route.mdx | 14 +- .../05-api-reference/04-functions/cookies.mdx | 58 +- .../04-functions/draft-mode.mdx | 22 +- .../04-functions/generate-viewport.mdx | 54 +- .../05-api-reference/04-functions/headers.mdx | 38 +- .../04-functions/use-router.mdx | 40 +- .../05-config/01-next-config-js/appDir.mdx | 8 +- .../05-config/01-next-config-js/rewrites.mdx | 91 +- .../05-config/01-next-config-js/turbopack.mdx | 16 +- docs/01-app/index.mdx | 93 +- docs/03-architecture/fast-refresh.mdx | 53 +- kj-diff.json | 205 +--- next.js | 2 +- static/img/docs/dark/multi-zones.avif | Bin 22054 -> 24634 bytes static/img/docs/light/multi-zones.avif | Bin 13362 -> 14147 bytes 51 files changed, 2479 insertions(+), 2569 deletions(-) create mode 100644 docs/01-app/01-getting-started/11-deploying.mdx create mode 100644 docs/01-app/02-guides/migrating/app-router-migration.mdx rename docs/01-app/{03-building-your-application/11-upgrading/06-from-create-react-app.mdx => 02-guides/migrating/from-create-react-app.mdx} (79%) rename docs/01-app/{03-building-your-application/11-upgrading/07-from-vite.mdx => 02-guides/migrating/from-vite.mdx} (71%) create mode 100644 docs/01-app/02-guides/migrating/index.mdx create mode 100644 docs/01-app/02-guides/multi-tenant.mdx create mode 100644 docs/01-app/02-guides/multi-zones.mdx create mode 100644 docs/01-app/02-guides/production-checklist.mdx rename docs/01-app/{03-building-your-application/11-upgrading/08-single-page-applications.mdx => 02-guides/single-page-applications.mdx} (75%) rename docs/01-app/{03-building-your-application/11-upgrading/01-codemods.mdx => 02-guides/upgrading/codemods.mdx} (79%) create mode 100644 docs/01-app/02-guides/upgrading/index.mdx create mode 100644 docs/01-app/02-guides/upgrading/version-14.mdx rename docs/01-app/{03-building-your-application/11-upgrading/03-version-15.mdx => 02-guides/upgrading/version-15.mdx} (60%) delete mode 100644 docs/01-app/03-building-your-application/10-deploying/01-production-checklist.mdx delete mode 100644 docs/01-app/03-building-your-application/10-deploying/03-multi-zones.mdx delete mode 100644 docs/01-app/03-building-your-application/11-upgrading/02-canary.mdx delete mode 100644 docs/01-app/03-building-your-application/11-upgrading/04-version-14.mdx delete mode 100644 docs/01-app/03-building-your-application/11-upgrading/05-app-router-migration.mdx delete mode 100644 docs/01-app/03-building-your-application/11-upgrading/index.mdx diff --git a/docs/01-app/01-getting-started/11-deploying.mdx b/docs/01-app/01-getting-started/11-deploying.mdx new file mode 100644 index 00000000..59fce7ed --- /dev/null +++ b/docs/01-app/01-getting-started/11-deploying.mdx @@ -0,0 +1,43 @@ +--- +title: 'Next.js アプリケーションのデプロイ方法' +nav_title: 'デプロイ' +description: 'Next.js アプリケーションのデプロイ方法を学びましょう。' +--- + +Next.js アプリのデプロイ準備が整ったら、[マネージドインフラストラクチャプロバイダー](#managed-infrastructure-providers)を選択するか、アプリケーションを[セルフホスティング](#self-hosting)することができます。 + +## マネージドインフラストラクチャプロバイダー {#managed-infrastructure-providers} + +マネージドプラットフォームは、Next.js アプリのデプロイにおいて実用的な選択肢です。これらのプロバイダーは、ホスティング、スケーリング、サーバー構成を代行してくれます。 + +Next.js の作成者およびメンテナーである [Vercel](https://vercel.com/docs/frameworks/nextjs?utm_source=next-site&utm_medium=docs&utm_campaign=next-website) は、**フル機能サポート**と**ゼロ構成**でアプリケーションをデプロイすることを可能にします。 + +- [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 を試す + +また、以下のコミュニティが管理するデプロイテンプレートもあります: + +- [Deno](https://github.com/nextjs/deploy-deno) +- [Flightcontrol](https://github.com/nextjs/deploy-flightcontrol) +- [Railway](https://github.com/nextjs/deploy-railway) +- [Render](https://github.com/nextjs/deploy-render) +- [SST](https://github.com/nextjs/deploy-sst) + +各プロバイダーのドキュメントを参照して、サポートされている Next.js の機能についての情報を確認してください。 + +## セルフホスティング {#self-hosting} + +セルフホスティングは、独自のサーバーのプロビジョニング、コンテナの管理、スケーリングを自分で行うことを意味する場合があります。Next.js をセルフホスティングする方法は3つあります: + +- [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) + +以下のセルフホスティングプロバイダーに関するコミュニティが管理するデプロイ例があります: + +- [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). diff --git a/docs/01-app/01-getting-started/12-upgrading.mdx b/docs/01-app/01-getting-started/12-upgrading.mdx index 895ec8d1..ed31e426 100644 --- a/docs/01-app/01-getting-started/12-upgrading.mdx +++ b/docs/01-app/01-getting-started/12-upgrading.mdx @@ -1,32 +1,52 @@ --- -title: 'アップグレード' -description: 'Next.jsアプリケーションを最新バージョンにアップグレードする方法を学びます。' +title: 'Next.js アプリをアップグレードする方法' +nav_title: 'アップグレード' +description: 'Next.js アプリケーションを最新バージョンにアップグレードする方法を学びます。' related: title: 'バージョンガイド' description: '詳細なアップグレード手順については、バージョンガイドをご覧ください。' links: - - 'app/building-your-application/upgrading/version-15' - - 'app/building-your-application/upgrading/version-14' + - 'app/guides/upgrading/version-15' + - 'app/guides/upgrading/version-14' --- ## 最新バージョン {#latest-version} -Next.jsを最新バージョンに更新するには、`upgrade` codemodを使用できます: +Next.js を最新バージョンに更新するには、`upgrade` codemod を使用します: ```bash title="Terminal" npx @next/codemod@canary upgrade latest ``` -手動でアップグレードしたい場合は、最新のNext.jsとReactのバージョンをインストールしてください: +手動でアップグレードしたい場合は、最新の Next.js と React のバージョンをインストールしてください: ```bash title="Terminal" npm i next@latest react@latest react-dom@latest eslint-config-next@latest ``` -## Canaryバージョン {#canary-version} +## Canary バージョン {#canary-version} -最新のcanaryに更新するには、まずNext.jsの最新バージョンを使用しており、すべてが期待通りに動作していることを確認してください。その後、次のコマンドを実行します: +最新の canary に更新するには、まず Next.js の最新バージョンを使用しており、すべてが期待通りに動作していることを確認してください。その後、次のコマンドを実行します: ```bash title="Terminal" npm i next@canary ``` + +### Canary で利用可能な機能 {#features-available-in-canary} + +現在、canary で利用可能な機能は以下の通りです: + +**キャッシング**: + +- [`"use cache"`](/docs/app/api-reference/directives/use-cache) +- [`cacheLife`](/docs/app/api-reference/functions/cacheLife) +- [`cacheTag`](/docs/app/api-reference/functions/cacheTag) +- [`dynamicIO`](/docs/app/api-reference/config/next-config-js/dynamicIO) + +**認証**: + +- [`forbidden`](/docs/app/api-reference/functions/forbidden) +- [`unauthorized`](/docs/app/api-reference/functions/unauthorized) +- [`forbidden.js`](/docs/app/api-reference/file-conventions/forbidden) +- [`unauthorized.js`](/docs/app/api-reference/file-conventions/unauthorized) +- [`authInterrupts`](/docs/app/api-reference/config/next-config-js/authInterrupts) diff --git a/docs/01-app/02-guides/migrating/app-router-migration.mdx b/docs/01-app/02-guides/migrating/app-router-migration.mdx new file mode 100644 index 00000000..244eabfa --- /dev/null +++ b/docs/01-app/02-guides/migrating/app-router-migration.mdx @@ -0,0 +1,1032 @@ +--- +title: 'Pages から App Router への移行方法' +nav_title: 'App Router' +description: '既存の Next.js アプリケーションを Pages Router から App Router にアップグレードする方法を学びます。' +--- + +このガイドでは、以下のことをサポートします: + +- [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 のバージョンは **v18.17** です。詳細は [Node.js のドキュメント](https://nodejs.org/docs/latest-v18.x/api/)を参照してください。 + +### Next.js のバージョン {#next-js-version} + +Next.js バージョン 13 に更新するには、お好みのパッケージマネージャーを使用して次のコマンドを実行してください: + +```bash title="Terminal" +npm install next@latest react@latest react-dom@latest +``` + +### ESLint のバージョン {#eslint-version} + +ESLint を使用している場合、ESLint のバージョンをアップグレードする必要があります: + +```bash title="Terminal" +npm install -D eslint-config-next@latest +``` + +> **Good to know**: ESLint の変更を反映させるために、VS Code で ESLint サーバーを再起動する必要があるかもしれません。コマンドパレット(Mac では `cmd+shift+p`、Windows では `ctrl+shift+p`)を開き、`ESLint: Restart ESLint Server` を検索してください。 + +## 次のステップ {#next-steps} + +更新が完了したら、次のセクションを参照して次のステップを確認してください: + +- [新機能のアップグレード](#upgrading-new-features):改良された Image コンポーネントや Link コンポーネントなどの新機能にアップグレードするためのガイドです。 +- [`pages` から `app` ディレクトリへの移行](#migrating-from-pages-to-app):`pages` から `app` ディレクトリに段階的に移行するためのステップバイステップガイドです。 + +## 新機能のアップグレード {#upgrading-new-features} + +Next.js 13 では、新しい機能と規約を備えた新しい [App Router](/docs/app/building-your-application/routing) が導入されました。新しい Router は `app` ディレクトリで利用可能で、`pages` ディレクトリと共存します。 + +Next.js 13 へのアップグレードは、App Router の使用を必須としません。`pages` を引き続き使用し、両方のディレクトリで動作する新機能を利用できます。例えば、更新された [Image コンポーネント](#image-component)、[Link コンポーネント](#link-component)、[Script コンポーネント](#script-component)、および [Font 最適化](#font-optimization) などです。 + +### `` コンポーネント {#image-component} + +Next.js 12 では、`next/future/image` という一時的なインポートを使用して Image コンポーネントに新しい改善が導入されました。これらの改善には、クライアントサイドの JavaScript の削減、画像の拡張やスタイルの簡素化、アクセシビリティの向上、ネイティブブラウザの遅延読み込みが含まれます。 + +バージョン 13 では、この新しい動作が `next/image` のデフォルトになりました。 + +新しい Image コンポーネントへの移行を支援するために、2 つの codemod が用意されています: + +- [**`next-image-to-legacy-image` codemod**](/docs/app/guides/upgrading/codemods#next-image-to-legacy-image):`next/image` のインポートを `next/legacy/image` に安全かつ自動的にリネームします。既存のコンポーネントは同じ動作を維持します。 +- [**`next-image-experimental` codemod**](/docs/app/guides/upgrading/codemods#next-image-experimental):インラインスタイルを危険に追加し、未使用の props を削除します。これにより、既存のコンポーネントの動作が新しいデフォルトに一致するように変更されます。この codemod を使用するには、最初に `next-image-to-legacy-image` codemod を実行する必要があります。 + +### `` コンポーネント {#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 を基礎となるタグに転送できるようになりました。 + +例: + +```jsx +import Link from 'next/link' + +// Next.js 12: `` はネストされていないと除外されます + + About + + +// Next.js 13: `` は常に内部で `` をレンダリングします + + About + +``` + +Next.js 13 にリンクをアップグレードするには、[`new-link` codemod](/docs/app/guides/upgrading/codemods#new-link) を使用できます。 + +### `