Skip to content

konjacbot: sync docs@b4e2158 #396

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

konjacbot: sync docs@b4e2158 #396

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 38 additions & 38 deletions docs/01-app/01-getting-started/01-installation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,20 @@ description: '`create-next-app` CLIを使用して新しい Next.js アプリケ

## システム要件 {#system-requirements}

始める前に、システムが次の要件を満たしていることを確認してください:
始める前に、システムが次の要件を満たしていることを確認してください：

- [Node.js 18.18](https://nodejs.org/) 以降
- macOS、Windows（WSLを含む）、またはLinux

## 自動インストール {#automatic-installation}

新しい Next.js アプリを作成する最も簡単な方法は、すべてを自動的にセットアップしてくれる [`create-next-app`](/docs/app/api-reference/cli/create-next-app) を使用することです。プロジェクトを作成するには、次のコマンドを実行します:
新しい Next.js アプリを作成する最も簡単な方法は、すべてを自動的にセットアップしてくれる [`create-next-app`](/docs/app/api-reference/cli/create-next-app) を使用することです。プロジェクトを作成するには、次のコマンドを実行します：

```bash title="Terminal"
npx create-next-app@latest
```

インストール時に、次のプロンプトが表示されます:
インストール時に、次のプロンプトが表示されます：

```txt title="Terminal"
What is your project named? my-app
Expand All @@ -39,13 +39,13 @@ What import alias would you like configured? @/*

## 手動インストール {#manual-installation}

新しい Next.js アプリを手動で作成するには、必要なパッケージをインストールします:
新しい Next.js アプリを手動で作成するには、必要なパッケージをインストールします：

```bash title="Terminal"
npm install next@latest react@latest react-dom@latest
```

次に、以下のスクリプトを `package.json` ファイルに追加します:
次に、`package.json` ファイルに以下のスクリプトを追加します：

```json title="package.json"
{
Expand All @@ -58,18 +58,18 @@ npm install next@latest react@latest react-dom@latest
}
```

これらのスクリプトは、アプリケーション開発のさまざまな段階を指します:
これらのスクリプトは、アプリケーション開発の異なる段階を指します：

- `next dev`: 開発サーバーを起動します
- `next build`: アプリケーションを本番用にビルドします
- `next start`: 本番サーバーを起動します
- `next lint`: ESLint を実行します
- `next dev`: 開発サーバーを起動します。
- `next build`: アプリケーションを本番用にビルドします。
- `next start`: 本番サーバーを起動します。
- `next lint`: ESLint を実行します。

<AppOnly>

### `app` ディレクトリの作成 {#create-the-app-directory}

Next.js はファイルシステムルーティングを使用しているため、アプリケーション内のルートはファイルの構造によって決まります。
Next.js はファイルシステムルーティングを使用しており、アプリケーション内のルートはファイルの構造によって決まります。

`app` フォルダを作成します。次に、`app` 内に `layout.tsx` ファイルを作成します。このファイルは [root レイアウト](/docs/app/api-reference/file-conventions/layout#root-layouts) です。これは必須であり、`<html>` と `<body>` タグを含める必要があります。

Expand Down Expand Up @@ -106,7 +106,7 @@ export default function RootLayout({ children }) {
</TabItem>
</Tabs>

初期コンテンツを含むホームページ `app/page.tsx` を作成します:
初期コンテンツを含むホームページ `app/page.tsx` を作成します：

<Tabs>
<TabItem value="tsx" label="TypeScript">
Expand All @@ -132,7 +132,7 @@ export default function Page() {
`layout.tsx` と `page.tsx` の両方が、ユーザーがアプリケーションの root (`/`) を訪れたときにレンダリングされます。

<Image
alt="App Folder Structure"
alt="App フォルダ構造"
srcLight="/docs/light/app-getting-started.png"
srcDark="/docs/dark/app-getting-started.png"
width="1600"
Expand All @@ -141,18 +141,18 @@ export default function Page() {

> **Good to know**:
>
> - root レイアウトの作成を忘れた場合、`next dev` で開発サーバーを実行すると、Next.js が自動的にこのファイルを作成します。
> - プロジェクトの root に [`src` ディレクトリ](/docs/app/building-your-application/configuring/src-directory) を使用して、アプリケーションのコードを設定ファイルから分離することができます。
> - root レイアウトの作成を忘れた場合、Next.js は `next dev` で開発サーバーを実行するときに自動的にこのファイルを作成します。
> - プロジェクトの root に [`src` フォルダ](/docs/app/api-reference/file-conventions/src-folder) を使用して、アプリケーションのコードを設定ファイルから分離することができます。

</AppOnly>

<PagesOnly>

### `pages` ディレクトリの作成 {#create-the-pages-directory}

Next.js はファイルシステムルーティングを使用しているため、アプリケーション内のルートはファイルの構造によって決まります。
Next.js はファイルシステムルーティングを使用しており、アプリケーション内のルートはファイルの構造によって決まります。

プロジェクトの root に `pages` ディレクトリを作成します。次に、`pages` フォルダ内に `index.tsx` ファイルを追加します。これがホームページ (`/`) になります:
プロジェクトの root に `pages` ディレクトリを作成します。次に、`pages` フォルダ内に `index.tsx` ファイルを追加します。これがホームページ (`/`) になります：

<Tabs>
<TabItem value="tsx" label="TypeScript">
Expand All @@ -175,7 +175,7 @@ export default function Page() {
</TabItem>
</Tabs>

次に、`pages/` 内に `_app.tsx` ファイルを追加して、グローバルレイアウトを定義します。[カスタム App ファイル](https://nextjs.org/docs/canary/pages/building-your-application/routing/custom-app) について詳しく学びましょう。
次に、`pages/` 内に `_app.tsx` ファイルを追加して、グローバルレイアウトを定義します。詳細は [カスタム App ファイル](https://nextjs.org/docs/canary/pages/building-your-application/routing/custom-app) を参照してください。

<Tabs>
<TabItem value="tsx" label="TypeScript">
Expand All @@ -200,7 +200,7 @@ export default function App({ Component, pageProps }) {
</TabItem>
</Tabs>

最後に、`pages/` 内に `_document.tsx` ファイルを追加して、サーバーからの初期レスポンスを制御します。[カスタム Document ファイル](https://nextjs.org/docs/canary/pages/building-your-application/routing/custom-document) について詳しく学びましょう。
最後に、`pages/` 内に `_document.tsx` ファイルを追加して、サーバーからの初期レスポンスを制御します。詳細は [カスタム Document ファイル](https://nextjs.org/docs/canary/pages/building-your-application/routing/custom-document) を参照してください。

<Tabs>
<TabItem value="tsx" label="TypeScript">
Expand Down Expand Up @@ -247,9 +247,9 @@ export default function Document() {

### `public` フォルダの作成（オプション） {#create-the-public-folder-optional}

プロジェクトの root に [`public` フォルダ](/docs/app/building-your-application/optimizing/static-assets) を作成して、画像やフォントなどの静的アセットを保存します。`public` 内のファイルは、ベースURL (`/`) から始まるコードで参照できます。
プロジェクトの root に [`public` フォルダ](/docs/app/api-reference/file-conventions/public-folder) を作成して、画像やフォントなどの静的アセットを保存します。`public` 内のファイルは、ベースURL (`/`) から始まるコードで参照できます。

これらのアセットは root パス (`/`) を使用して参照できます。たとえば、`public/profile.png` は `/profile.png` として参照できます:
これらのアセットは root パス (`/`) を使用して参照できます。たとえば、`public/profile.png` は `/profile.png` として参照できます：

<Tabs>
<TabItem value="tsx" label="TypeScript">
Expand Down Expand Up @@ -284,24 +284,24 @@ export default function Page() {

## TypeScript のセットアップ {#set-up-typescript}

> 最小 TypeScript バージョン: `v4.5.2`
> 最低 TypeScript バージョン：`v4.5.2`

Next.js には組み込みの TypeScript サポートがあります。プロジェクトに TypeScript を追加するには、ファイルを `.ts` / `.tsx` にリネームして `next dev` を実行します。Next.js は必要な依存関係を自動的にインストールし、推奨される設定オプションを含む `tsconfig.json` ファイルを追加します。

<AppOnly>

### IDE プラグイン {#ide-plugin}

Next.js にはカスタム TypeScript プラグインと型チェッカーが含まれており、VSCode や他のコードエディタで高度な型チェックや自動補完を利用できます。
Next.js にはカスタム TypeScript プラグインと型チェッカーが含まれており、VSCode や他のコードエディタで高度な型チェックと自動補完を利用できます。

VS Code でプラグインを有効にするには:
VS Code でプラグインを有効にするには：

1. コマンドパレットを開く（`Ctrl/⌘` + `Shift` + `P`）
2. 「TypeScript: Select TypeScript Version」を検索
3. 「Use Workspace Version」を選択

<Image
alt="TypeScript Command Palette"
alt="TypeScript コマンドパレット"
srcLight="/docs/light/typescript-command-palette.png"
srcDark="/docs/dark/typescript-command-palette.png"
width="1600"
Expand All @@ -314,9 +314,9 @@ VS Code でプラグインを有効にするには:

## ESLint のセットアップ {#set-up-eslint}

Next.js には組み込みの ESLint が含まれています。`create-next-app` で新しいプロジェクトを作成するときに、必要なパッケージが自動的にインストールされ、適切な設定が構成されます。
Next.js には組み込みの ESLint が含まれています。`create-next-app` で新しいプロジェクトを作成すると、必要なパッケージが自動的にインストールされ、適切な設定が行われます。

既存のプロジェクトに ESLint を手動で追加するには、`package.json` に `next lint` をスクリプトとして追加します:
既存のプロジェクトに ESLint を手動で追加するには、`package.json` に `next lint` をスクリプトとして追加します：

```json title="package.json"
{
Expand All @@ -332,39 +332,39 @@ Next.js には組み込みの ESLint が含まれています。`create-next-app
npm run lint
```

次のようなプロンプトが表示されます:
次のようなプロンプトが表示されます：

> ? How would you like to configure ESLint?
>
> ❯ Strict (recommended)
> Base
> Cancel

- **Strict**: Next.js の基本的な ESLint 設定に加えて、より厳格な Core Web Vitals ルールセットを含みます。初めて ESLint を設定する開発者に推奨される設定です。
- **Strict**: Next.js の基本的な ESLint 設定に加え、より厳しい Core Web Vitals ルールセットを含みます。初めて ESLint を設定する開発者に推奨される設定です。
- **Base**: Next.js の基本的な ESLint 設定を含みます。
- **Cancel**: 設定をスキップします。独自のカスタム ESLint 設定を設定する予定の場合、このオプションを選択します。
- **Cancel**: 設定をスキップします。独自のカスタム ESLint 設定を行う予定の場合、このオプションを選択してください。

`Strict` または `Base` が選択されると、Next.js は自動的に `eslint` と `eslint-config-next` をアプリケーションの依存関係としてインストールし、選択した設定を含む `.eslintrc.json` ファイルをプロジェクトの root に作成します。
`Strict` または `Base` を選択すると、Next.js は自動的に `eslint` と `eslint-config-next` をアプリケーションの依存関係としてインストールし、選択した設定を含む `.eslintrc.json` ファイルをプロジェクトの root に作成します。

ESLint を実行してエラーをキャッチしたいときは、`next lint` を実行できます。ESLint が設定されると、ビルド（`next build`）のたびに自動的に実行されます。エラーはビルドを失敗させますが、警告は失敗しません。

詳細は [ESLint プラグイン](/docs/app/api-reference/config/next-config-js/eslint) ページを参照してください。

## 絶対インポートとモジュールパスエイリアスの設定 {#set-up-absolute-imports-and-module-path-aliases}

Next.js には、`tsconfig.json` および `jsconfig.json` ファイルの `"paths"` および `"baseUrl"` オプションのサポートが組み込まれています。
Next.js は `tsconfig.json` および `jsconfig.json` ファイルの `"paths"` および `"baseUrl"` オプションをサポートしています。

これらのオプションを使用すると、プロジェクトディレクトリを絶対パスにエイリアス化し、モジュールのインポートをより簡単かつクリーンにすることができます。たとえば:
これらのオプションを使用すると、プロジェクトディレクトリを絶対パスにエイリアス化でき、モジュールのインポートがより簡単でクリーンになります。たとえば：

```jsx
// Before
// 以前
import { Button } from '../../../components/button'

// After
// 以降
import { Button } from '@/components/button'
```

絶対インポートを設定するには、`tsconfig.json` または `jsconfig.json` ファイルに `baseUrl` 設定オプションを追加します。たとえば:
絶対インポートを設定するには、`tsconfig.json` または `jsconfig.json` ファイルに `baseUrl` 設定オプションを追加します。たとえば：

```json title="tsconfig.json or jsconfig.json"
{
Expand All @@ -374,9 +374,9 @@ import { Button } from '@/components/button'
}
```

`baseUrl` パスの設定に加えて、`"paths"` オプションを使用してモジュールパスを `"alias"` することができます。
`baseUrl` パスの設定に加えて、`"paths"` オプションを使用してモジュールパスを `"alias"` できます。

たとえば、次の設定は `@/components/*` を `components/*` にマッピングします:
たとえば、次の設定は `@/components/*` を `components/*` にマッピングします：

```json title="tsconfig.json or jsconfig.json"
{
Expand Down
Loading