{title}
+{desc}
+{title}
+{desc}
+
- {/* 即座に読み込まれますが、別のクライアントバンドルで */}
+ {/* 即座に読み込むが、別のクライアントバンドルで */}
)
}
```
-> **Note:** server componentがclient componentを動的にインポートする場合、自動的な[コード分割](https://developer.mozilla.org/docs/Glossary/Code_splitting)は現在サポートされていません。
+> **注意：** Server ComponentがClient Componentを動的にインポートする場合、自動的な[コード分割](https://developer.mozilla.org/docs/Glossary/Code_splitting)は現在サポートされていません。
-### SSRのスキップ {#skipping-ssr}
+### SSRをスキップする {#skipping-ssr}
-`React.lazy()`とSuspenseを使用する場合、client componentはデフォルトで[プリレンダリング](https://github.com/reactwg/server-components/discussions/4)（SSR）されます。
+`React.lazy()`とSuspenseを使用する場合、Client Componentsはデフォルトで[プリレンダリング](https://github.com/reactwg/server-components/discussions/4)（SSR）されます。
-> **Note:** `ssr: false`オプションはclient componentでのみ機能し、クライアントのコード分割が適切に動作するようにclient componentに移動してください。
+> **注意：** `ssr: false`オプションはClient Componentsでのみ機能し、クライアントのコード分割が適切に動作するようにClient Componentsに移動してください。
-client componentのプリレンダリングを無効にしたい場合は、`ssr`オプションを`false`に設定できます：
+Client Componentのプリレンダリングを無効にしたい場合は、`ssr`オプションを`false`に設定できます：
```jsx
const ComponentC = dynamic(() => import('../components/C'), { ssr: false })
@@ -71,8 +72,7 @@ const ComponentC = dynamic(() => import('../components/C'), { ssr: false })
### Server Componentsのインポート {#importing-server-components}
-server componentを動的にインポートする場合、そのserver componentの子であるclient componentのみが遅延ロードされます。server component自体は遅延ロードされません。
-また、server componentで使用する場合、CSSなどの静的アセットのプリロードにも役立ちます。
+Server Componentを動的にインポートする場合、Server Component自体ではなく、その子であるClient Componentsのみが遅延読み込みされます。また、Server Componentsで使用する際にCSSなどの静的アセットをプリロードするのにも役立ちます。
```jsx title="app/page.js"
import dynamic from 'next/dynamic'
@@ -89,8 +89,8 @@ export default function ServerComponentExample() {
}
```
-> **Note:** server componentでは`ssr: false`オプションはサポートされていません。server componentで使用しようとするとエラーが表示されます。
-> `ssr: false`はserver componentで`next/dynamic`と共に使用することはできません。client componentに移動してください。
+> **注意：** Server Componentsでは`ssr: false`オプションはサポートされていません。Server Componentsで使用しようとするとエラーが発生します。
+> `ssr: false`はServer Componentsで`next/dynamic`と共に使用することはできません。Client Componentに移動してください。
### 外部ライブラリの読み込み {#loading-external-libraries}
@@ -126,7 +126,7 @@ export default function Page() {
}
```
-### カスタムローディングコンポーネントの追加 {#adding-a-custom-loading-component}
+### カスタムローディングコンポーネントを追加する {#adding-a-custom-loading-component}
```jsx title="app/page.js"
'use client'
@@ -188,7 +188,7 @@ export default function Home() {
}
```
-> **Good to know**: `import('path/to/component')`では、パスは明示的に記述する必要があります。テンプレート文字列や変数を使用することはできません。さらに、`import()`は`dynamic()`呼び出しの中にある必要があります。これは、Next.jsがwebpackバンドル/モジュールIDを特定の`dynamic()`呼び出しに一致させ、レンダリング前にプリロードできるようにするためです。`dynamic()`はReactレンダリング内で使用することはできません。プリロードが機能するためには、モジュールのトップレベルでマークされている必要があります。これは`React.lazy`と同様です。
+> **Good to know**: `import('path/to/component')`では、パスは明示的に記述する必要があります。テンプレート文字列や変数を使用することはできません。また、`import()`は`dynamic()`呼び出しの中にある必要があります。これにより、Next.jsはwebpackバンドル/モジュールIDを特定の`dynamic()`呼び出しにマッチさせ、レンダリング前にプリロードすることができます。`dynamic()`はReactレンダリング内で使用することはできません。プリロードが機能するためには、モジュールのトップレベルでマークされている必要があります。これは`React.lazy`と同様です。
## 名前付きエクスポートの場合 {#with-named-exports}
@@ -209,7 +209,7 @@ const DynamicComponent = dynamic(() =>
## SSRなしの場合 {#with-no-ssr}
-クライアントサイドでコンポーネントを動的に読み込むには、`ssr`オプションを使用してサーバーレンダリングを無効にできます。これは、外部依存関係やコンポーネントが`window`のようなブラウザAPIに依存している場合に便利です。
+クライアントサイドでコンポーネントを動的に読み込むには、`ssr`オプションを使用してサーバーレンダリングを無効にできます。これは、`window`のようなブラウザAPIに依存する外部依存関係やコンポーネントに役立ちます。
```jsx
'use client'
diff --git a/docs/01-app/03-building-your-application/06-optimizing/14-local-development.mdx b/docs/01-app/02-guides/local-development.mdx
similarity index 79%
rename from docs/01-app/03-building-your-application/06-optimizing/14-local-development.mdx
rename to docs/01-app/02-guides/local-development.mdx
index 54a203c5..5b8719ae 100644
--- a/docs/01-app/03-building-your-application/06-optimizing/14-local-development.mdx
+++ b/docs/01-app/02-guides/local-development.mdx
@@ -1,9 +1,10 @@
---
-title: 'ローカル開発'
+title: 'ローカル開発環境を最適化する方法'
+nav_title: '開発環境'
description: 'Next.jsでローカル開発環境を最適化する方法を学びましょう。'
---
-Next.jsは、優れた開発者体験を提供するように設計されています。アプリケーションが成長するにつれて、ローカル開発中のコンパイル時間が遅くなることに気付くかもしれません。このガイドでは、一般的なコンパイル時のパフォーマンス問題を特定し、修正する方法を説明します。
+Next.jsは、優れた開発者体験を提供するように設計されています。アプリケーションが成長するにつれて、ローカル開発中のコンパイル時間が遅くなることがあります。このガイドでは、一般的なコンパイル時のパフォーマンス問題を特定し、修正する方法を説明します。
## ローカル開発と本番環境の違い {#local-dev-vs-production}
@@ -15,13 +16,13 @@ Next.jsは、優れた開発者体験を提供するように設計されてい
### 1. コンピュータのウイルス対策ソフトを確認する {#1-check-your-computer-s-antivirus}
-ウイルス対策ソフトウェアはファイルアクセスを遅くする可能性があります。
+ウイルス対策ソフトウェアはファイルアクセスを遅くすることがあります。
-プロジェクトフォルダをウイルス対策の除外リストに追加してみてください。これはWindowsマシンで一般的ですが、ウイルス対策ツールがインストールされているシステムには推奨されます。
+プロジェクトフォルダをウイルス対策の除外リストに追加してみてください。これはWindowsマシンでよく見られますが、ウイルス対策ツールがインストールされているシステムには推奨されます。
### 2. Next.jsを更新し、Turbopackを有効にする {#2-update-next-js-and-enable-turbopack}
-Next.jsの最新バージョンを使用していることを確認してください。新しいバージョンには、パフォーマンスの向上が含まれていることがよくあります。
+Next.jsの最新バージョンを使用していることを確認してください。新しいバージョンには、しばしばパフォーマンスの改善が含まれています。
Turbopackは、Next.jsに統合された新しいバンドラーで、ローカルパフォーマンスを向上させることができます。
@@ -34,7 +35,7 @@ npm run dev --turbopack
### 3. インポートを確認する {#3-check-your-imports}
-コードのインポート方法は、コンパイルとバンドルの時間に大きく影響します。[パッケージバンドルの最適化](/docs/app/building-your-application/optimizing/package-bundling)について詳しく学び、[Dependency Cruiser](https://github.com/sverweij/dependency-cruiser)や[Madge](https://github.com/pahen/madge)などのツールを探索してください。
+コードのインポート方法は、コンパイルとバンドルの時間に大きく影響します。[パッケージバンドルの最適化](/docs/app/guides/package-bundling)について詳しく学び、[Dependency Cruiser](https://github.com/sverweij/dependency-cruiser)や[Madge](https://github.com/pahen/madge)などのツールを探索してください。
### アイコンライブラリ {#icon-libraries}
@@ -51,7 +52,7 @@ import Icon2 from 'react-icons/md/Icon2'
`react-icons`のようなライブラリには、多くの異なるアイコンセットが含まれています。1つのセットを選び、そのセットを使用し続けてください。
-例えば、アプリケーションが`react-icons`を使用し、以下のすべてをインポートしている場合：
+たとえば、アプリケーションが`react-icons`を使用し、以下のすべてをインポートしている場合：
- `pi` (Phosphor Icons)
- `md` (Material Design Icons)
@@ -62,13 +63,13 @@ import Icon2 from 'react-icons/md/Icon2'
### バレルファイル {#barrel-files}
-"バレルファイル"は、他のファイルから多くのアイテムをエクスポートするファイルです。これらは、モジュールスコープで副作用があるかどうかをインポートを使用してコンパイラが解析する必要があるため、ビルドを遅くする可能性があります。
+"バレルファイル"は、他のファイルから多くのアイテムをエクスポートするファイルです。これらは、モジュールスコープ内で副作用があるかどうかをインポートを使用して見つけるためにコンパイラが解析する必要があるため、ビルドを遅くすることがあります。
可能であれば、特定のファイルから直接インポートするようにしてください。[バレルファイルについて詳しくはこちら](https://vercel.com/blog/how-we-optimized-package-imports-in-next-js)とNext.jsの組み込み最適化について学びましょう。
### パッケージインポートの最適化 {#optimize-package-imports}
-Next.jsは特定のパッケージのインポートを自動的に最適化できます。バレルファイルを利用するパッケージを使用している場合は、`next.config.js`に追加してください：
+Next.jsは特定のパッケージのインポートを自動的に最適化できます。バレルファイルを利用するパッケージを使用している場合は、それらを`next.config.js`に追加してください：
```jsx
module.exports = {
@@ -84,7 +85,7 @@ Turbopackはインポートを自動的に解析し、最適化します。こ
Tailwind CSSを使用している場合は、正しく設定されていることを確認してください。
-一般的な間違いは、`content`配列を`node_modules`やスキャンすべきでない大きなディレクトリを含むように設定することです。
+一般的な間違いは、`content`配列を`node_modules`やスキャンすべきでない他の大きなディレクトリを含むように設定することです。
Tailwind CSSバージョン3.4.8以降では、ビルドを遅くする可能性のある設定について警告します。
@@ -106,7 +107,7 @@ Tailwind CSSバージョン3.4.8以降では、ビルドを遅くする可能性
```jsx
module.exports = {
content: [
- // より良い - 'src'フォルダのみをスキャン
+ // より良い例 - 'src'フォルダのみをスキャン
'../../packages/ui/src/**/*.{js,ts,jsx,tsx}',
],
}
@@ -116,25 +117,25 @@ Tailwind CSSバージョン3.4.8以降では、ビルドを遅くする可能性
カスタムwebpack設定を追加した場合、それがコンパイルを遅くしている可能性があります。
-ローカル開発に本当に必要かどうかを検討してください。特定のツールを本番ビルドのみに含めるか、Turbopackに移行して[loaders](/docs/app/api-reference/config/next-config-js/turbopack#supported-loaders)を使用することを検討してください。
+ローカル開発に本当に必要かどうかを考慮してください。特定のツールを本番ビルドのみに含めるか、Turbopackに移行して[loaders](/docs/app/api-reference/config/next-config-js/turbopack#supported-loaders)を使用することを検討してください。
-### 6. メモリ使用量を最適化する {#6-optimize-memory-usage}
+### 6. メモリ使用量の最適化 {#6-optimize-memory-usage}
-アプリが非常に大きい場合、より多くのメモリが必要になるかもしれません。
+アプリが非常に大きい場合、より多くのメモリが必要になることがあります。
-[メモリ使用量の最適化について詳しくはこちら](/docs/app/building-your-application/optimizing/memory-usage)。
+[メモリ使用量の最適化について詳しくはこちら](/docs/app/guides/memory-usage)。
### 7. Server Componentsとデータフェッチ {#7-server-components-and-data-fetching}
-Server Componentsへの変更は、ローカルでページ全体を再レンダリングし、新しい変更を表示するためにコンポーネントの新しいデータをフェッチすることを含みます。
+Server Componentsへの変更は、ページ全体を再レンダリングし、新しいデータをコンポーネントに表示するためにローカルで再レンダリングを引き起こします。
-実験的な`serverComponentsHmrCache`オプションを使用すると、ローカル開発でのホットモジュールリプレースメント（HMR）リフレッシュ中にServer Components内の`fetch`レスポンスをキャッシュできます。これにより、応答が高速化され、課金されるAPIコールのコストが削減されます。
+実験的な`serverComponentsHmrCache`オプションを使用すると、ローカル開発でのホットモジュールリプレースメント（HMR）リフレッシュ間でServer Components内の`fetch`レスポンスをキャッシュできます。これにより、レスポンスが高速化され、APIコールのコストが削減されます。
[実験的オプションについて詳しくはこちら](/docs/app/api-reference/config/next-config-js/serverComponentsHmrCache)。
## 問題を見つけるためのツール {#tools-for-finding-problems}
-### 詳細なフェッチログ {#detailed-fetch-logging}
+### 詳細なfetchログ {#detailed-fetch-logging}
開発中に何が起こっているのかをより詳細に知るために、このコマンドを使用してください：
diff --git a/docs/01-app/03-building-your-application/07-configuring/05-mdx.mdx b/docs/01-app/02-guides/mdx.mdx
similarity index 81%
rename from docs/01-app/03-building-your-application/07-configuring/05-mdx.mdx
rename to docs/01-app/02-guides/mdx.mdx
index 3f1669fe..2c0a156d 100644
--- a/docs/01-app/03-building-your-application/07-configuring/05-mdx.mdx
+++ b/docs/01-app/02-guides/mdx.mdx
@@ -1,12 +1,12 @@
---
-title: 'MarkdownとMDX'
+title: 'Next.jsでのMarkdownとMDXの使用方法'
nav_title: 'MDX'
description: 'MDXを設定し、Next.jsアプリで使用する方法を学びます。'
---
-{/* このドキュメントの内容はapp routerとpages routerの間で共有されています。Pages Routerに特化したコンテンツを追加するには、`{children}
}
```
@@ -553,7 +565,7 @@ export default function MdxLayout({ children }: { children: React.ReactNode }) {
```jsx title="app/mdx-page/layout.js" switcher
export default function MdxLayout({ children }) {
- // ここで共有レイアウトやスタイルを作成
+ // ここで共有レイアウトやスタイルを作成します
return {children}
}
```
@@ -572,7 +584,7 @@ MDXページ周りでレイアウトを共有するには、レイアウトコ
```tsx title="components/mdx-layout.tsx" switcher
export default function MdxLayout({ children }: { children: React.ReactNode }) {
- // ここで共有レイアウトやスタイルを作成
+ // ここで共有レイアウトやスタイルを作成します
return {children}
}
```
@@ -582,7 +594,7 @@ export default function MdxLayout({ children }: { children: React.ReactNode }) {
```jsx title="components/mdx-layout.js" switcher
export default function MdxLayout({ children }) {
- // ここで共有レイアウトやスタイルを作成
+ // ここで共有レイアウトやスタイルを作成します
return {children}
}
```
@@ -590,7 +602,7 @@ export default function MdxLayout({ children }) {
{children}
@@ -634,7 +646,7 @@ export default function MdxLayout({ children }: { children: React.ReactNode }) {
```jsx title="app/mdx-page/layout.js" switcher
export default function MdxLayout({ children }) {
- // ここで共有レイアウトやスタイルを作成
+ // ここで共有レイアウトやスタイルを作成します
return (
{children}
@@ -657,7 +669,7 @@ MDXページ周りでレイアウトを共有するには、レイアウトコ
```tsx title="components/mdx-layout.tsx" switcher
export default function MdxLayout({ children }: { children: React.ReactNode }) {
- // ここで共有レイアウトやスタイルを作成
+ // ここで共有レイアウトやスタイルを作成します
return (
{children}
@@ -671,7 +683,7 @@ export default function MdxLayout({ children }: { children: React.ReactNode }) {
```jsx title="components/mdx-layout.js" switcher
export default function MdxLayout({ children }) {
- // ここで共有レイアウトやスタイルを作成
+ // ここで共有レイアウトやスタイルを作成します
return (
{children}
@@ -683,7 +695,7 @@ export default function MdxLayout({ children }) {
-次に、MDXページにレイアウトコンポーネントをインポートし、MDXコンテンツをレイアウトでラップしてエクスポートします:
+次に、レイアウトコンポーネントをMDXページにインポートし、MDXコンテンツをレイアウトでラップしてエクスポートします:
```mdx
import MdxLayout from '../components/mdx-layout'
@@ -700,13 +712,13 @@ export default function MDXPage({ children }) {
## Frontmatter {#frontmatter}
-Frontmatterは、ページに関するデータを保存するために使用できるYAMLのようなキー/値のペアリングです。`@next/mdx`はデフォルトではfrontmatterをサポートしていませんが、MDXコンテンツにfrontmatterを追加するための多くのソリューションがあります。例えば:
+Frontmatterは、ページに関するデータを保存するために使用されるYAMLのようなキー/値のペアリングです。`@next/mdx`はデフォルトではfrontmatterをサポートしていませんが、MDXコンテンツにfrontmatterを追加するための多くのソリューションがあります。例えば:
- [remark-frontmatter](https://github.com/remarkjs/remark-frontmatter)
- [remark-mdx-frontmatter](https://github.com/remcohaszing/remark-mdx-frontmatter)
- [gray-matter](https://github.com/jonschlinkert/gray-matter)
-`@next/mdx`は、他のJavaScriptコンポーネントと同様にエクスポートを使用することを**許可**しています:
+`@next/mdx`は、他のJavaScriptコンポーネントと同様にエクスポートを使用することを許可しています:
@@ -790,7 +802,7 @@ export default function Page() {
-これの一般的な使用例は、MDXのコレクションを反復処理してデータを抽出したい場合です。例えば、すべてのブログ投稿からブログインデックスページを作成する場合です。[Nodeの`fs`モジュール](https://nodejs.org/api/fs.html)や[globby](https://www.npmjs.com/package/globby)などのパッケージを使用して、投稿のディレクトリを読み取り、メタデータを抽出できます。
+これの一般的な使用例は、MDXのコレクションを反復処理してデータを抽出したい場合です。例えば、すべてのブログ投稿からブログインデックスページを作成することです。[Nodeの`fs`モジュール](https://nodejs.org/api/fs.html)や[globby](https://www.npmjs.com/package/globby)などのパッケージを使用して、投稿のディレクトリを読み取り、メタデータを抽出できます。
> **Good to know**:
>
@@ -811,7 +823,7 @@ import createMDX from '@next/mdx'
/** @type {import('next').NextConfig} */
const nextConfig = {
- // ファイルの.mdおよび.mdx拡張子を許可
+ // ファイルの.md拡張子を許可
pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
// 必要に応じて、他のNext.jsの設定を以下に追加
}
@@ -828,7 +840,7 @@ const withMDX = createMDX({
export default withMDX(nextConfig)
```
-### Turbopackでプラグインを使用する {#using-plugins-with-turbopack}
+### Turbopackでのプラグインの使用 {#using-plugins-with-turbopack}
[Turbopack](/docs/app/api-reference/turbopack)でプラグインを使用するには、最新の`@next/mdx`にアップグレードし、プラグイン名を文字列で指定します:
@@ -856,11 +868,11 @@ export default withMDX(nextConfig)
## リモートMDX {#remote-mdx}
-MDXファイルやコンテンツが*他の場所*にある場合、サーバー上で動的に取得できます。これは、CMS、データベース、または他の場所に保存されたコンテンツに便利です。この用途に人気のあるコミュニティパッケージは[`next-mdx-remote`](https://github.com/hashicorp/next-mdx-remote#react-server-components-rsc--nextjs-app-directory-support)です。
+MDXファイルやコンテンツが*他の場所に*ある場合、サーバー上で動的にフェッチできます。これは、CMS、データベース、または他の場所に保存されているコンテンツに便利です。この用途のためのコミュニティパッケージは[`next-mdx-remote-client`](https://github.com/ipikuka/next-mdx-remote-client?tab=readme-ov-file#the-part-associated-with-nextjs-app-router)です。
-> **Good to know**: 注意して進めてください。MDXはJavaScriptにコンパイルされ、サーバー上で実行されます。信頼できるソースからのみMDXコンテンツを取得する必要があります。そうしないと、リモートコード実行（RCE）につながる可能性があります。
+> **Good to know**: 注意して進めてください。MDXはJavaScriptにコンパイルされ、サーバー上で実行されます。信頼できるソースからのみMDXコンテンツをフェッチする必要があります。そうでない場合、リモートコード実行（RCE）につながる可能性があります。
-次の例では`next-mdx-remote`を使用しています:
+次の例では、`next-mdx-remote-client`を使用しています:
@@ -868,7 +880,7 @@ MDXファイルやコンテンツが*他の場所*にある場合、サーバー
```tsx title="app/mdx-page-remote/page.tsx" switcher
-import { MDXRemote } from 'next-mdx-remote/rsc'
+import { MDXRemote } from 'next-mdx-remote-client/rsc'
export default async function RemoteMdxPage() {
// MDXテキスト - データベース、CMS、フェッチ、どこからでも...
@@ -882,7 +894,7 @@ export default async function RemoteMdxPage() {
```jsx title="app/mdx-page-remote/page.js" switcher
-import { MDXRemote } from 'next-mdx-remote/rsc'
+import { MDXRemote } from 'next-mdx-remote-client/rsc'
export default async function RemoteMdxPage() {
// MDXテキスト - データベース、CMS、フェッチ、どこからでも...
@@ -903,22 +915,28 @@ export default async function RemoteMdxPage() {
```tsx title="pages/mdx-page-remote.tsx" switcher
-import { serialize } from 'next-mdx-remote/serialize'
-import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote'
-
-interface Props {
- mdxSource: MDXRemoteSerializeResult
+import {
+ serialize,
+ type SerializeResult,
+} from 'next-mdx-remote-client/serialize'
+import { MDXClient } from 'next-mdx-remote-client'
+
+type Props = {
+ mdxSource: SerializeResult
}
export default function RemoteMdxPage({ mdxSource }: Props) {
- return
```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,9 +204,9 @@ export const metadata = {
#### `_document.js` と `_app.js` の移行 {#migrating-document-js-and-app-js}
-既存の `_app` または `_document` ファイルがある場合、その内容（例：グローバルスタイル）を root レイアウト（`app/layout.tsx`）にコピーできます。`app/layout.tsx` のスタイルは `pages/*` には適用されません。移行中に `pages/*` ルートが壊れないように `_app`/`_document` を保持する必要があります。完全に移行が完了したら、それらを安全に削除できます。
+既存の `_app` または `_document` ファイルがある場合は、その内容（例：グローバルスタイル）を root レイアウト（`app/layout.tsx`）にコピーできます。`app/layout.tsx` のスタイルは `pages/*` には適用されません。移行中に `pages/*` ルートが壊れないようにするために、`_app`/`_document` を保持する必要があります。完全に移行が完了したら、それらを安全に削除できます。
-React Context プロバイダーを使用している場合、それらを [Client Component](/docs/app/building-your-application/rendering/client-components) に移動する必要があります。
+React Context プロバイダーを使用している場合は、それらを [Client Component](/docs/app/building-your-application/rendering/client-components) に移動する必要があります。
#### `getLayout()` パターンをレイアウトに移行する（オプション） {#migrating-the-getlayout-pattern-to-layouts-optional}
@@ -373,7 +373,7 @@ export default function Page() {
ページの移行を 2 つの主要なステップに分解することをお勧めします：
- ステップ 1: デフォルトでエクスポートされた Page コンポーネントを新しい Client Component に移動します。
-- ステップ 2: 新しい `page.js` ファイル内で新しい Client Component をインポートします。
+- ステップ 2: 新しい Client Component を `app` ディレクトリ内の新しい `page.js` ファイルにインポートします。
> **Good to know**: これは `pages` ディレクトリと最も比較可能な動作を持つため、最も簡単な移行パスです。
@@ -429,7 +429,7 @@ export default function HomePage({ recentPosts }) {
- `app` ディレクトリ内に新しい `app/page.tsx` ファイルを作成します。これはデフォルトで Server Component です。
- `home-page.tsx` Client Component をページにインポートします。
-- `pages/index.js` でデータをフェッチしていた場合、新しい [データフェッチ API](/docs/app/building-your-application/data-fetching/fetching) を使用してデータフェッチロジックを直接 Server Component に移動します。詳細は [データフェッチのアップグレードガイド](#step-6-migrating-data-fetching-methods) を参照してください。
+- `pages/index.js` でデータをフェッチしていた場合は、新しい [データフェッチ API](/docs/app/building-your-application/data-fetching/fetching) を使用してデータフェッチロジックを直接 Server Component に移動します。詳細は [データフェッチのアップグレードガイド](#step-6-migrating-data-fetching-methods) を参照してください。
@@ -476,7 +476,7 @@ export default async function Page() {
-- 以前のページで `useRouter` を使用していた場合、新しいルーティングフックに更新する必要があります。[詳細はこちら](/docs/app/api-reference/functions/use-router)。
+- 以前のページで `useRouter` を使用していた場合は、新しいルーティングフックに更新する必要があります。[詳細はこちら](/docs/app/api-reference/functions/use-router)。
- 開発サーバーを起動し、[`http://localhost:3000`](http://localhost:3000) にアクセスします。`app` ディレクトリを通じて提供される既存のインデックスルートが表示されるはずです。
### ステップ 5: ルーティングフックの移行 {#step-5-migrating-routing-hooks}
@@ -625,7 +625,7 @@ export default function Dashboard({ projects }) {
}
```
-App Router では、[Server Components](/docs/app/building-your-application/rendering/server-components) を使用して React コンポーネント内にデータフェッチを配置できます。これにより、クライアントに送信する JavaScript の量を減らしながら、サーバーからレンダリングされた HTML を維持できます。
+App Router では、[Server Components](/docs/app/building-your-application/rendering/server-components) を使用して React コンポーネント内にデータフェッチを配置できます。これにより、クライアントに送信する JavaScript の量を減らしながら、サーバーからのレンダリングされた HTML を維持できます。
`cache` オプションを `no-store` に設定することで、フェッチされたデータが [決してキャッシュされない](/docs/app/building-your-application/data-fetching/fetching) ことを示すことができます。これは `pages` ディレクトリの `getServerSideProps` に似ています。
@@ -726,8 +726,8 @@ async function getData() {
}
export default async function Page() {
- // `cookies` または `headers` を Server Components 内で
- // 直接またはデータフェッチ関数内で使用できます
+ // Server Components 内で `cookies` や `headers` を直接使用することができます
+ // またはデータフェッチ関数内で使用することができます
const theme = (await cookies()).get('theme')
const data = await getData()
return '...'
@@ -748,8 +748,8 @@ async function getData() {
}
export default async function Page() {
- // `cookies` または `headers` を Server Components 内で
- // 直接またはデータフェッチ関数内で使用できます
+ // Server Components 内で `cookies` や `headers` を直接使用することができます
+ // またはデータフェッチ関数内で使用することができます
const theme = (await cookies()).get('theme')
const data = await getData()
return '...'
@@ -761,7 +761,7 @@ export default async function Page() {
#### 静的サイト生成 (`getStaticProps`) {#static-site-generation-getstaticprops}
-`pages` ディレクトリでは、`getStaticProps` 関数を使用してビルド時にページをプリレンダリングします。この関数は、外部 API からデータをフェッチしたり、データベースから直接データを取得したりして、このデータをページ全体に渡すために使用されます。
+`pages` ディレクトリでは、`getStaticProps` 関数を使用してビルド時にページをプリレンダリングします。この関数は、外部 API からデータをフェッチしたり、データベースから直接データを取得したりして、ビルド中に生成されるページ全体にこのデータを渡すことができます。
```jsx title="pages/index.js"
// `pages` ディレクトリ
@@ -826,7 +826,7 @@ export default function Post({ post }) {
`app` ディレクトリでは、`getStaticPaths` は [`generateStaticParams`](/docs/app/api-reference/functions/generate-static-params) に置き換えられました。
-[`generateStaticParams`](/docs/app/api-reference/functions/generate-static-params) は `getStaticPaths` と同様に動作しますが、ルートパラメータを返すためのシンプルな API を持ち、[レイアウト](/docs/app/building-your-application/routing/layouts-and-templates) 内で使用できます。`generateStaticParams` の戻り値の形は、ネストされた `param` オブジェクトの配列や解決されたパスの文字列ではなく、セグメントの配列です。
+[`generateStaticParams`](/docs/app/api-reference/functions/generate-static-params) は `getStaticPaths` と同様に動作しますが、ルートパラメータを返すための簡素化された API を持ち、[レイアウト](/docs/app/building-your-application/routing/layouts-and-templates) 内で使用できます。`generateStaticParams` の戻り値の形状は、ネストされた `param` オブジェクトの配列ではなく、解決されたパスの文字列の配列です。
```jsx title="app/posts/[id]/page.js"
// `app` ディレクトリ
@@ -850,13 +850,13 @@ export default async function Post({ params }) {
}
```
-`app` ディレクトリの新しいモデルにおいて、`generateStaticParams` という名前を使用することは `getStaticPaths` よりも適切です。`get` プレフィックスは、`getStaticProps` や `getServerSideProps` がもはや必要ないため、より説明的な `generate` に置き換えられています。`Paths` サフィックスは、複数の動的セグメントを持つネストされたルーティングに対してより適切な `Params` に置き換えられています。
+`app` ディレクトリの新しいモデルには `generateStaticParams` という名前が `getStaticPaths` よりも適しています。`get` プレフィックスは、`getStaticProps` や `getServerSideProps` がもはや必要ないため、より説明的な `generate` に置き換えられています。`Paths` サフィックスは、複数の動的セグメントを持つネストされたルーティングにより適した `Params` に置き換えられています。
---
#### `fallback` の置き換え {#replacing-fallback}
-`pages` ディレクトリでは、`getStaticPaths` から返される `fallback` プロパティを使用して、ビルド時にプリレンダリングされていないページの動作を定義します。このプロパティは、ページが生成される間にフォールバックページを表示するために `true` に設定したり、404 ページを表示するために `false` に設定したり、リクエスト時にページを生成するために `blocking` に設定したりできます。
+`pages` ディレクトリでは、`getStaticPaths` から返される `fallback` プロパティを使用して、ビルド時にプリレンダリングされていないページの動作を定義します。このプロパティは、ページが生成されている間にフォールバックページを表示するために `true` に設定したり、404 ページを表示するために `false` に設定したり、リクエスト時にページを生成するために `blocking` に設定したりできます。
```jsx title="pages/posts/[id].js"
// `pages` ディレクトリ
@@ -877,12 +877,12 @@ export default function Post({ post }) {
}
```
-`app` ディレクトリでは、[`config.dynamicParams` プロパティ](/docs/app/api-reference/file-conventions/route-segment-config#dynamicparams) が [`generateStaticParams`](/docs/app/api-reference/functions/generate-static-params) の外でのパラメータの処理方法を制御します：
+`app` ディレクトリでは、[`config.dynamicParams` プロパティ](/docs/app/api-reference/file-conventions/route-segment-config#dynamicparams) が [`generateStaticParams`](/docs/app/api-reference/functions/generate-static-params) の外部でのパラメータの処理方法を制御します：
- **`true`**: （デフォルト）`generateStaticParams` に含まれていない動的セグメントはオンデマンドで生成されます。
- **`false`**: `generateStaticParams` に含まれていない動的セグメントは 404 を返します。
-これは `pages` ディレクトリの `getStaticPaths` の `fallback: true | false | 'blocking'` オプションを置き換えます。`dynamicParams` に `fallback: 'blocking'` オプションは含まれていません。ストリーミングでは `'blocking'` と `true` の違いはわずかです。
+これは `pages` ディレクトリの `getStaticPaths` の `fallback: true | false | 'blocking'` オプションを置き換えます。`dynamicParams` には `fallback: 'blocking'` オプションは含まれていません。ストリーミングでは `'blocking'` と `true` の違いはわずかです。
```jsx title="app/posts/[id]/page.js"
// `app` ディレクトリ
@@ -908,7 +908,7 @@ export default async function Post({ params }) {
#### インクリメンタル静的再生成 (`getStaticProps` with `revalidate`) {#incremental-static-regeneration-getstaticprops-with-revalidate}
-`pages` ディレクトリでは、`getStaticProps` 関数を使用して、一定の時間が経過した後にページを自動的に再生成するための `revalidate` フィールドを追加できます。
+`pages` ディレクトリでは、`getStaticProps` 関数を使用して、一定時間後にページを自動的に再生成するための `revalidate` フィールドを追加できます。
```jsx title="pages/index.js"
// `pages` ディレクトリ
@@ -974,7 +974,7 @@ export async function GET(request) {}
-> **Good to know**: 以前にクライアントから外部 API を呼び出すために API ルートを使用していた場合、代わりに [Server Components](/docs/app/building-your-application/rendering/server-components) を使用してデータを安全にフェッチできます。[データフェッチ](/docs/app/building-your-application/data-fetching/fetching) について詳しく学びましょう。
+> **Good to know**: 以前にクライアントから外部 API を呼び出すために API ルートを使用していた場合は、代わりに [Server Components](/docs/app/building-your-application/rendering/server-components) を使用してデータを安全にフェッチできます。[データフェッチ](/docs/app/building-your-application/data-fetching/fetching) について詳しく学びましょう。
#### シングルページアプリケーション {#single-page-applications}
@@ -987,13 +987,13 @@ export async function GET(request) {}
- [CSS Modules](/docs/app/building-your-application/styling/css#css-modules)
- [Tailwind CSS](/docs/app/building-your-application/styling/tailwind-css)
- [グローバルスタイル](/docs/app/building-your-application/styling/css#global-styles)
-- [CSS-in-JS](/docs/app/building-your-application/styling/css-in-js)
+- [CSS-in-JS](/docs/app/guides/css-in-js)
- [外部スタイルシート](/docs/app/building-your-application/styling/css#external-stylesheets)
-- [Sass](/docs/app/building-your-application/styling/sass)
+- [Sass](/docs/app/guides/sass)
#### Tailwind CSS {#tailwind-css}
-Tailwind CSS を使用している場合、`tailwind.config.js` ファイルに `app` ディレクトリを追加する必要があります：
+Tailwind CSS を使用している場合は、`tailwind.config.js` ファイルに `app` ディレクトリを追加する必要があります：
```js title="tailwind.config.js"
module.exports = {
@@ -1021,7 +1021,7 @@ export default function RootLayout({ children }) {
[Tailwind CSS を使用したスタイリング](/docs/app/building-your-application/styling/tailwind-css) について詳しく学びましょう。
-## App Router と Pages Router の併用 {#using-app-router-together-with-pages-router}
+## App Router と Pages Router を一緒に使用する {#using-app-router-together-with-pages-router}
異なる Next.js ルーターによって提供されるルート間をナビゲートする際には、ハードナビゲーションが発生します。`next/link` を使用した自動リンクプリフェッチは、ルーター間でプリフェッチしません。
diff --git a/docs/01-app/02-guides/migrating/from-create-react-app.mdx b/docs/01-app/02-guides/migrating/from-create-react-app.mdx
index 5c3415e6..72a0ecd3 100644
--- a/docs/01-app/02-guides/migrating/from-create-react-app.mdx
+++ b/docs/01-app/02-guides/migrating/from-create-react-app.mdx
@@ -10,20 +10,20 @@ description: '既存の React アプリケーションを Create React App か
Create React App から Next.js に移行したい理由はいくつかあります：
-### 初期ページ読み込み時間の遅さ {#slow-initial-page-loading-time}
+### 初期ページの読み込み時間が遅い {#slow-initial-page-loading-time}
-Create React App は純粋にクライアントサイドの React を使用しています。クライアントサイドのみのアプリケーション、別名 [シングルページアプリケーション (SPA)](/docs/app/guides/single-page-applications) は、初期ページ読み込み時間が遅くなることがよくあります。これは以下の理由によります：
+Create React App は純粋にクライアントサイドの React を使用しています。クライアントサイドのみのアプリケーション、別名 [シングルページアプリケーション (SPA)](/docs/app/guides/single-page-applications) は、初期ページの読み込み時間が遅くなることがよくあります。これにはいくつかの理由があります：
-1. ブラウザは、React コードとアプリケーション全体のバンドルがダウンロードされて実行されるまで待つ必要があります。
-2. 新しい機能や依存関係を追加するたびにアプリケーションコードが増加します。
+1. ブラウザは、React コードとアプリケーション全体のバンドルがダウンロードされて実行されるのを待つ必要があり、その後にコードがデータをロードするためのリクエストを送信できるようになります。
+2. 新しい機能や依存関係を追加するたびに、アプリケーションコードが増加します。
### 自動コード分割がない {#no-automatic-code-splitting}
-前述の読み込み時間の遅さの問題は、コード分割である程度緩和できます。しかし、手動でコード分割を試みると、ネットワークウォーターフォールを引き起こす可能性があります。Next.js は、自動コード分割と tree-shaking をルーターとビルドパイプラインに組み込んでいます。
+前述の読み込み時間の遅さの問題は、コード分割によってある程度緩和できます。しかし、手動でコード分割を試みると、ネットワークのウォーターフォールを意図せずに引き起こす可能性があります。Next.js は、自動コード分割と tree-shaking をルーターとビルドパイプラインに組み込んでいます。
### ネットワークウォーターフォール {#network-waterfalls}
-パフォーマンスが悪化する一般的な原因は、データを取得するためにクライアントとサーバー間で順次リクエストを行うことです。[SPA](/docs/app/guides/single-page-applications) でのデータ取得のパターンの1つは、プレースホルダーをレンダリングし、コンポーネントがマウントされた後にデータを取得することです。残念ながら、子コンポーネントは親が自身のデータを読み込んだ後でしかデータを取得できないため、リクエストの「ウォーターフォール」が発生します。
+アプリケーションがデータを取得するためにクライアントとサーバー間で順次リクエストを行うと、パフォーマンスが低下する一般的な原因となります。[SPA](/docs/app/guides/single-page-applications) でのデータ取得のパターンの1つは、プレースホルダーをレンダリングし、コンポーネントがマウントされた後にデータを取得することです。残念ながら、子コンポーネントは親が自身のデータを読み込んだ後でしかデータを取得できないため、リクエストの「ウォーターフォール」が発生します。
Next.js ではクライアントサイドのデータ取得もサポートされていますが、データ取得をサーバーに移動することもできます。これにより、クライアントとサーバー間のウォーターフォールが完全に排除されることがよくあります。
@@ -35,21 +35,21 @@ Next.js ではクライアントサイドのデータ取得もサポートされ
### データ取得戦略の選択 {#choose-the-data-fetching-strategy}
-必要に応じて、Next.js ではページまたはコンポーネントレベルでデータ取得戦略を選択できます。たとえば、CMS からデータを取得し、ビルド時（SSG）にブログ投稿をレンダリングして高速な読み込み速度を実現したり、必要に応じてリクエスト時（SSR）にデータを取得したりできます。
+ニーズに応じて、Next.js ではページまたはコンポーネントレベルでデータ取得戦略を選択できます。たとえば、CMS からデータを取得し、ビルド時（SSG）にブログ投稿をレンダリングして高速な読み込み速度を実現したり、必要に応じてリクエスト時（SSR）にデータを取得したりできます。
### ミドルウェア {#middleware}
-[Next.js ミドルウェア](/docs/app/building-your-application/routing/middleware) を使用すると、リクエストが完了する前にサーバー上でコードを実行できます。たとえば、認証が必要なページのミドルウェアでユーザーをログインページにリダイレクトすることで、未認証コンテンツのフラッシュを回避できます。また、A/B テスト、実験、[国際化](/docs/app/building-your-application/routing/internationalization) などの機能にも使用できます。
+[Next.js ミドルウェア](/docs/app/building-your-application/routing/middleware) を使用すると、リクエストが完了する前にサーバーでコードを実行できます。たとえば、認証が必要なページのミドルウェアでユーザーをログインページにリダイレクトすることで、未認証コンテンツのフラッシュを回避できます。また、A/B テスト、実験、[国際化](/docs/app/building-your-application/routing/internationalization) などの機能にも使用できます。
### 組み込みの最適化 {#built-in-optimizations}
-[画像](/docs/app/building-your-application/optimizing/images)、[フォント](/docs/app/building-your-application/optimizing/fonts)、および[サードパーティスクリプト](/docs/app/building-your-application/optimizing/scripts) は、アプリケーションのパフォーマンスに大きな影響を与えることがよくあります。Next.js には、これらを自動的に最適化するための専用コンポーネントと API が含まれています。
+[画像](/docs/app/building-your-application/optimizing/images)、[フォント](/docs/app/building-your-application/optimizing/fonts)、および[サードパーティスクリプト](/docs/app/guides/scripts) は、アプリケーションのパフォーマンスに大きな影響を与えることがよくあります。Next.js には、これらを自動的に最適化するための専用コンポーネントと API が含まれています。
## 移行手順 {#migration-steps}
-私たちの目標は、できるだけ早く動作する Next.js アプリケーションを作成し、その後で Next.js の機能を段階的に採用できるようにすることです。まず、アプリケーションを純粋なクライアントサイドアプリケーション（[SPA](/docs/app/guides/single-page-applications)）として扱い、既存のルーターをすぐに置き換えないようにします。これにより、複雑さとマージの競合が軽減されます。
+目標は、できるだけ早く動作する Next.js アプリケーションを作成し、その後で Next.js の機能を段階的に採用できるようにすることです。まず、アプリケーションを純粋なクライアントサイドアプリケーション（[SPA](/docs/app/guides/single-page-applications)）として扱い、既存のルーターをすぐに置き換えないようにします。これにより、複雑さとマージの競合が軽減されます。
-> **注意**: `package.json` のカスタム `homepage` フィールド、カスタムサービスワーカー、特定の Babel/webpack 調整など、CRA の高度な設定を使用している場合は、Next.js でこれらの機能を再現または適応するためのヒントについて、このガイドの最後にある **追加の考慮事項** セクションを参照してください。
+> **注意**: `package.json` のカスタム `homepage` フィールド、カスタムサービスワーカー、特定の Babel/webpack 調整など、CRA の高度な設定を使用している場合は、ガイドの最後にある **追加の考慮事項** セクションを参照して、これらの機能を Next.js で再現または適応するためのヒントを確認してください。
### ステップ 1: Next.js の依存関係をインストールする {#step-1-install-the-next-js-dependency}
@@ -61,28 +61,28 @@ npm install next@latest
### ステップ 2: Next.js の設定ファイルを作成する {#step-2-create-the-next-js-configuration-file}
-プロジェクトの root に `next.config.ts` を作成します（`package.json` と同じレベル）。このファイルには、[Next.js の設定オプション](/docs/app/api-reference/config/next-config-js)が含まれます。
+プロジェクトの root に `next.config.ts` を作成します（`package.json` と同じレベル）。このファイルには [Next.js の設定オプション](/docs/app/api-reference/config/next-config-js) が含まれます。
```js title="next.config.ts"
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
- output: 'export', // シングルページアプリケーション (SPA) を出力します
- distDir: 'build', // ビルド出力ディレクトリを `build` に変更します
+ output: 'export', // シングルページアプリケーション (SPA) を出力
+ distDir: 'build', // ビルド出力ディレクトリを `build` に変更
}
export default nextConfig
```
-> **注意**: `output: 'export'` を使用すると、静的エクスポートを行っていることを意味します。サーバーサイドの機能（SSR や API など）にはアクセスできません。Next.js のサーバー機能を活用するには、この行を削除できます。
+> **注意**: `output: 'export'` を使用すると、静的エクスポートを行っていることを意味します。サーバーサイドの機能（SSR や API など）にはアクセスできません。この行を削除すると、Next.js のサーバー機能を活用できます。
-### ステップ 3: Root レイアウトを作成する {#step-3-create-the-root-layout}
+### ステップ 3: root レイアウトを作成する {#step-3-create-the-root-layout}
Next.js [App Router](/docs/app) アプリケーションには、すべてのページをラップする [root レイアウト](/docs/app/building-your-application/routing/layouts-and-templates#root-layout-required) ファイルが必要です。これは、[React Server Component](/docs/app/building-your-application/rendering/server-components) です。
CRA アプリケーションでの root レイアウトファイルに最も近いものは、``、``、および `` タグを含む `public/index.html` です。
-1. `src` ディレクトリ内に新しい `app` ディレクトリを作成します（または、`app` を root に配置する場合はプロジェクトの root に作成します）。
+1. `src` フォルダ内に新しい `app` ディレクトリを作成します（または、`app` を root に配置する場合はプロジェクトの root に作成します）。
2. `app` ディレクトリ内に `layout.tsx`（または `layout.js`）ファイルを作成します：
@@ -110,7 +110,7 @@ export default function RootLayout({ children }) {
-古い `index.html` の内容をこの `` コンポーネントにコピーします。`body div#root`（および `body noscript`）を `` コンポーネントにコピーします。`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}
-Next.js は `` と `` タグを自動的に含めるため、`` から削除できます：
+Next.js は自動的に `` と `` タグを含めるため、`` から削除できます：
@@ -216,7 +216,7 @@ export default function RootLayout({ children }) {
-`favicon.ico`、`icon.png`、`robots.txt` などの[メタデータファイル](/docs/app/building-your-application/optimizing/metadata#file-based-metadata)は、`app` ディレクトリのトップレベルに配置されている限り、アプリケーションの `` タグに自動的に追加されます。すべての[サポートされているファイル](/docs/app/building-your-application/optimizing/metadata#file-based-metadata)を `app` ディレクトリに移動した後、それらの `` タグを安全に削除できます：
+`favicon.ico`、`icon.png`、`robots.txt` などの[メタデータファイル](/docs/app/building-your-application/optimizing/metadata#file-based-metadata)は、`app` ディレクトリのトップレベルに配置されている限り、自動的にアプリケーションの `` タグに追加されます。すべての[サポートされているファイル](/docs/app/building-your-application/optimizing/metadata#file-based-metadata)を `app` ディレクトリに移動した後、`` タグを安全に削除できます：
@@ -314,11 +314,11 @@ export default function RootLayout({ children }) {
-上記の変更により、`index.html` にすべてを宣言する方法から、フレームワークに組み込まれた Next.js の規約ベースのアプローチ（[Metadata API](/docs/app/building-your-application/optimizing/metadata)）を使用する方法に移行しました。このアプローチにより、ページの SEO とウェブの共有性をより簡単に向上させることができます。
+上記の変更により、`index.html` にすべてを宣言するのではなく、Next.js のフレームワークに組み込まれた規約ベースのアプローチ（[Metadata API](/docs/app/building-your-application/optimizing/metadata)）を使用するようにシフトしました。このアプローチにより、ページの SEO とウェブの共有性をより簡単に向上させることができます。
### ステップ 5: スタイル {#step-5-styles}
-CRA と同様に、Next.js は [CSS Modules](/docs/app/building-your-application/styling/css#css-modules) を標準でサポートしています。また、[グローバル CSS インポート](/docs/app/building-your-application/styling/css#global-styles)もサポートしています。
+CRA と同様に、Next.js は [CSS Modules](/docs/app/building-your-application/styling/css#css-modules) を標準でサポートしています。また、[グローバル CSS インポート](/docs/app/building-your-application/styling/css#global-styles) もサポートしています。
グローバル CSS ファイルがある場合は、`app/layout.tsx` にインポートします：
@@ -357,7 +357,7 @@ Tailwind CSS を使用している場合は、[インストールドキュメン
Create React App は `src/index.tsx`（または `index.js`）をエントリーポイントとして使用します。Next.js（App Router）では、`app` ディレクトリ内の各フォルダがルートに対応し、各フォルダには `page.tsx` が必要です。
-現在のところアプリを SPA として保持し、**すべて**のルートをインターセプトしたいので、[optional catch-all route](/docs/app/building-your-application/routing/dynamic-routes#optional-catch-all-segments) を使用します。
+アプリを SPA として保持し、**すべて**のルートをインターセプトしたいので、[オプショナルキャッチオールルート](/docs/app/building-your-application/routing/dynamic-routes#optional-catch-all-segments) を使用します。
1. **`app` 内に `[[...slug]]` ディレクトリを作成します。**
@@ -399,11 +399,11 @@ export default function Page() {
-これは Next.js に空のスラッグ（`/`）のための単一のルートを生成するよう指示し、**すべて**のルートを同じページにマッピングします。このページは[Server Component](/docs/app/building-your-application/rendering/server-components)であり、静的 HTML にプリレンダリングされます。
+これは、Next.js に空のスラッグ（`/`）の単一ルートを生成するよう指示し、**すべて**のルートを同じページにマッピングします。このページは[Server Component](/docs/app/building-your-application/rendering/server-components)であり、静的 HTML にプリレンダリングされます。
### ステップ 7: クライアント専用のエントリーポイントを追加する {#step-7-add-a-client-only-entrypoint}
-次に、CRA の root App コンポーネントを[Client Component](/docs/app/building-your-application/rendering/client-components)内に埋め込み、すべてのロジックをクライアントサイドに残します。Next.js を初めて使用する場合、クライアントコンポーネント（デフォルトでは）もサーバーでプリレンダリングされることを知っておく価値があります。クライアントサイドの JavaScript を実行する追加の機能を持っていると考えることができます。
+次に、CRA の root App コンポーネントを [Client Component](/docs/app/building-your-application/rendering/client-components) 内に埋め込み、すべてのロジックをクライアントサイドに保持します。Next.js を初めて使用する場合、クライアントコンポーネント（デフォルトでは）もサーバーでプリレンダリングされることを知っておく価値があります。クライアントサイドの JavaScript を実行する追加の機能を持っていると考えることができます。
`app/[[...slug]]/` に `client.tsx`（または `client.js`）を作成します：
@@ -440,8 +440,8 @@ export function ClientOnly() {
-- `'use client'` ディレクティブは、このファイルを**クライアントコンポーネント**にします。
-- `dynamic` インポートと `ssr: false` は `` コンポーネント](/docs/app/api-reference/components/image)で直接使用することができ、または既存の `![]()
` タグでオブジェクトの `src` プロパティを使用することができます。
+Next.js では、静的画像インポートはオブジェクトを返します。このオブジェクトは Next.js の [`` コンポーネント](/docs/app/api-reference/components/image) で直接使用することができ、または既存の `![]()
` タグでオブジェクトの `src` プロパティを使用することができます。
-`` コンポーネントには[自動画像最適化](/docs/app/building-your-application/optimizing/images)の追加の利点があります。`` コンポーネントは、画像の寸法に基づいて結果の `![]()
` の `width` と `height` 属性を自動的に設定します。これにより、画像が読み込まれるときのレイアウトシフトを防ぎます。ただし、アプリに寸法の一方のみがスタイルされ、他方が `auto` にスタイルされていない画像が含まれている場合、問題が発生する可能性があります。`auto` にスタイルされていない場合、寸法は `![]()
` の寸法属性の値にデフォルト設定され、画像が歪んで表示される可能性があります。
+`` コンポーネントには[自動画像最適化](/docs/app/building-your-application/optimizing/images)の追加の利点があります。`` コンポーネントは、画像の寸法に基づいて結果の `![]()
` の `width` と `height` 属性を自動的に設定します。これにより、画像が読み込まれるときのレイアウトシフトを防ぎます。ただし、アプリに寸法の一方のみがスタイル設定され、他方が `auto` に設定されていない画像が含まれている場合、問題が発生する可能性があります。`auto` に設定されていない場合、寸法は `![]()
` の寸法属性の値にデフォルト設定され、画像が歪んで表示される可能性があります。
-`![]()
` タグを保持することで、アプリケーションの変更量を減らし、上記の問題を防ぐことができます。その後、[ローダーを設定](/docs/app/building-your-application/optimizing/images#loaders)するか、画像を自動的に最適化するデフォルトの Next.js サーバーに移行することで、画像を最適化するために `` コンポーネントに移行することができます。
+`![]()
` タグを保持することで、アプリケーションの変更を減らし、上記の問題を防ぐことができます。その後、[ローダーを設定](/docs/app/building-your-application/optimizing/images#loaders)して画像を最適化するために `` コンポーネントに移行するか、自動画像最適化を備えたデフォルトの Next.js サーバーに移行することができます。
**`/public` からインポートされた画像の絶対インポートパスを相対インポートに変換します：**
```tsx
-// 変更前
+// Before
import logo from '/logo.png'
-// 変更後
+// After
import logo from '../public/logo.png'
```
**画像オブジェクト全体ではなく、画像の `src` プロパティを `![]()
` タグに渡します：**
```tsx
-// 変更前
+// Before
-// 変更後
+// After
```
または、ファイル名に基づいて画像アセットの公開 URL を参照することもできます。たとえば、`public/logo.png` はアプリケーションの `/logo.png` で画像を提供し、これが `src` 値になります。
-> **警告**: TypeScript を使用している場合、`src` プロパティにアクセスするときに型エラーが発生する可能性があります。これを修正するには、`tsconfig.json` ファイルの [`include` 配列](https://www.typescriptlang.org/tsconfig#include)に `next-env.d.ts` を追加する必要があります。Next.js は、ステップ 9 でアプリケーションを実行するときにこのファイルを自動的に生成します。
+> **警告:** TypeScript を使用している場合、`src` プロパティにアクセスするときに型エラーが発生する可能性があります。これを修正するには、`tsconfig.json` ファイルの [`include` 配列](https://www.typescriptlang.org/tsconfig#include) に `next-env.d.ts` を追加する必要があります。Next.js は、ステップ 9 でアプリケーションを実行するときにこのファイルを自動的に生成します。
### ステップ 9: 環境変数を移行する {#step-9-migrate-environment-variables}
-Next.js は CRA と同様に[環境変数](/docs/app/building-your-application/configuring/environment-variables)をサポートしていますが、ブラウザで公開したい変数には `NEXT_PUBLIC_` プレフィックスが**必要**です。
+Next.js は CRA と同様に[環境変数](/docs/app/guides/environment-variables)をサポートしていますが、ブラウザで公開したい変数には `NEXT_PUBLIC_` プレフィックスが**必要**です。
主な違いは、クライアントサイドで環境変数を公開するために使用されるプレフィックスです。`REACT_APP_` プレフィックスを持つすべての環境変数を `NEXT_PUBLIC_` に変更します。
@@ -568,7 +568,7 @@ Create React App に特有のアーティファクトを削除できます：
### CRA でカスタム `homepage` を使用する {#using-a-custom-homepage-in-cra}
-CRA の `package.json` で `homepage` フィールドを使用してアプリを特定のサブパスで提供していた場合、Next.js の `next.config.ts` で [`basePath` 設定](/docs/app/api-reference/config/next-config-js/basePath)を使用してそれを再現できます：
+CRA の `package.json` で `homepage` フィールドを使用してアプリを特定のサブパスで提供していた場合、Next.js の `next.config.ts` で [`basePath` 設定](/docs/app/api-reference/config/next-config-js/basePath) を使用してそれを再現できます：
```ts title="next.config.ts"
import { NextConfig } from 'next'
@@ -583,11 +583,11 @@ export default nextConfig
### カスタム `Service Worker` の処理 {#handling-a-custom-service-worker}
-CRA のサービスワーカー（例：`create-react-app` の `serviceWorker.js`）を使用していた場合、Next.js で[プログレッシブウェブアプリケーション (PWA)](/docs/app/building-your-application/configuring/progressive-web-apps)を作成する方法を学ぶことができます。
+CRA のサービスワーカー（例：`create-react-app` の `serviceWorker.js`）を使用していた場合、Next.js で[プログレッシブウェブアプリケーション (PWA)](/docs/app/guides/progressive-web-apps) を作成する方法を学ぶことができます。
### API リクエストのプロキシ {#proxying-api-requests}
-CRA アプリで `package.json` の `proxy` フィールドを使用してバックエンドサーバーへのリクエストを転送していた場合、`next.config.ts` で [Next.js のリライト](/docs/app/api-reference/config/next-config-js/rewrites)を使用してこれを再現できます：
+CRA アプリで `package.json` の `proxy` フィールドを使用してバックエンドサーバーへのリクエストを転送していた場合、`next.config.ts` で [Next.js のリライト](/docs/app/api-reference/config/next-config-js/rewrites) を使用してこれを再現できます：
```ts title="next.config.ts"
import { NextConfig } from 'next'
@@ -613,7 +613,7 @@ import { NextConfig } from 'next'
const nextConfig: NextConfig = {
webpack: (config, { isServer }) => {
- // ここで webpack 設定を変更します
+ // ここで webpack 設定を変更
return config
},
}
@@ -621,7 +621,7 @@ const nextConfig: NextConfig = {
export default nextConfig
```
-> **注意**: これには `dev` スクリプトから `--turbopack` を削除して Turbopack を無効にする必要があります。
+> **注意**: これには、`dev` スクリプトから `--turbopack` を削除して Turbopack を無効にする必要があります。
### TypeScript のセットアップ {#typescript-setup}
@@ -635,25 +635,25 @@ Next.js は `tsconfig.json` がある場合、自動的に TypeScript をセッ
## バンドラーの互換性 {#bundler-compatibility}
-Create React App と Next.js はどちらもデフォルトで webpack をバンドリングに使用します。Next.js はまた、ローカル開発をより高速にするための [Turbopack](/docs/app/api-reference/config/next-config-js/turbopack) を提供しています：
+Create React App と Next.js はどちらもデフォルトで webpack をバンドリングに使用します。Next.js は、ローカル開発をより高速にするために [Turbopack](/docs/app/api-reference/config/next-config-js/turbopack) も提供しています：
```bash
next dev --turbopack
```
-CRA から高度な webpack 設定を移行する必要がある場合は、[カスタム webpack 設定](/docs/app/api-reference/config/next-config-js/webpack)を提供することもできます。
+CRA から高度な webpack 設定を移行する必要がある場合は、[カスタム webpack 設定](/docs/app/api-reference/config/next-config-js/webpack) を提供することもできます。
## 次のステップ {#next-steps}
すべてが正常に動作した場合、現在はシングルページアプリケーションとして動作する Next.js アプリケーションがあります。まだサーバーサイドレンダリングやファイルベースのルーティングなどの Next.js の機能を活用していませんが、これらを段階的に行うことができます：
-- [Next.js App Router](/docs/app/building-your-application/routing) に**React Router から移行**して：
+- **React Router から移行**して、以下のために [Next.js App Router](/docs/app/building-your-application/routing) を使用します：
- 自動コード分割
- [ストリーミングサーバーレンダリング](/docs/app/building-your-application/routing/loading-ui-and-streaming)
- [React Server Components](/docs/app/building-your-application/rendering/server-components)
-- [`` コンポーネント](/docs/app/building-your-application/optimizing/images)で**画像を最適化**
-- [`next/font`](/docs/app/building-your-application/optimizing/fonts)で**フォントを最適化**
-- [`
+```
+
+または、`dangerouslySetInnerHTML`プロパティを使用することもできます：
+
+```jsx
+
+```
+
+> **警告**: インラインスクリプトには`id`プロパティを割り当てる必要があり、Next.jsがスクリプトを追跡し、最適化するために必要です。
+
+### 追加コードの実行 {#executing-additional-code}
+
+イベントハンドラは、特定のイベントが発生した後に追加のコードを実行するためにScriptコンポーネントで使用できます：
+
+- `onLoad`: スクリプトの読み込みが完了した後にコードを実行します。
+- `onReady`: スクリプトの読み込みが完了し、コンポーネントがマウントされるたびにコードを実行します。
+- `onError`: スクリプトの読み込みに失敗した場合にコードを実行します。
+
+
+
+これらのハンドラは、`next/script`がインポートされ、`"use client"`がコードの最初の行として定義されている[Client Component](/docs/app/building-your-application/rendering/client-components)内で使用される場合にのみ動作します：
+
+
+
+
+```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}
` に置き換えます。