Skip to content

Commit 395e35d

Browse files
xiaoyu2erxiaoyu2er
authored
docs: update documentation translations
1 parent 44bb6a0 commit 395e35d

File tree

369 files changed

+54572
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

369 files changed

+54572
-0
lines changed

‎apps/docs/content/ja/docs/01-app/01-getting-started/01-installation.mdx‎

Lines changed: 341 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,341 @@
1+
---
2+
source-updated-at: 2025-06-01T01:32:20.000Z
3+
translation-updated-at: 2025-06-02T20:02:28.869Z
4+
title: 新しいNext.jsプロジェクトのセットアップ方法
5+
nav_title: インストール
6+
description: `create-next-app` CLIを使用して新しいNext.jsアプリケーションを作成し、TypeScript、ESLint、モジュールパスエイリアスを設定します。
7+
---
8+
9+
{/* このドキュメントの内容はApp RouterとPages Routerで共有されています。Pages Router固有のコンテンツを追加する場合は、`<PagesOnly>コンテンツ</PagesOnly>`コンポーネントを使用してください。共有コンテンツはコンポーネントでラップしないでください。 */}
10+
11+
## システム要件
12+
13+
開始する前に、システムが以下の要件を満たしていることを確認してください:
14+
15+
- [Node.js 18.18](https://nodejs.org/) 以降
16+
- macOS、Windows（WSLを含む）、またはLinux
17+
18+
## 自動インストール
19+
20+
新しいNext.jsアプリを作成する最も簡単な方法は、[`create-next-app`](/docs/app/api-reference/cli/create-next-app)を使用することです。これにより、すべてが自動的にセットアップされます。プロジェクトを作成するには、以下を実行します:
21+
22+
```bash filename="ターミナル"
23+
npx create-next-app@latest
24+
```
25+
26+
インストール中に以下のプロンプトが表示されます:
27+
28+
```txt filename="ターミナル"
29+
プロジェクト名を入力してください? my-app
30+
TypeScriptを使用しますか? No / Yes
31+
ESLintを使用しますか? No / Yes
32+
Tailwind CSSを使用しますか? No / Yes
33+
コードを`src/`ディレクトリ内に配置しますか? No / Yes
34+
App Routerを使用しますか? (推奨) No / Yes
35+
`next dev`にTurbopackを使用しますか? No / Yes
36+
インポートエイリアスをカスタマイズしますか? (`@/*`がデフォルト) No / Yes
37+
どのインポートエイリアスを設定しますか? @/*
38+
```
39+
40+
プロンプトの後、[`create-next-app`](/docs/app/api-reference/cli/create-next-app)はプロジェクト名のフォルダを作成し、必要な依存関係をインストールします。
41+
42+
## 手動インストール
43+
44+
新しいNext.jsアプリを手動で作成するには、必要なパッケージをインストールします:
45+
46+
```bash filename="ターミナル"
47+
npm install next@latest react@latest react-dom@latest
48+
```
49+
50+
次に、以下のスクリプトを`package.json`ファイルに追加します:
51+
52+
```json filename="package.json"
53+
{
54+
"scripts": {
55+
"dev": "next dev",
56+
"build": "next build",
57+
"start": "next start",
58+
"lint": "next lint"
59+
}
60+
}
61+
```
62+
63+
これらのスクリプトは、アプリケーション開発のさまざまな段階を参照しています:
64+
65+
- `next dev`: 開発サーバーを起動します
66+
- `next build`: 本番用にアプリケーションをビルドします
67+
- `next start`: 本番サーバーを起動します
68+
- `next lint`: ESLintを実行します
69+
70+
<AppOnly>
71+
72+
### `app`ディレクトリの作成
73+
74+
Next.jsはファイルシステムベースのルーティングを使用しており、アプリケーション内のルートはファイルの構造によって決定されます。
75+
76+
`app`フォルダを作成します。次に、`app`内に`layout.tsx`ファイルを作成します。このファイルは[ルートレイアウト](/docs/app/api-reference/file-conventions/layout#root-layout)です。必須であり、`<html>`タグと`<body>`タグを含める必要があります。
77+
78+
```tsx filename="app/layout.tsx" switcher
79+
export default function RootLayout({
80+
children,
81+
}: {
82+
children: React.ReactNode
83+
}) {
84+
return (
85+
<html lang="en">
86+
<body>{children}</body>
87+
</html>
88+
)
89+
}
90+
```
91+
92+
```jsx filename="app/layout.js" switcher
93+
export default function RootLayout({ children }) {
94+
return (
95+
<html lang="en">
96+
<body>{children}</body>
97+
</html>
98+
)
99+
}
100+
```
101+
102+
初期コンテンツを含むホームページ`app/page.tsx`を作成します:
103+
104+
```tsx filename="app/page.tsx" switcher
105+
export default function Page() {
106+
return <h1>Hello, Next.js!</h1>
107+
}
108+
```
109+
110+
```jsx filename="app/page.js" switcher
111+
export default function Page() {
112+
return <h1>Hello, Next.js!</h1>
113+
}
114+
```
115+
116+
`layout.tsx`と`page.tsx`は、ユーザーがアプリケーションのルート(`/`)にアクセスしたときにレンダリングされます。
117+
118+
<Image
119+
alt="Appフォルダ構造"
120+
srcLight="/docs/light/app-getting-started.png"
121+
srcDark="/docs/dark/app-getting-started.png"
122+
width="1600"
123+
height="363"
124+
/>
125+
126+
> **知っておくと便利**:
127+
>
128+
> - ルートレイアウトの作成を忘れた場合、`next dev`で開発サーバーを実行するとNext.jsが自動的にこのファイルを作成します
129+
> - オプションで、プロジェクトのルートに[`src`フォルダ](/docs/app/api-reference/file-conventions/src-folder)を使用して、アプリケーションコードを設定ファイルから分離できます
130+
131+
</AppOnly>
132+
133+
<PagesOnly>
134+
135+
### `pages`ディレクトリの作成
136+
137+
Next.jsはファイルシステムベースのルーティングを使用しており、アプリケーション内のルートはファイルの構造によって決定されます。
138+
139+
プロジェクトのルートに`pages`ディレクトリを作成します。次に、`pages`フォルダ内に`index.tsx`ファイルを追加します。これがホームページ(`/`)になります:
140+
141+
```tsx filename="pages/index.tsx" switcher
142+
export default function Page() {
143+
return <h1>Hello, Next.js!</h1>
144+
}
145+
```
146+
147+
```jsx filename="pages/index.js" switcher
148+
export default function Page() {
149+
return <h1>Hello, Next.js!</h1>
150+
}
151+
```
152+
153+
次に、`pages/`内に`_app.tsx`ファイルを追加してグローバルレイアウトを定義します。[カスタムAppファイル](/docs/pages/building-your-application/routing/custom-app)について詳しく学びましょう。
154+
155+
```tsx filename="pages/_app.tsx" switcher
156+
import type { AppProps } from 'next/app'
157+
158+
export default function App({ Component, pageProps }: AppProps) {
159+
return <Component {...pageProps} />
160+
}
161+
```
162+
163+
```jsx filename="pages/_app.js" switcher
164+
export default function App({ Component, pageProps }) {
165+
return <Component {...pageProps} />
166+
}
167+
```
168+
169+
最後に、`pages/`内に`_document.tsx`ファイルを追加して、サーバーからの初期レスポンスを制御します。[カスタムDocumentファイル](/docs/pages/building-your-application/routing/custom-document)について詳しく学びましょう。
170+
171+
```tsx filename="pages/_document.tsx" switcher
172+
import { Html, Head, Main, NextScript } from 'next/document'
173+
174+
export default function Document() {
175+
return (
176+
<Html>
177+
<Head />
178+
<body>
179+
<Main />
180+
<NextScript />
181+
</body>
182+
</Html>
183+
)
184+
}
185+
```
186+
187+
```jsx filename="pages/_document.js" switcher
188+
import { Html, Head, Main, NextScript } from 'next/document'
189+
190+
export default function Document() {
191+
return (
192+
<Html>
193+
<Head />
194+
<body>
195+
<Main />
196+
<NextScript />
197+
</body>
198+
</Html>
199+
)
200+
}
201+
```
202+
203+
</PagesOnly>
204+
205+
### `public`フォルダの作成（オプション）
206+
207+
プロジェクトのルートに[`public`フォルダ](/docs/app/api-reference/file-conventions/public-folder)を作成して、画像、フォントなどの静的アセットを保存します。`public`内のファイルは、ベースURL(`/`)から始まるパスでコードから参照できます。
208+
209+
これらのアセットはルートパス(`/`)を使用して参照できます。例えば、`public/profile.png`は`/profile.png`として参照できます:
210+
211+
```tsx filename="app/page.tsx" highlight={4} switcher
212+
import Image from 'next/image'
213+
214+
export default function Page() {
215+
return <Image src="/profile.png" alt="Profile" width={100} height={100} />
216+
}
217+
```
218+
219+
```jsx filename="app/page.js" highlight={4} switcher
220+
import Image from 'next/image'
221+
222+
export default function Page() {
223+
return <Image src="/profile.png" alt="Profile" width={100} height={100} />
224+
}
225+
```
226+
227+
## 開発サーバーの実行
228+
229+
1. `npm run dev`を実行して開発サーバーを起動します
230+
2. `http://localhost:3000`にアクセスしてアプリケーションを表示します
231+
3. <AppOnly>`app/page.tsx`</AppOnly><PagesOnly>`pages/index.tsx`</PagesOnly>ファイルを編集して保存し、ブラウザで更新された結果を確認します
232+
233+
## TypeScriptのセットアップ
234+
235+
> TypeScriptの最小バージョン: `v4.5.2`
236+
237+
Next.jsにはTypeScriptサポートが組み込まれています。プロジェクトにTypeScriptを追加するには、ファイルを`.ts` / `.tsx`にリネームして`next dev`を実行します。Next.jsは必要な依存関係を自動的にインストールし、推奨設定オプションを含む`tsconfig.json`ファイルを追加します。
238+
239+
<AppOnly>
240+
241+
### IDEプラグイン
242+
243+
Next.jsにはカスタムTypeScriptプラグインとタイプチェッカーが含まれており、VSCodeや他のコードエディターで高度なタイプチェックとオートコンプリートに使用できます。
244+
245+
VS Codeでプラグインを有効にするには:
246+
247+
1. コマンドパレットを開きます（`Ctrl/⌘` + `Shift` + `P`）
248+
2. "TypeScript: Select TypeScript Version"を検索
249+
3. "Use Workspace Version"を選択
250+
251+
<Image
252+
alt="TypeScriptコマンドパレット"
253+
srcLight="/docs/light/typescript-command-palette.png"
254+
srcDark="/docs/dark/typescript-command-palette.png"
255+
width="1600"
256+
height="637"
257+
/>
258+
259+
</AppOnly>
260+
261+
詳細については[TypeScriptリファレンス](/docs/app/api-reference/config/next-config-js/typescript)ページを参照してください。
262+
263+
## ESLintのセットアップ
264+
265+
Next.jsにはESLintが組み込まれています。`create-next-app`で新しいプロジェクトを作成すると、必要なパッケージが自動的にインストールされ、適切な設定が行われます。
266+
267+
既存のプロジェクトに手動でESLintを追加するには、`next lint`をスクリプトとして`package.json`に追加します:
268+
269+
```json filename="package.json"
270+
{
271+
"scripts": {
272+
"lint": "next lint"
273+
}
274+
}
275+
```
276+
277+
次に、`npm run lint`を実行すると、インストールと設定プロセスがガイドされます。
278+
279+
```bash filename="ターミナル"
280+
npm run lint
281+
```
282+
283+
以下のようなプロンプトが表示されます:
284+
285+
> ? ESLintをどのように設定しますか?
286+
>
287+
> ❯ Strict (推奨)
288+
> Base
289+
> Cancel
290+
291+
- **Strict**: Next.jsの基本ESLint設定に加えて、より厳格なCore Web Vitalsルールセットを含みます。ESLintを初めて設定する開発者に推奨される設定です
292+
- **Base**: Next.jsの基本ESLint設定を含みます
293+
- **Cancel**: 設定をスキップします。独自のカスタムESLint設定を計画している場合はこのオプションを選択してください
294+
295+
`Strict`または`Base`が選択された場合、Next.jsは自動的に`eslint`と`eslint-config-next`を依存関係としてインストールし、選択した設定を含む`.eslintrc.json`ファイルをプロジェクトのルートに作成します。
296+
297+
ESLintを実行してエラーを検出するには、`next lint`を実行します。ESLintが設定されると、ビルド時(`next build`)にも自動的に実行されます。エラーはビルドを失敗させますが、警告は失敗させません。
298+
299+
詳細については[ESLintプラグイン](/docs/app/api-reference/config/next-config-js/eslint)ページを参照してください。
300+
301+
## 絶対インポートとモジュールパスエイリアスの設定
302+
303+
Next.jsは`tsconfig.json`と`jsconfig.json`ファイルの`"paths"`および`"baseUrl"`オプションをサポートしています。
304+
305+
これらのオプションを使用すると、プロジェクトディレクトリを絶対パスにエイリアスできるため、モジュールのインポートがより簡単でクリーンになります。例えば:
306+
307+
```jsx
308+
// 変更前
309+
import { Button } from '../../../components/button'
310+
311+
// 変更後
312+
import { Button } from '@/components/button'
313+
```
314+
315+
絶対インポートを設定するには、`baseUrl`設定オプションを`tsconfig.json`または`jsconfig.json`ファイルに追加します。例えば:
316+
317+
```json filename="tsconfig.json または jsconfig.json"
318+
{
319+
"compilerOptions": {
320+
"baseUrl": "src/"
321+
}
322+
}
323+
```
324+
325+
`baseUrl`パスを設定するのに加えて、`"paths"`オプションを使用してモジュールパスを`"alias"`できます。
326+
327+
例えば、以下の設定は`@/components/*`を`components/*`にマッピングします:
328+
329+
```json filename="tsconfig.json または jsconfig.json"
330+
{
331+
"compilerOptions": {
332+
"baseUrl": "src/",
333+
"paths": {
334+
"@/styles/*": ["styles/*"],
335+
"@/components/*": ["components/*"]
336+
}
337+
}
338+
}
339+
```
340+
341+
各`"paths"`は`baseUrl`の場所からの相対パスです。

0 commit comments

Comments
 (0)