Skip to content

konjacbot: sync docs@2341019 #399

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@2341019 #399

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
28 changes: 14 additions & 14 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 @@ -4,7 +4,7 @@ nav_title: 'インストール'
description: '`create-next-app` CLIを使用して新しい Next.js アプリケーションを作成し、TypeScript、ESLint、モジュールパスエイリアスを設定します。'
---

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

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

Expand Down Expand Up @@ -69,7 +69,7 @@ npm install next@latest react@latest react-dom@latest

### `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 @@ -141,16 +141,16 @@ 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` ファイルを追加します。これがホームページ (`/`) になります:

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,7 +247,7 @@ 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` として参照できます:

Expand Down Expand Up @@ -314,7 +314,7 @@ VS Code でプラグインを有効にするには:

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

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

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

Expand All @@ -326,7 +326,7 @@ Next.js には組み込みの ESLint が含まれています。`create-next-app
}
```

次に、`npm run lint` を実行すると、インストールと設定プロセスが案内されます。
次に、`npm run lint` を実行すると、インストールと設定のプロセスが案内されます。

```bash title="Terminal"
npm run lint
Expand All @@ -342,19 +342,19 @@ npm run lint

- **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 に作成します。

ESLint を実行してエラーをキャッチしたいときは、`next lint` を実行できます。ESLint が設定されると、ビルド（`next build`）のたびに自動的に実行されます。エラーはビルドを失敗させますが、警告は失敗しません。
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"` オプションのサポートが組み込まれています。

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

```jsx
// Before
Expand All @@ -374,7 +374,7 @@ import { Button } from '@/components/button'
}
```

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

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

Expand Down
Loading