xiaoyu2er · xiaoyu2er · Jun 4, 2025 · Jun 2, 2025 · Jun 4, 2025
diff --git a/apps/docs/content/ja/docs/01-app/01-getting-started/01-installation.mdx b/apps/docs/content/ja/docs/01-app/01-getting-started/01-installation.mdx
@@ -0,0 +1,341 @@
+---
+source-updated-at: 2025-06-01T01:32:20.000Z
+translation-updated-at: 2025-06-02T20:02:28.869Z
+title: 新しいNext.jsプロジェクトのセットアップ方法
+nav_title: インストール
+description: 新しいNext.jsアプリケーションを`create-next-app`で作成する方法。TypeScriptやESLintのセットアップ、`next.config.js`ファイルの設定について説明します。
+---
+
+{/* このドキュメントの内容はApp RouterとPages Routerで共有されています。Pages Router固有のコンテンツを追加する場合は、`<PagesOnly>コンテンツ</PagesOnly>`コンポーネントを使用してください。共有コンテンツはコンポーネントでラップしないでください。 */}
+
+## システム要件
+
+開始する前に、システムが以下の要件を満たしていることを確認してください:
+
+- [Node.js 18.18](https://nodejs.org/) 以降
+- macOS、Windows（WSLを含む）、またはLinux
+
+## 自動インストール
+
+新しいNext.jsアプリを作成する最も簡単な方法は、[`create-next-app`](/docs/app/api-reference/cli/create-next-app)を使用することです。これにより、すべてが自動的にセットアップされます。プロジェクトを作成するには、以下を実行します:
+
+```bash filename="ターミナル"
+npx create-next-app@latest
+```
+
+インストール中に以下のプロンプトが表示されます:
+
+```txt filename="ターミナル"
+プロジェクト名を入力してください? my-app
+TypeScriptを使用しますか? No / Yes
+ESLintを使用しますか? No / Yes
+Tailwind CSSを使用しますか? No / Yes
+コードを`src/`ディレクトリ内に配置しますか? No / Yes
+App Routerを使用しますか? (推奨) No / Yes
+`next dev`にTurbopackを使用しますか? No / Yes
+インポートエイリアスをカスタマイズしますか? (`@/*`がデフォルト) No / Yes
+どのインポートエイリアスを設定しますか? @/*
+```
+
+プロンプトの後、[`create-next-app`](/docs/app/api-reference/cli/create-next-app)はプロジェクト名のフォルダを作成し、必要な依存関係をインストールします。
+
+## 手動インストール
+
+新しいNext.jsアプリを手動で作成するには、必要なパッケージをインストールします:
+
+```bash filename="ターミナル"
+npm install next@latest react@latest react-dom@latest
+```
+
+次に、以下のスクリプトを`package.json`ファイルに追加します:
+
+```json filename="package.json"
+{
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  }
+}
+```
+
+これらのスクリプトは、アプリケーション開発のさまざまな段階を参照しています:
+
+- `next dev`: 開発サーバーを起動します
+- `next build`: 本番用にアプリケーションをビルドします
+- `next start`: 本番サーバーを起動します
+- `next lint`: ESLintを実行します
+
+<AppOnly>
+
+### `app`ディレクトリの作成
+
+Next.jsはファイルシステムベースのルーティングを使用しており、アプリケーション内のルートはファイルの構造によって決定されます。
+
+`app`フォルダを作成します。次に、`app`内に`layout.tsx`ファイルを作成します。このファイルは[ルートレイアウト](/docs/app/api-reference/file-conventions/layout#root-layout)です。必須であり、`<html>`タグと`<body>`タグを含める必要があります。
+
+```tsx filename="app/layout.tsx" switcher
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+初期コンテンツを含むホームページ`app/page.tsx`を作成します:
+
+```tsx filename="app/page.tsx" switcher
+export default function Page() {
+  return <h1>Hello, Next.js!</h1>
+}
+```
+
+```jsx filename="app/page.js" switcher
+export default function Page() {
+  return <h1>Hello, Next.js!</h1>
+}
+```
+
+`layout.tsx`と`page.tsx`は、ユーザーがアプリケーションのルート(`/`)にアクセスしたときにレンダリングされます。
+
+<Image
+  alt="Appフォルダ構造"
+  srcLight="/docs/light/app-getting-started.png"
+  srcDark="/docs/dark/app-getting-started.png"
+  width="1600"
+  height="363"
+/>
+
+> **知っておくと便利**:
+>
+> - ルートレイアウトの作成を忘れた場合、`next dev`で開発サーバーを実行するとNext.jsが自動的にこのファイルを作成します
+> - オプションで、プロジェクトのルートに[`src`フォルダ](/docs/app/api-reference/file-conventions/src-folder)を使用して、アプリケーションコードを設定ファイルから分離できます
+
+</AppOnly>
+
+<PagesOnly>
+
+### `pages`ディレクトリの作成
+
+Next.jsはファイルシステムベースのルーティングを使用しており、アプリケーション内のルートはファイルの構造によって決定されます。
+
+プロジェクトのルートに`pages`ディレクトリを作成します。次に、`pages`フォルダ内に`index.tsx`ファイルを追加します。これがホームページ(`/`)になります:
+
+```tsx filename="pages/index.tsx" switcher
+export default function Page() {
+  return <h1>Hello, Next.js!</h1>
+}
+```
+
+```jsx filename="pages/index.js" switcher
+export default function Page() {
+  return <h1>Hello, Next.js!</h1>
+}
+```
+
+次に、`pages/`内に`_app.tsx`ファイルを追加してグローバルレイアウトを定義します。[カスタムAppファイル](/docs/pages/building-your-application/routing/custom-app)について詳しく学びましょう。
+
+```tsx filename="pages/_app.tsx" switcher
+import type { AppProps } from 'next/app'
+
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
+```
+
+```jsx filename="pages/_app.js" switcher
+export default function App({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+```
+
+最後に、`pages/`内に`_document.tsx`ファイルを追加して、サーバーからの初期レスポンスを制御します。[カスタムDocumentファイル](/docs/pages/building-your-application/routing/custom-document)について詳しく学びましょう。
+
+```tsx filename="pages/_document.tsx" switcher
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html>
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
+```
+
+```jsx filename="pages/_document.js" switcher
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html>
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
+```
+
+</PagesOnly>
+
+### `public`フォルダの作成（オプション）
+
+プロジェクトのルートに[`public`フォルダ](/docs/app/api-reference/file-conventions/public-folder)を作成して、画像、フォントなどの静的アセットを保存します。`public`内のファイルは、ベースURL(`/`)から始まるパスでコードから参照できます。
+
+これらのアセットはルートパス(`/`)を使用して参照できます。例えば、`public/profile.png`は`/profile.png`として参照できます:
+
+```tsx filename="app/page.tsx" highlight={4} switcher
+import Image from 'next/image'
+
+export default function Page() {
+  return <Image src="/profile.png" alt="Profile" width={100} height={100} />
+}
+```
+
+```jsx filename="app/page.js" highlight={4} switcher
+import Image from 'next/image'
+
+export default function Page() {
+  return <Image src="/profile.png" alt="Profile" width={100} height={100} />
+}
+```
+
+## 開発サーバーの実行
+
+1. `npm run dev`を実行して開発サーバーを起動します
+2. `http://localhost:3000`にアクセスしてアプリケーションを表示します
+3. <AppOnly>`app/page.tsx`</AppOnly><PagesOnly>`pages/index.tsx`</PagesOnly>ファイルを編集して保存し、ブラウザで更新された結果を確認します
+
+## TypeScriptのセットアップ
+
+> TypeScriptの最小バージョン: `v4.5.2`
+
+Next.jsにはTypeScriptサポートが組み込まれています。プロジェクトにTypeScriptを追加するには、ファイルを`.ts` / `.tsx`にリネームして`next dev`を実行します。Next.jsは必要な依存関係を自動的にインストールし、推奨設定オプションを含む`tsconfig.json`ファイルを追加します。
+
+<AppOnly>
+
+### IDEプラグイン
+
+Next.jsにはカスタムTypeScriptプラグインとタイプチェッカーが含まれており、VSCodeや他のコードエディターで高度なタイプチェックとオートコンプリートに使用できます。
+
+VS Codeでプラグインを有効にするには:
+
+1. コマンドパレットを開きます（`Ctrl/⌘` + `Shift` + `P`）
+2. "TypeScript: Select TypeScript Version"を検索
+3. "Use Workspace Version"を選択
+
+<Image
+  alt="TypeScriptコマンドパレット"
+  srcLight="/docs/light/typescript-command-palette.png"
+  srcDark="/docs/dark/typescript-command-palette.png"
+  width="1600"
+  height="637"
+/>
+
+</AppOnly>
+
+詳細については[TypeScriptリファレンス](/docs/app/api-reference/config/next-config-js/typescript)ページを参照してください。
+
+## ESLintのセットアップ
+
+Next.jsにはESLintが組み込まれています。`create-next-app`で新しいプロジェクトを作成すると、必要なパッケージが自動的にインストールされ、適切な設定が行われます。
+
+既存のプロジェクトに手動でESLintを追加するには、`next lint`をスクリプトとして`package.json`に追加します:
+
+```json filename="package.json"
+{
+  "scripts": {
+    "lint": "next lint"
+  }
+}
+```
+
+次に、`npm run lint`を実行すると、インストールと設定プロセスがガイドされます。
+
+```bash filename="ターミナル"
+npm run lint
+```
+
+以下のようなプロンプトが表示されます:
+
+> ? ESLintをどのように設定しますか?
+>
+> ❯ Strict (推奨)  
+> Base  
+> Cancel
+
+- **Strict**: Next.jsの基本ESLint設定に加えて、より厳格なCore Web Vitalsルールセットを含みます。ESLintを初めて設定する開発者に推奨される設定です
+- **Base**: Next.jsの基本ESLint設定を含みます
+- **Cancel**: 設定をスキップします。独自のカスタムESLint設定を計画している場合はこのオプションを選択してください
+
+`Strict`または`Base`が選択された場合、Next.jsは自動的に`eslint`と`eslint-config-next`を依存関係としてインストールし、選択した設定を含む`.eslintrc.json`ファイルをプロジェクトのルートに作成します。
+
+ESLintを実行してエラーを検出するには、`next lint`を実行します。ESLintが設定されると、ビルド時(`next build`)にも自動的に実行されます。エラーはビルドを失敗させますが、警告は失敗させません。
+
+詳細については[ESLintプラグイン](/docs/app/api-reference/config/next-config-js/eslint)ページを参照してください。
+
+## 絶対インポートとモジュールパスエイリアスの設定
+
+Next.jsは`tsconfig.json`と`jsconfig.json`ファイルの`"paths"`および`"baseUrl"`オプションをサポートしています。
+
+これらのオプションを使用すると、プロジェクトディレクトリを絶対パスにエイリアスできるため、モジュールのインポートがより簡単でクリーンになります。例えば:
+
+```jsx
+// 変更前
+import { Button } from '../../../components/button'
+
+// 変更後
+import { Button } from '@/components/button'
+```
+
+絶対インポートを設定するには、`baseUrl`設定オプションを`tsconfig.json`または`jsconfig.json`ファイルに追加します。例えば:
+
+```json filename="tsconfig.json または jsconfig.json"
+{
+  "compilerOptions": {
+    "baseUrl": "src/"
+  }
+}
+```
+
+`baseUrl`パスを設定するのに加えて、`"paths"`オプションを使用してモジュールパスを`"alias"`できます。
+
+例えば、以下の設定は`@/components/*`を`components/*`にマッピングします:
+
+```json filename="tsconfig.json または jsconfig.json"
+{
+  "compilerOptions": {
+    "baseUrl": "src/",
+    "paths": {
+      "@/styles/*": ["styles/*"],
+      "@/components/*": ["components/*"]
+    }
+  }
+}
+```
+
+各`"paths"`は`baseUrl`の場所からの相対パスです。