{title}
+{desc}
+
{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}
@@ -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,13 +823,13 @@ import createMDX from '@next/mdx'
/** @type {import('next').NextConfig} */
const nextConfig = {
- // ファイルの.mdおよび.mdx拡張子を許可
+ // ファイルの.md拡張子を許可
pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
// 必要に応じて、他のNext.jsの設定を以下に追加
}
const withMDX = createMDX({
- // 必要に応じてMarkdownプラグインをここに追加
+ // 必要に応じて、Markdownプラグインをここに追加
options: {
remarkPlugins: [remarkGfm],
rehypePlugins: [],
@@ -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
```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
- `app` ディレクトリには **必ず** root レイアウトが含まれている必要があります。
-- root レイアウトは `` と `` タグを定義する必要があります。Next.js は自動的にそれらを作成しません。
+- root レイアウトは `` と `` タグを定義する必要があります。Next.js は自動的にこれらを作成しません。
- root レイアウトは `pages/_app.tsx` と `pages/_document.tsx` ファイルを置き換えます。
- レイアウトファイルには `.js`、`.jsx`、または `.tsx` の拡張子を使用できます。
@@ -204,13 +204,13 @@ 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) に移動する必要があります。
#### `getLayout()` パターンをレイアウトに移行する（オプション） {#migrating-the-getlayout-pattern-to-layouts-optional}
-Next.js は、`pages` ディレクトリでページごとのレイアウトを実現するために [Page コンポーネントにプロパティを追加することを推奨していました](https://nextjs.org/docs/canary/pages/building-your-application/routing/pages-and-layouts#layout-pattern#per-page-layouts)。このパターンは、`app` ディレクトリでの [ネストされたレイアウト](/docs/app/building-your-application/routing/layouts-and-templates#layouts) のネイティブサポートに置き換えることができます。
+Next.js は、`pages` ディレクトリでページごとのレイアウトを実現するために [ページコンポーネントにプロパティを追加することを推奨していました](https://nextjs.org/docs/canary/pages/building-your-application/routing/pages-and-layouts#layout-pattern#per-page-layouts)。このパターンは、`app` ディレクトリでの [ネストされたレイアウト](/docs/app/building-your-application/routing/layouts-and-templates#layouts) のネイティブサポートに置き換えることができます。
前後の例を参照
@@ -362,7 +362,7 @@ export default function Page() { ### ステップ 4: ページの移行 {#step-4-migrating-pages} - [`app` ディレクトリ](/docs/app/building-your-application/routing) のページはデフォルトで [Server Components](/docs/app/building-your-application/rendering/server-components) です。これは、`pages` ディレクトリのページが [Client Components](/docs/app/building-your-application/rendering/client-components) であるのとは異なります。 -- `app` での [データフェッチ](/docs/app/building-your-application/data-fetching) は変更されました。`getServerSideProps`、`getStaticProps`、`getInitialProps` はよりシンプルな API に置き換えられました。 +- `app` での [データ取得](/docs/app/building-your-application/data-fetching) は変更されました。`getServerSideProps`、`getStaticProps`、`getInitialProps` はよりシンプルな API に置き換えられました。 - `app` ディレクトリはネストされたフォルダを使用してルートを定義し、特別な `page.js` ファイルを使用してルートセグメントを公開します。 - | `pages` ディレクトリ | `app` ディレクトリ | ルート | | -------------------- | --------------------- | -------------- | @@ -372,8 +372,8 @@ export default function Page() { ページの移行を 2 つの主要なステップに分解することをお勧めします： -- ステップ 1: デフォルトでエクスポートされた Page コンポーネントを新しい Client Component に移動します。 -- ステップ 2: 新しい `page.js` ファイル内で新しい Client Component をインポートします。 +- ステップ 1: デフォルトでエクスポートされたページコンポーネントを新しい Client Component に移動します。 +- ステップ 2: 新しい Client Component を `app` ディレクトリ内の新しい `page.js` ファイルにインポートします。 > **Good to know**: これは `pages` ディレクトリと最も比較可能な動作を持つため、最も簡単な移行パスです。 @@ -410,7 +410,7 @@ export default function HomePage({ recentPosts }) { 'use client' // これは Client Component です。データを props として受け取り、 -// 状態とエフェクトにアクセスでき、`pages` ディレクトリの Page コンポーネントと同様です。 +// 状態とエフェクトにアクセスでき、`pages` ディレクトリのページコンポーネントと同様です。 export default function HomePage({ recentPosts }) { return (
@@ -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) を参照してください。
@@ -445,9 +445,9 @@ async function getPosts() {
}
export default async function Page() {
- // Server Component で直接データをフェッチします
+ // Server Component で直接データを取得します
const recentPosts = await getPosts()
- // フェッチしたデータを Client Component に転送します
+ // 取得したデータを Client Component に転送します
return
@@ -602,7 +602,7 @@ export default async function Page() {
#### サーバーサイドレンダリング (`getServerSideProps`) {#server-side-rendering-getserversideprops}
-`pages` ディレクトリでは、`getServerSideProps` を使用してサーバー上でデータをフェッチし、ファイル内のデフォルトでエクスポートされた React コンポーネントに props を転送します。ページの初期 HTML はサーバーからプリレンダリングされ、その後ブラウザでページを「ハイドレート」（インタラクティブにする）します。
+`pages` ディレクトリでは、`getServerSideProps` を使用してサーバー上でデータを取得し、ファイル内のデフォルトでエクスポートされた React コンポーネントに props を転送します。ページの初期 HTML はサーバーからプリレンダリングされ、その後ブラウザでページを「ハイドレート」（インタラクティブにする）します。
```jsx title="pages/dashboard.js"
// `pages` ディレクトリ
@@ -625,9 +625,9 @@ 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` に似ています。
+`cache` オプションを `no-store` に設定することで、取得したデータが [決してキャッシュされない](/docs/app/building-your-application/data-fetching/fetching) ことを示すことができます。これは `pages` ディレクトリの `getServerSideProps` に似ています。
@@ -727,7 +727,7 @@ async function getData() {
export default async function Page() {
// `cookies` または `headers` を Server Components 内で
- // 直接またはデータフェッチ関数内で使用できます
+ // 直接またはデータ取得関数内で使用できます
const theme = (await cookies()).get('theme')
const data = await getData()
return '...'
@@ -749,7 +749,7 @@ async function getData() {
export default async function Page() {
// `cookies` または `headers` を Server Components 内で
- // 直接またはデータフェッチ関数内で使用できます
+ // 直接またはデータ取得関数内で使用できます
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` ディレクトリ
@@ -778,7 +778,7 @@ export default function Index({ projects }) {
}
```
-`app` ディレクトリでは、[`fetch()`](/docs/app/api-reference/functions/fetch) を使用したデータフェッチはデフォルトで `cache: 'force-cache'` となり、リクエストデータが手動で無効化されるまでキャッシュされます。これは `pages` ディレクトリの `getStaticProps` に似ています。
+`app` ディレクトリでは、[`fetch()`](/docs/app/api-reference/functions/fetch) を使用したデータ取得はデフォルトで `cache: 'force-cache'` となり、リクエストデータが手動で無効化されるまでキャッシュされます。これは `pages` ディレクトリの `getStaticProps` に似ています。
```jsx title="app/page.js"
// `app` ディレクトリ
@@ -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` ディレクトリ
@@ -882,7 +882,7 @@ export default function Post({ post }) {
- **`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` ディレクトリ
@@ -906,9 +906,9 @@ export default async function Post({ params }) {
[`dynamicParams`](/docs/app/api-reference/file-conventions/route-segment-config#dynamicparams) が `true`（デフォルト）に設定されている場合、生成されていないルートセグメントがリクエストされると、サーバーレンダリングされてキャッシュされます。
-#### インクリメンタル静的再生成 (`getStaticProps` with `revalidate`) {#incremental-static-regeneration-getstaticprops-with-revalidate}
+#### 増分的静的再生成 (`getStaticProps` with `revalidate`) {#incremental-static-regeneration-getstaticprops-with-revalidate}
-`pages` ディレクトリでは、`getStaticProps` 関数を使用して、一定の時間が経過した後にページを自動的に再生成するための `revalidate` フィールドを追加できます。
+`pages` ディレクトリでは、`getStaticProps` 関数を使用して、一定時間後にページを自動的に再生成するための `revalidate` フィールドを追加できます。
```jsx title="pages/index.js"
// `pages` ディレクトリ
@@ -932,7 +932,7 @@ export default function Index({ posts }) {
}
```
-`app` ディレクトリでは、[`fetch()`](/docs/app/api-reference/functions/fetch) を使用したデータフェッチで `revalidate` を使用でき、指定された秒数の間リクエストをキャッシュします。
+`app` ディレクトリでは、[`fetch()`](/docs/app/api-reference/functions/fetch) を使用したデータ取得で `revalidate` を使用でき、指定された秒数の間リクエストをキャッシュします。
```jsx title="app/page.js"
// `app` ディレクトリ
@@ -974,11 +974,11 @@ 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}
-同時にシングルページアプリケーション（SPA）から Next.js に移行する場合は、[ドキュメント](/docs/app/guides/single-page-applications) を参照して詳細を学びましょう。
+同時にシングルページアプリケーション（SPA）から Next.js に移行する場合は、[ドキュメント](/docs/app/guides/single-page-applications) を参照して詳細を学んでください。
### ステップ 7: スタイリング {#step-7-styling}
@@ -987,9 +987,9 @@ 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}
@@ -1019,9 +1019,9 @@ export default function RootLayout({ children }) {
}
```
-[Tailwind CSS を使用したスタイリング](/docs/app/building-your-application/styling/tailwind-css) について詳しく学びましょう。
+[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` を使用した自動リンクプリフェッチは、ルーター間でプリフェッチしません。
@@ -1029,4 +1029,4 @@ export default function RootLayout({ children }) {
## Codemods {#codemods}
-Next.js は、機能が廃止されたときにコードベースをアップグレードするのに役立つ Codemod 変換を提供します。詳細は [Codemods](/docs/app/guides/upgrading/codemods) を参照してください。
+Next.js は、機能が廃止されたときにコードベースをアップグレードするのを助ける Codemod 変換を提供します。詳細は [Codemods](/docs/app/guides/upgrading/codemods) を参照してください。
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..2a38a974 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
@@ -1,89 +1,89 @@
---
-title: 'Create React App から Next.js への移行方法'
+title: 'Create React AppからNext.jsへの移行方法'
nav_title: 'Create React App'
-description: '既存の React アプリケーションを Create React App から Next.js に移行する方法を学びましょう。'
+description: '既存のReactアプリケーションをCreate React AppからNext.jsに移行する方法を学びましょう。'
---
-このガイドでは、既存の Create React App (CRA) サイトを Next.js に移行する方法を説明します。
+このガイドでは、既存のCreate React App (CRA)サイトをNext.jsに移行する方法を説明します。
## なぜ移行するのか？ {#why-switch}
-Create React App から Next.js に移行したい理由はいくつかあります：
+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 ではクライアントサイドのデータ取得もサポートされていますが、データ取得をサーバーに移動することもできます。これにより、クライアントとサーバー間のウォーターフォールが完全に排除されることがよくあります。
+Next.jsではクライアントサイドのデータ取得もサポートされていますが、データ取得をサーバーに移動することも可能です。これにより、クライアントとサーバー間のウォーターフォールが完全に排除されることがよくあります。
### 高速で意図的な読み込み状態 {#fast-and-intentional-loading-states}
-[React Suspense を通じたストリーミング](/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense) の組み込みサポートにより、ネットワークウォーターフォールを作成せずに、UI のどの部分を最初にどの順序で読み込むかを定義できます。
+[React Suspenseを通じたストリーミング](/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense)の組み込みサポートにより、ネットワークウォーターフォールを作成せずに、UIのどの部分を最初にどの順序で読み込むかを定義できます。
これにより、ページの読み込みが速くなり、[レイアウトシフト](https://vercel.com/blog/how-core-web-vitals-affect-seo)を排除できます。
### データ取得戦略の選択 {#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 Middleware](/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}
+### ステップ1: Next.jsの依存関係をインストールする {#step-1-install-the-next-js-dependency}
-既存のプロジェクトに Next.js をインストールします：
+既存のプロジェクトにNext.jsをインストールします：
```bash title="Terminal"
npm install next@latest
```
-### ステップ 2: Next.js の設定ファイルを作成する {#step-2-create-the-next-js-configuration-file}
+### ステップ2: Next.jsの設定ファイルを作成する {#step-2-create-the-next-js-configuration-file}
-プロジェクトの root に `next.config.ts` を作成します（`package.json` と同じレベル）。このファイルには、[Next.js の設定オプション](/docs/app/api-reference/config/next-config-js)が含まれます。
+プロジェクトのルート（`package.json`と同じレベル）に`next.config.ts`を作成します。このファイルには[Next.jsの設定オプション](/docs/app/api-reference/config/next-config-js)が含まれます。
```js title="next.config.ts"
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
- output: 'export', // シングルページアプリケーション (SPA) を出力します
- distDir: 'build', // ビルド出力ディレクトリを `build` に変更します
+ output: 'export', // シングルページアプリケーション（SPA）を出力
+ distDir: 'build', // ビルド出力ディレクトリを`build`に変更
}
export default nextConfig
```
-> **注意**: `output: 'export'` を使用すると、静的エクスポートを行っていることを意味します。サーバーサイドの機能（SSR や API など）にはアクセスできません。Next.js のサーバー機能を活用するには、この行を削除できます。
+> **注意**: `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) です。
+Next.js [App Router](/docs/app)アプリケーションには、すべてのページをラップする[React Server Component](/docs/app/building-your-application/rendering/server-components)である[root レイアウト](/docs/app/building-your-application/routing/layouts-and-templates#root-layout-required)ファイルが含まれている必要があります。
-CRA アプリケーションでの root レイアウトファイルに最も近いものは、``、``、および `` タグを含む `public/index.html` です。
+CRAアプリケーションでのroot レイアウトファイルに最も近いものは、``、``、および``タグを含む`public/index.html`です。
-1. `src` ディレクトリ内に新しい `app` ディレクトリを作成します（または、`app` を root に配置する場合はプロジェクトの root に作成します）。
-2. `app` ディレクトリ内に `layout.tsx`（または `layout.js`）ファイルを作成します：
+1. `src`フォルダ内に新しい`app`ディレクトリを作成します（または、`app`をルートに配置する場合はプロジェクトルートに作成します）
+2. `app`ディレクトリ内に`layout.tsx`（または`layout.js`）ファイルを作成します：
@@ -110,7 +110,7 @@ export default function RootLayout({ children }) {
-古い `index.html` の内容をこの `` コンポーネントにコピーします。`body div#root`（および `body noscript`）を ``コンポーネントにコピーします。`body div#root`（および`body noscript`）を`
@@ -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}
+### ステップ4: メタデータ {#step-4-metadata}
-Next.js は `` と `` タグを自動的に含めるため、`` から削除できます：
+Next.jsは自動的に``と``タグを含めるため、``からこれらを削除できます：
@@ -216,7 +216,7 @@ export default function RootLayout({ children }) {
-`favicon.ico`、`icon.png`、`robots.txt` などの[メタデータファイル](/docs/app/building-your-application/optimizing/metadata#file-based-metadata)は、`app` ディレクトリのトップレベルに配置されている限り、アプリケーションの `` タグに自動的に追加されます。すべての[サポートされているファイル](/docs/app/building-your-application/optimizing/metadata#file-based-metadata)を `app` ディレクトリに移動した後、それらの `` タグを安全に削除できます：
+`favicon.ico`、`icon.png`、`robots.txt`などの[メタデータファイル](/docs/app/building-your-application/optimizing/metadata#file-based-metadata)は、`app`ディレクトリのトップレベルに配置されている限り、自動的にアプリケーションの``タグに追加されます。すべての[サポートされているファイル](/docs/app/building-your-application/optimizing/metadata#file-based-metadata)を`app`ディレクトリに移動した後、``タグを安全に削除できます：
@@ -263,7 +263,7 @@ export default function RootLayout({ children }) {
-最後に、Next.js は [Metadata API](/docs/app/building-your-application/optimizing/metadata) を使用して最後の `` タグを管理できます。最終的なメタデータ情報をエクスポートされた [`metadata` オブジェクト](/docs/app/api-reference/functions/generate-metadata#metadata-object) に移動します：
+最後に、Next.jsは[Metadata API](/docs/app/building-your-application/optimizing/metadata)を使用して最後の``タグを管理できます。最終的なメタデータ情報をエクスポートされた[`metadata`オブジェクト](/docs/app/api-reference/functions/generate-metadata#metadata-object)に移動します：
@@ -314,13 +314,13 @@ export default function RootLayout({ children }) {
-上記の変更により、`index.html` にすべてを宣言する方法から、フレームワークに組み込まれた Next.js の規約ベースのアプローチ（[Metadata API](/docs/app/building-your-application/optimizing/metadata)）を使用する方法に移行しました。このアプローチにより、ページの SEO とウェブの共有性をより簡単に向上させることができます。
+上記の変更により、`index.html`にすべてを宣言するのではなく、Next.jsのフレームワークに組み込まれた規約ベースのアプローチ（[Metadata API](/docs/app/building-your-application/optimizing/metadata)）を使用するように移行しました。このアプローチにより、ページのSEOとWebの共有性をより簡単に向上させることができます。
-### ステップ 5: スタイル {#step-5-styles}
+### ステップ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` にインポートします：
+グローバルCSSファイルがある場合は、`app/layout.tsx`にインポートします：
@@ -351,15 +351,15 @@ export default function RootLayout({
-Tailwind CSS を使用している場合は、[インストールドキュメント](/docs/app/building-your-application/styling/tailwind-css)を参照してください。
+Tailwind CSSを使用している場合は、[インストールドキュメント](/docs/app/building-your-application/styling/tailwind-css)を参照してください。
-### ステップ 6: エントリーポイントページを作成する {#step-6-create-the-entrypoint-page}
+### ステップ6: エントリーポイントページを作成する {#step-6-create-the-entrypoint-page}
-Create React App は `src/index.tsx`（または `index.js`）をエントリーポイントとして使用します。Next.js（App Router）では、`app` ディレクトリ内の各フォルダがルートに対応し、各フォルダには `page.tsx` が必要です。
+Create React Appは`src/index.tsx`（または`index.js`）をエントリーポイントとして使用します。Next.js（App Router）では、`app`ディレクトリ内の各フォルダがルートに対応し、各フォルダには`page.tsx`が必要です。
-現在のところアプリを SPA として保持し、**すべて**のルートをインターセプトしたいので、[optional catch-all route](/docs/app/building-your-application/routing/dynamic-routes#optional-catch-all-segments) を使用します。
+アプリをSPAとして維持し、**すべて**のルートをインターセプトしたいので、[optional catch-all route](/docs/app/building-your-application/routing/dynamic-routes#optional-catch-all-segments)を使用します。
-1. **`app` 内に `[[...slug]]` ディレクトリを作成します。**
+1. **`app`内に`[[...slug]]`ディレクトリを作成します。**
```bash
app
@@ -368,7 +368,7 @@ app
┣ layout.tsx
```
-2. **`page.tsx` に次の内容を追加します**：
+2. **`page.tsx`に以下を追加します：**
@@ -399,13 +399,13 @@ export default function Page() {
-これは Next.js に空のスラッグ（`/`）のための単一のルートを生成するよう指示し、**すべて**のルートを同じページにマッピングします。このページは[Server Component](/docs/app/building-your-application/rendering/server-components)であり、静的 HTML にプリレンダリングされます。
+これはNext.jsに、空のスラッグ（`/`）に対して単一のルートを生成するよう指示し、**すべて**のルートを同じページにマッピングします。このページは[Server Component](/docs/app/building-your-application/rendering/server-components)であり、静的HTMLにプリレンダリングされます。
-### ステップ 7: クライアント専用のエントリーポイントを追加する {#step-7-add-a-client-only-entrypoint}
+### ステップ7: クライアント専用のエントリーポイントを追加する {#step-7-add-a-client-only-entrypoint}
-次に、CRA の root App コンポーネントを[Client Component](/docs/app/building-your-application/rendering/client-components)内に埋め込み、すべてのロジックをクライアントサイドに残します。Next.js を初めて使用する場合、クライアントコンポーネント（デフォルトでは）もサーバーでプリレンダリングされることを知っておく価値があります。クライアントサイドの JavaScript を実行する追加の機能を持っていると考えることができます。
+次に、CRAのroot Appコンポーネントを[Client Component](/docs/app/building-your-application/rendering/client-components)内に埋め込み、すべてのロジックをクライアントサイドに残します。Next.jsを初めて使用する場合、クライアントコンポーネント（デフォルトでは）もサーバーでプリレンダリングされることを知っておくと良いでしょう。クライアントサイドのJavaScriptを実行する追加の機能を持っていると考えることができます。
-`app/[[...slug]]/` に `client.tsx`（または `client.js`）を作成します：
+`app/[[...slug]]/`に`client.tsx`（または`client.js`）を作成します：
@@ -440,10 +440,10 @@ export function ClientOnly() {
-- `'use client'` ディレクティブは、このファイルを**クライアントコンポーネント**にします。
-- `dynamic` インポートと `ssr: false` は `
@@ -478,9 +478,9 @@ export default function Page() {
-### ステップ 8: 静的画像インポートを更新する {#step-8-update-static-image-imports}
+### ステップ8: 静的画像インポートを更新する {#step-8-update-static-image-imports}
-CRA では、画像ファイルをインポートすると、その公開 URL が文字列として返されます：
+CRAでは、画像ファイルをインポートすると、その公開URLが文字列として返されます：
```tsx
import image from './img.png'
@@ -490,45 +490,45 @@ export default function App() {
}
```
-Next.js では、静的画像インポートはオブジェクトを返します。このオブジェクトは Next.js の [`` コンポーネント](/docs/app/api-reference/components/image)で直接使用することができ、または既存の `![]()
` タグでオブジェクトの `src` プロパティを使用することができます。
+Next.jsでは、静的画像インポートはオブジェクトを返します。このオブジェクトはNext.jsの[``コンポーネント](/docs/app/api-reference/components/image)で直接使用することができ、または既存の`![]()
`タグでオブジェクトの`src`プロパティを使用することができます。
-`` コンポーネントには[自動画像最適化](/docs/app/building-your-application/optimizing/images)の追加の利点があります。`` コンポーネントは、画像の寸法に基づいて結果の `![]()
` の `width` と `height` 属性を自動的に設定します。これにより、画像が読み込まれるときのレイアウトシフトを防ぎます。ただし、アプリに寸法の一方のみがスタイルされ、他方が `auto` にスタイルされていない画像が含まれている場合、問題が発生する可能性があります。`auto` にスタイルされていない場合、寸法は `![]()
` の寸法属性の値にデフォルト設定され、画像が歪んで表示される可能性があります。
+``コンポーネントには[自動画像最適化](/docs/app/building-your-application/optimizing/images)の利点があります。``コンポーネントは、画像の寸法に基づいて結果の`![]()
`の`width`と`height`属性を自動的に設定します。これにより、画像が読み込まれる際のレイアウトシフトを防ぎます。ただし、アプリに寸法の一方のみがスタイル設定され、他方が`auto`に設定されていない画像が含まれている場合、問題が発生する可能性があります。`auto`に設定されていない場合、寸法は`![]()
`の寸法属性の値にデフォルト設定され、画像が歪んで表示される可能性があります。
-`![]()
` タグを保持することで、アプリケーションの変更量を減らし、上記の問題を防ぐことができます。その後、[ローダーを設定](/docs/app/building-your-application/optimizing/images#loaders)するか、画像を自動的に最適化するデフォルトの Next.js サーバーに移行することで、画像を最適化するために `` コンポーネントに移行することができます。
+`![]()
`タグを保持することで、アプリケーションの変更を減らし、上記の問題を防ぐことができます。その後、[ローダーを設定](/docs/app/building-your-application/optimizing/images#loaders)して画像を最適化するために``コンポーネントに移行するか、自動画像最適化を備えたデフォルトのNext.jsサーバーに移行することができます。
-**`/public` からインポートされた画像の絶対インポートパスを相対インポートに変換します：**
+**`/public`からインポートされた画像の絶対インポートパスを相対インポートに変換します：**
```tsx
-// 変更前
+// Before
import logo from '/logo.png'
-// 変更後
+// After
import logo from '../public/logo.png'
```
-**画像オブジェクト全体ではなく、画像の `src` プロパティを `![]()
` タグに渡します：**
+**画像オブジェクト全体ではなく、画像の`src`プロパティを`![]()
`タグに渡します：**
```tsx
-// 変更前
+// Before
-// 変更後
+// After
```
-または、ファイル名に基づいて画像アセットの公開 URL を参照することもできます。たとえば、`public/logo.png` はアプリケーションの `/logo.png` で画像を提供し、これが `src` 値になります。
+または、ファイル名に基づいて画像アセットの公開URLを参照することもできます。たとえば、`public/logo.png`はアプリケーションで`/logo.png`として画像を提供し、これが`src`値になります。
-> **警告**: TypeScript を使用している場合、`src` プロパティにアクセスするときに型エラーが発生する可能性があります。これを修正するには、`tsconfig.json` ファイルの [`include` 配列](https://www.typescriptlang.org/tsconfig#include)に `next-env.d.ts` を追加する必要があります。Next.js は、ステップ 9 でアプリケーションを実行するときにこのファイルを自動的に生成します。
+> **警告**: TypeScriptを使用している場合、`src`プロパティにアクセスする際に型エラーが発生する可能性があります。これを修正するには、`tsconfig.json`ファイルの[`include`配列](https://www.typescriptlang.org/tsconfig#include)に`next-env.d.ts`を追加する必要があります。Next.jsは、ステップ9でアプリケーションを実行するときにこのファイルを自動的に生成します。
-### ステップ 9: 環境変数を移行する {#step-9-migrate-environment-variables}
+### ステップ9: 環境変数を移行する {#step-9-migrate-environment-variables}
-Next.js は CRA と同様に[環境変数](/docs/app/building-your-application/configuring/environment-variables)をサポートしていますが、ブラウザで公開したい変数には `NEXT_PUBLIC_` プレフィックスが**必要**です。
+Next.jsはCRAと同様に[環境変数](/docs/app/guides/environment-variables)をサポートしていますが、ブラウザで公開したい変数には`NEXT_PUBLIC_`プレフィックスが**必要**です。
-主な違いは、クライアントサイドで環境変数を公開するために使用されるプレフィックスです。`REACT_APP_` プレフィックスを持つすべての環境変数を `NEXT_PUBLIC_` に変更します。
+主な違いは、クライアントサイドで環境変数を公開するために使用されるプレフィックスです。`REACT_APP_`プレフィックスを持つすべての環境変数を`NEXT_PUBLIC_`に変更します。
-### ステップ 10: `package.json` のスクリプトを更新する {#step-10-update-scripts-in-package-json}
+### ステップ10: `package.json`のスクリプトを更新する {#step-10-update-scripts-in-package-json}
-`package.json` のスクリプトを Next.js コマンドに更新します。また、`.next` と `next-env.d.ts` を `.gitignore` に追加します：
+`package.json`のスクリプトをNext.jsコマンドに更新します。また、`.next`と`next-env.d.ts`を`.gitignore`に追加します：
```json title="package.json"
{
@@ -552,23 +552,23 @@ next-env.d.ts
npm run dev
```
-[http://localhost:3000](http://localhost:3000) を開きます。Next.js（SPA モード）でアプリケーションが実行されているのが確認できるはずです。
+[http://localhost:3000](http://localhost:3000)を開きます。Next.js（SPAモード）でアプリケーションが実行されているのが確認できるはずです。
-### ステップ 11: クリーンアップ {#step-11-clean-up}
+### ステップ11: クリーンアップ {#step-11-clean-up}
-Create React App に特有のアーティファクトを削除できます：
+Create React Appに特有のアーティファクトを削除できます：
- `public/index.html`
- `src/index.tsx`
- `src/react-app-env.d.ts`
-- `reportWebVitals` のセットアップ
-- `react-scripts` の依存関係（`package.json` からアンインストール）
+- `reportWebVitals`の設定
+- `react-scripts`の依存関係（`package.json`からアンインストール）
## 追加の考慮事項 {#additional-considerations}
-### CRA でカスタム `homepage` を使用する {#using-a-custom-homepage-in-cra}
+### CRAでカスタム`homepage`を使用する {#using-a-custom-homepage-in-cra}
-CRA の `package.json` で `homepage` フィールドを使用してアプリを特定のサブパスで提供していた場合、Next.js の `next.config.ts` で [`basePath` 設定](/docs/app/api-reference/config/next-config-js/basePath)を使用してそれを再現できます：
+CRAの`package.json`で`homepage`フィールドを使用してアプリを特定のサブパスで提供していた場合、Next.jsの[`basePath`設定](/docs/app/api-reference/config/next-config-js/basePath)を使用してそれを再現できます：
```ts title="next.config.ts"
import { NextConfig } from 'next'
@@ -581,13 +581,13 @@ const nextConfig: NextConfig = {
export default nextConfig
```
-### カスタム `Service Worker` の処理 {#handling-a-custom-service-worker}
+### カスタム`Service Worker`の処理 {#handling-a-custom-service-worker}
-CRA のサービスワーカー（例：`create-react-app` の `serviceWorker.js`）を使用していた場合、Next.js で[プログレッシブウェブアプリケーション (PWA)](/docs/app/building-your-application/configuring/progressive-web-apps)を作成する方法を学ぶことができます。
+CRAのサービスワーカー（例：`create-react-app`の`serviceWorker.js`）を使用していた場合、Next.jsで[プログレッシブウェブアプリケーション（PWA）](/docs/app/guides/progressive-web-apps)を作成する方法を学ぶことができます。
-### API リクエストのプロキシ {#proxying-api-requests}
+### APIリクエストのプロキシ {#proxying-api-requests}
-CRA アプリで `package.json` の `proxy` フィールドを使用してバックエンドサーバーへのリクエストを転送していた場合、`next.config.ts` で [Next.js のリライト](/docs/app/api-reference/config/next-config-js/rewrites)を使用してこれを再現できます：
+CRAアプリで`package.json`の`proxy`フィールドを使用してバックエンドサーバーへのリクエストを転送していた場合、`next.config.ts`で[Next.jsのリライト](/docs/app/api-reference/config/next-config-js/rewrites)を使用してこれを再現できます：
```ts title="next.config.ts"
import { NextConfig } from 'next'
@@ -604,16 +604,16 @@ const nextConfig: NextConfig = {
}
```
-### カスタム Webpack / Babel 設定 {#custom-webpack-babel-config}
+### カスタムWebpack / Babel設定 {#custom-webpack-babel-config}
-CRA でカスタム webpack または Babel 設定を持っていた場合、`next.config.ts` で Next.js の設定を拡張できます：
+CRAでカスタムwebpackまたはBabel設定を持っていた場合、`next.config.ts`でNext.jsの設定を拡張できます：
```ts title="next.config.ts"
import { NextConfig } from 'next'
const nextConfig: NextConfig = {
webpack: (config, { isServer }) => {
- // ここで webpack 設定を変更します
+ // ここでwebpack設定を変更
return config
},
}
@@ -621,11 +621,11 @@ const nextConfig: NextConfig = {
export default nextConfig
```
-> **注意**: これには `dev` スクリプトから `--turbopack` を削除して Turbopack を無効にする必要があります。
+> **注意**: これには`dev`スクリプトから`--turbopack`を削除してTurbopackを無効にする必要があります。
-### TypeScript のセットアップ {#typescript-setup}
+### TypeScriptのセットアップ {#typescript-setup}
-Next.js は `tsconfig.json` がある場合、自動的に TypeScript をセットアップします。`tsconfig.json` の `include` 配列に `next-env.d.ts` がリストされていることを確認してください：
+Next.jsは`tsconfig.json`がある場合、自動的にTypeScriptをセットアップします。`tsconfig.json`の`include`配列に`next-env.d.ts`がリストされていることを確認してください：
```json
{
@@ -635,25 +635,25 @@ Next.js は `tsconfig.json` がある場合、自動的に TypeScript をセッ
## バンドラーの互換性 {#bundler-compatibility}
-Create React App と Next.js はどちらもデフォルトで webpack をバンドリングに使用します。Next.js はまた、ローカル開発をより高速にするための [Turbopack](/docs/app/api-reference/config/next-config-js/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アプリケーションがあります。まだNext.jsのサーバーサイドレンダリングやファイルベースのルーティングなどの機能を活用していませんが、これらを段階的に行うことができます：
-- [Next.js App Router](/docs/app/building-your-application/routing) に**React Router から移行**して：
+- [Next.js App Router](/docs/app/building-your-application/routing)に**React Routerから移行**して：
- 自動コード分割
- [ストリーミングサーバーレンダリング](/docs/app/building-your-application/routing/loading-ui-and-streaming)
- [React Server Components](/docs/app/building-your-application/rendering/server-components)
-- [`` コンポーネント](/docs/app/building-your-application/optimizing/images)で**画像を最適化**
+- [``コンポーネント](/docs/app/building-your-application/optimizing/images)で**画像を最適化**
- [`next/font`](/docs/app/building-your-application/optimizing/fonts)で**フォントを最適化**
-- [`
+```
+
+または、`dangerouslySetInnerHTML`プロパティを使用することもできます：
+
+```jsx
+
+```
+
+> **警告**: インラインスクリプトには、Next.jsがスクリプトを追跡し最適化するために`id`プロパティを割り当てる必要があります。
+
+### Executing Additional Code {#executing-additional-code}
+
+イベントハンドラを使用して、特定のイベントが発生した後に追加のコードを実行することができます：
+
+- `onLoad`: スクリプトの読み込みが完了した後にコードを実行します。
+- `onReady`: スクリプトの読み込みが完了し、コンポーネントがマウントされるたびにコードを実行します。
+- `onError`: スクリプトの読み込みに失敗した場合にコードを実行します。
+
+
+
+これらのハンドラは、`next/script`がインポートされ、[Client Component](/docs/app/building-your-application/rendering/client-components)内で使用される場合にのみ動作します。この場合、コードの最初の行に`"use client"`が定義されている必要があります：
+
+
+
+
+```tsx title="app/page.tsx" switcher
+'use client'
+
+import Script from 'next/script'
+
+export default function Page() {
+ return (
+ <>
+
-```
-
-または `dangerouslySetInnerHTML` プロパティを使用して：
-
-```jsx
-
-```
-
-> **警告**: Next.js がスクリプトを追跡し最適化するために、インラインスクリプトには `id` プロパティを割り当てる必要があります。
-
-### 追加コードの実行 {#executing-additional-code}
-
-イベントハンドラを使用して、特定のイベントが発生した後に追加のコードを実行することができます：
-
-- `onLoad`: スクリプトの読み込みが完了した後にコードを実行します。
-- `onReady`: スクリプトの読み込みが完了し、コンポーネントがマウントされるたびにコードを実行します。
-- `onError`: スクリプトの読み込みに失敗した場合にコードを実行します。
-
-
-
-これらのハンドラは、`next/script` がインポートされ、[Client Component](/docs/app/building-your-application/rendering/client-components) 内で使用される場合にのみ機能します。この場合、コードの最初の行として `"use client"` が定義されます：
-
-
-
-
-```tsx title="app/page.tsx" switcher
-'use client'
-
-import Script from 'next/script'
-
-export default function Page() {
- return (
- <>
-
{children}
` に置き換えます。
+次に、古い`index.html`の内容をこの`{children}
`に置き換えます。