Skip to content

konjacbot: sync docs@3f9b857 #395

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@3f9b857 #395

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,13 +4,13 @@ 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}

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

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

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

</AppOnly>

Expand Down Expand Up @@ -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 @@ -286,13 +286,13 @@ export default function Page() {

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

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

Expand All @@ -301,7 +301,7 @@ VS Code でプラグインを有効にするには:
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,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 @@ -340,9 +340,9 @@ npm run lint
> 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 に作成します。

Expand All @@ -352,9 +352,9 @@ ESLint を実行してエラーをキャッチしたいときは、`next lint`

## 絶対インポートとモジュールパスエイリアスの設定 {#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
Expand Down
Loading