Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 28 additions & 8 deletions docs/01-app/01-getting-started/12-upgrading.mdx
Original file line number Diff line number Diff line change
@@ -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)
1,032 changes: 1,032 additions & 0 deletions docs/01-app/02-guides/migrating/app-router-migration.mdx

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions docs/01-app/02-guides/migrating/index.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
---
title: '移行'
description: '人気のあるフレームワークからNext.jsへの移行方法を学ぶ'
---
7 changes: 7 additions & 0 deletions docs/01-app/02-guides/multi-tenant.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
title: 'Next.jsでマルチテナントアプリを構築する方法'
nav_title: 'マルチテナント'
description: 'App Routerを使用してマルチテナントアプリを構築する方法を学びましょう。'
---

単一のNext.jsアプリケーションで複数のテナントを提供したい場合、私たちは推奨するアーキテクチャを示す[例](https://vercel.com/templates/next.js/platforms-starter-kit)を作成しました。

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
title: 'Codemods'
description: '新しい機能がリリースされた際に、Next.jsのコードベースをアップグレードするためにCodemodsを使用します。'
description: '新しい機能がリリースされた際にNext.jsのコードベースをアップグレードするためにCodemodsを使用します。'
---

Codemodsは、コードベースに対してプログラム的に実行される変換です。これにより、多くの変更を手動でファイルを確認することなくプログラム的に適用できます
Codemodsは、コードベースに対してプログラム的に実行される変換です。これにより、多くの変更を手動でファイルを一つ一つ確認することなく、プログラム的に適用することができます

Next.jsは、APIが更新または非推奨になったときに、Next.jsのコードベースをアップグレードするのを助けるためのCodemod変換を提供します
Next.jsは、APIが更新または非推奨になった際に、Next.jsのコードベースをアップグレードするためのCodemod変換を提供しています

## 使用法 {#usage}
## 使用方法 {#usage}

ターミナルで、プロジェクトのフォルダに移動(`cd`)し、次のコマンドを実行します:

Expand All @@ -19,14 +19,14 @@ npx @next/codemod <transform> <path>

- `transform` - 変換の名前
- `path` - 変換するファイルまたはディレクトリ
- `--dry` ドライランを実行し、コードは編集されません
- `--dry` コードは編集されずにドライランを実行します
- `--print` 変更された出力を比較のために表示します

## Codemods {#codemods}

### 15.0 {#15-0}

#### App Router Route Segment Config `runtime`の値を`experimental-edge`から`edge`に変換する {#transform-app-router-route-segment-config-runtime-value-from-experimental-edge-to-edge}
#### App Router Route Segment Config `runtime`の値を`experimental-edge`から`edge`に変換 {#transform-app-router-route-segment-config-runtime-value-from-experimental-edge-to-edge}

##### `app-dir-runtime-config-experimental-edge` {#app-dir-runtime-config-experimental-edge}

Expand All @@ -50,18 +50,18 @@ export const runtime = 'experimental-edge'
export const runtime = 'edge'
```

#### 非同期Dynamic APIsへの移行 {#migrate-to-async-dynamic-apis}
#### 非同期Dynamic APIへの移行 {#migrate-to-async-dynamic-apis}

動的レンダリングにオプトインしたAPIは、以前は同期アクセスをサポートしていましたが、現在は非同期になっています。この重大な変更については、[アップグレードガイド](/docs/app/building-your-application/upgrading/version-15)で詳しく読むことができます。
動的レンダリングにオプトインしたAPIは、以前は同期アクセスをサポートしていましたが、現在は非同期になっています。この破壊的変更については、[アップグレードガイド](/docs/app/guides/upgrading/version-15)で詳しく読むことができます。

##### `next-async-request-api` {#next-async-request-api}

```bash title="Terminal"
npx @next/codemod@latest next-async-request-api .
```

このcodemodは、現在非同期になった動的API(`cookies()`、`headers()`、および`draftMode()` from `next/headers`)を適切にawaitするか、適用可能な場合は`React.use()`でラップするように変換します。
自動移行が不可能な場合、codemodは型キャスト(TypeScriptファイルの場合)またはコメントを追加して、手動で確認および更新する必要があることをユーザーに通知します
このcodemodは、現在非同期になった動的API(`next/headers`の`cookies()`、`headers()`、`draftMode()`)を適切にawaitするか、適用可能な場合は`React.use()`でラップするように変換します。
自動移行が不可能な場合、codemodは型キャスト(TypeScriptファイルの場合)または手動で確認・更新が必要であることをユーザーに知らせるコメントを追加します

例えば:

Expand Down Expand Up @@ -109,7 +109,7 @@ function getHeader() {
}
```

ページ/ルートエントリ(`page.js`、`layout.js`、`route.js`、または`default.js`)や`generateMetadata` / `generateViewport` APIで`params`または`searchParams` propsのプロパティアクセスを検出した場合、
ページ/ルートエントリ(`page.js`、`layout.js`、`route.js`、`default.js`)や`generateMetadata` / `generateViewport` APIで`params`または`searchParams` propsのプロパティアクセスを検出した場合、
同期から非同期関数への変換を試み、プロパティアクセスをawaitします。非同期にできない場合(client componentなど)、`React.use`を使用してプロミスをアンラップします。

例えば:
Expand Down Expand Up @@ -163,10 +163,10 @@ export async function generateMetadata(props: {
}
```

> **Good to know:** このcodemodが手動での介入が必要な箇所を特定したが、正確な修正を決定できない場合、コードにコメントまたは型キャストを追加して、手動で更新する必要があることをユーザーに通知します。これらのコメントは**@next/codemod**で始まり、型キャストは`UnsafeUnwrapped`で始まります。
> これらのコメントが明示的に削除されるまで、ビルドはエラーになります。[詳しく読む](https://nextjs.org/docs/messages/sync-dynamic-apis)。
> **Good to know:** このcodemodが手動介入が必要な箇所を特定したが、正確な修正を決定できない場合、コードにコメントまたは型キャストを追加して、手動で更新が必要であることをユーザーに知らせます。これらのコメントは**@next/codemod**で始まり、型キャストは`UnsafeUnwrapped`で始まります。
> これらのコメントが明示的に削除されるまで、ビルドはエラーになります。[詳細はこちら](https://nextjs.org/docs/messages/sync-dynamic-apis)。

#### `NextRequest`の`geo`および`ip`プロパティを`@vercel/functions`に置き換える {#replace-geo-and-ip-properties-of-nextrequest-with-vercel-functions}
#### `NextRequest`の`geo`および`ip`プロパティを`@vercel/functions`に置き換え {#replace-geo-and-ip-properties-of-nextrequest-with-vercel-functions}

##### `next-request-geo-ip` {#next-request-geo-ip}

Expand Down Expand Up @@ -283,15 +283,15 @@ import { Inter } from 'next/font/google'

### 13.0 {#13-0}

#### Next Imageインポートの名前変更 {#rename-next-image-imports}
#### Next Imageインポートのリネーム {#rename-next-image-imports}

##### `next-image-to-legacy-image` {#next-image-to-legacy-image}

```bash title="Terminal"
npx @next/codemod@latest next-image-to-legacy-image .
```

Next.js 10、11、または12の既存のアプリケーションでの`next/image`インポートをNext.js 13で`next/legacy/image`に安全に名前変更します。また、`next/future/image`を`next/image`に名前変更します
Next.js 10、11、または12の既存のアプリケーションで`next/image`インポートをNext.js 13で`next/legacy/image`に安全にリネームします。また、`next/future/image`を`next/image`にリネームします

例えば:

Expand Down Expand Up @@ -335,15 +335,15 @@ export default function Home() {
npx @next/codemod@latest next-image-experimental .
```

インラインスタイルを追加し、未使用のpropsを削除することで、`next/legacy/image`から新しい`next/image`に危険に移行します
インラインスタイルを追加し、未使用のpropsを削除することで、`next/legacy/image`から新しい`next/image`に危険を伴う移行を行います

- `layout` propを削除し、`style`を追加します
- `objectFit` propを削除し、`style`を追加します
- `objectPosition` propを削除し、`style`を追加します
- `lazyBoundary` propを削除します
- `lazyRoot` propを削除します
- `layout` propを削除し、`style`を追加します
- `objectFit` propを削除し、`style`を追加します
- `objectPosition` propを削除し、`style`を追加します
- `lazyBoundary` propを削除します
- `lazyRoot` propを削除します

#### Linkコンポーネントから`<a>`タグを削除する {#remove-a-tags-from-link-components}
#### Linkコンポーネントから`<a>`タグを削除 {#remove-a-tags-from-link-components}

##### `new-link` {#new-link}

Expand All @@ -353,13 +353,13 @@ npx @next/codemod@latest new-link .

<AppOnly>

[Link Components](/docs/app/api-reference/components/link)内の`<a>`タグを削除するか、自動修正できないリンクに`legacyBehavior` propを追加します。
[Linkコンポーネント](/docs/app/api-reference/components/link)内の`<a>`タグを削除するか、自動修正できないリンクに`legacyBehavior` propを追加します。

</AppOnly>

<PagesOnly>

[Link Components](https://nextjs.org/docs/canary/pages/api-reference/components/link)内の`<a>`タグを削除するか、自動修正できないリンクに`legacyBehavior` propを追加します。
[Linkコンポーネント](https://nextjs.org/docs/canary/pages/api-reference/components/link)内の`<a>`タグを削除するか、自動修正できないリンクに`legacyBehavior` propを追加します。

</PagesOnly>

Expand All @@ -383,7 +383,7 @@ npx @next/codemod@latest new-link .
</Link>
```

自動修正が適用できない場合、`legacyBehavior` propが追加されます。これにより、その特定のリンクに対して古い動作を使用してアプリを機能させ続けることができます
自動修正が適用できない場合、`legacyBehavior` propが追加されます。これにより、その特定のリンクに対して古い動作を使用してアプリが機能し続けることができます

```jsx
const Component = () => <a>About</a>
Expand All @@ -407,7 +407,7 @@ const Component = () => <a>About</a>
npx @next/codemod cra-to-next
```

Create React AppプロジェクトをNext.jsに移行し、Pages Routerと必要な設定を作成して動作を一致させます。クライアントサイドのみのレンダリングが最初に利用され、SSR中の`window`使用による互換性の破損を防ぎ、Next.js固有の機能の段階的な採用を可能にします。
Create React AppプロジェクトをNext.jsに移行し、Pages Routerと必要な設定を作成して動作を一致させます。クライアントサイドのみのレンダリングが最初に利用され、SSR中の`window`使用による互換性の破壊を防ぎ、Next.js固有の機能の段階的な採用を可能にします。

この変換に関するフィードバックを[このディスカッション](https://github.com/vercel/next.js/discussions/25858)で共有してください。

Expand Down Expand Up @@ -446,7 +446,7 @@ export default class Home extends React.Component {

### 9 {#9}

#### 匿名コンポーネントを名前付きコンポーネントに変換する {#transform-anonymous-components-into-named-components}
#### 匿名コンポーネントを名前付きコンポーネントに変換 {#transform-anonymous-components-into-named-components}

##### `name-default-component` {#name-default-component}

Expand Down Expand Up @@ -478,7 +478,7 @@ export default function MyComponent() {

### 8 {#8}

#### AMP HOCをページ設定に変換する {#transform-amp-hoc-into-page-config}
#### AMP HOCをページ設定に変換 {#transform-amp-hoc-into-page-config}

##### `withamp-to-config` {#withamp-to-config}

Expand Down Expand Up @@ -522,7 +522,7 @@ export const config = {
npx @next/codemod url-to-withrouter
```

トップレベルページで自動的に注入される非推奨の`url`プロパティを`withRouter`とそれが注入する`router`プロパティを使用するように変換します。詳しくはこちらをお読みください:[https://nextjs.org/docs/messages/url-deprecated](https://nextjs.org/docs/messages/url-deprecated)
トップレベルページで自動的に注入される非推奨の`url`プロパティを`withRouter`とそれが注入する`router`プロパティを使用するように変換します。詳細はこちら:[https://nextjs.org/docs/messages/url-deprecated](https://nextjs.org/docs/messages/url-deprecated)

例えば:

Expand All @@ -549,4 +549,4 @@ export default withRouter(
)
```

これは一例です。変換されるすべてのケース(およびテスト済みのケース)は、[`__testfixtures__`ディレクトリ](https://github.com/vercel/next.js/tree/canary/packages/next-codemod/transforms/__testfixtures__/url-to-withrouter)にあります
これは一例です。変換され(テストされた)すべてのケースは、[`__testfixtures__`ディレクトリ](https://github.com/vercel/next.js/tree/canary/packages/next-codemod/transforms/__testfixtures__/url-to-withrouter)で確認できます
7 changes: 7 additions & 0 deletions docs/01-app/02-guides/upgrading/index.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
title: 'アップグレードガイド'
nav_title: 'アップグレード'
description: 'Next.jsの最新バージョンへのアップグレード方法を学びましょう。'
---

Next.jsの最新バージョンへのアップグレード方法を、バージョンごとのガイドに従って学びましょう:
37 changes: 37 additions & 0 deletions docs/01-app/02-guides/upgrading/version-14.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
---
title: 'バージョン14へのアップグレード方法'
nav_title: 'バージョン14'
description: 'Next.jsアプリケーションをバージョン13から14にアップグレードします。'
---

{/* このドキュメントの内容は、app routerとpages routerの間で共有されています。Pages Routerに特化した内容を追加するには、`<PagesOnly>Content</PagesOnly>`コンポーネントを使用できます。共有される内容はコンポーネントでラップしないでください。 */}

## 13から14へのアップグレード {#upgrading-from-13-to-14}

Next.jsのバージョン14にアップデートするには、お好みのパッケージマネージャーを使用して次のコマンドを実行してください:

```bash title="Terminal"
npm i next@next-14 react@18 react-dom@18 && npm i eslint-config-next@next-14 -D
```

```bash title="Terminal"
yarn add next@next-14 react@18 react-dom@18 && yarn add eslint-config-next@next-14 -D
```

```bash title="Terminal"
pnpm i next@next-14 react@18 react-dom@18 && pnpm i eslint-config-next@next-14 -D
```

```bash title="Terminal"
bun add next@next-14 react@18 react-dom@18 && bun add eslint-config-next@next-14 -D
```

> **Good to know:** TypeScriptを使用している場合は、`@types/react`と`@types/react-dom`も最新バージョンにアップグレードしてください。

### v14の概要 {#v14-summary}

- Node.jsの最低バージョンが16.14から18.17に引き上げられました。16.xはサポート終了となったためです
- `next export`コマンドは`output: 'export'`設定に置き換えられました。詳細は[ドキュメント](https://nextjs.org/docs/app/building-your-application/deploying/static-exports)をご覧ください
- `ImageResponse`のための`next/server`インポートは`next/og`に名前が変更されました。インポートを安全かつ自動的にリネームするための[codemodが利用可能です](/docs/app/guides/upgrading/codemods#next-og-import)
- `@next/font`パッケージは組み込みの`next/font`に完全に置き換えられました。インポートを安全かつ自動的にリネームするための[codemodが利用可能です](/docs/app/guides/upgrading/codemods#built-in-next-font)
- `next-swc`のWASMターゲットが削除されました
Loading