新しい Next.js プロジェクトのセットアップ方法
システム要件
始める前に、システムが次の要件を満たしていることを確認してください:
- Node.js 18.18 以降
- macOS、Windows(WSLを含む)、またはLinux
自動インストール
新しい Next.js アプリを作成する最も簡単な方法は、すべてを自動的にセットアップしてくれる create-next-app
を使用することです。プロジェクトを作成するには、次のコマンドを実行します:
npx create-next-app@latest
インストール時に、次のプロンプトが表示されます:
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`? No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*
プロンプトの後、create-next-app
はプロジェクト名のフォルダを作成し、必要な依存関係をインストールします。
手動インストール
新しい Next.js アプリを手動で作成するには、必要なパッケージをインストールします:
npm install next@latest react@latest react-dom@latest
次に、以下のスクリプトを package.json
ファイルに追加します:
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}
これらのスクリプトは、アプリケーション開発のさまざまな段階を指します:
next dev
: 開発サーバーを起動しますnext build
: アプリケーションを本番用にビルドしますnext start
: 本番サーバーを起動しますnext lint
: ESLint を実行します
app
ディレクトリの作成
Next.js はファイルシステムルーティングを使用しているため、アプリケーション内のルートはファイルの構造によって決まります。
app
フォルダを作成します。次に、app
内に layout.tsx
ファイルを作成します。このファイルは root レイアウト です。これは必須であり、<html>
と <body>
タグを含める必要があります。
- TypeScript
- JavaScript
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
初期コンテンツを含むホームページ app/page.tsx
を作成します:
- TypeScript
- JavaScript
export default function Page() {
return <h1>Hello, Next.js!</h1>
}
export default function Page() {
return <h1>Hello, Next.js!</h1>
}
layout.tsx
と page.tsx
の両方が、ユーザーがアプリケーションの root (/
) を訪れたときにレンダリングされます。


Good to know:
- root レイアウトの作成を忘れた場合、
next dev
で開発サーバーを実行すると、Next.js が自動的にこのファイルを作成します。- プロジェクトの root に
src
ディレクトリ を使用して、アプリケーションのコードを設定ファイルから分離することができます。
public
フォルダの作成(オプション)
プロジェクトの root に public
フォルダ を作成して、画像やフォントなどの静的アセットを保存します。public
内のファイルは、ベースURL (/
) から始まるコードで参照できます。
これらのアセットは root パス (/
) を使用して参照できます。たとえば、public/profile.png
は /profile.png
として参照できます:
- TypeScript
- JavaScript
import Image from 'next/image'
export default function Page() {
return <Image src="/profile.png" alt="Profile" width={100} height={100} />
}
import Image from 'next/image'
export default function Page() {
return <Image src="/profile.png" alt="Profile" width={100} height={100} />
}
開発サーバーの実行
npm run dev
を実行して開発サーバーを起動します。http://localhost:3000
にアクセスしてアプリケーションを表示します。app/page.tsx
ファイルを編集して保存し、ブラウザで更新された結果を確認します。
TypeScript のセットアップ
最小 TypeScript バージョン:
v4.5.2
Next.js には組み込みの TypeScript サポートがあります。プロジェクトに TypeScript を追加するには、ファイルを .ts
/ .tsx
にリネームして next dev
を実行します。Next.js は必要な依存関係を自動的にインストールし、推奨される設定オプションを含む tsconfig.json
ファイルを追加します。
IDE プラグイン
Next.js にはカスタム TypeScript プラグインと型チェッカーが含まれており、VSCode や他のコードエディタで高度な型チェックや自動補完を利用できます。
VS Code でプラグインを有効にするには:
- コマンドパレットを開く(
Ctrl/⌘
+Shift
+P
) - 「TypeScript: Select TypeScript Version」を検索
- 「Use Workspace Version」を選択


詳細は TypeScript リファレンス ページを参照してください。
ESLint のセットアップ
Next.js には組み込みの ESLint が含まれています。create-next-app
で新しいプロジェクトを作成するときに、必要なパッケージが自動的にインストールされ、適切な設定が構成されます。
既存のプロジェクトに ESLint を手動で追加するには、package.json
に next lint
をスクリプトとして追加します:
{
"scripts": {
"lint": "next lint"
}
}
次に、npm run lint
を実行すると、インストールと設定プロセスが案内されます。
npm run lint
次のようなプロンプトが表示されます:
? How would you like to configure ESLint?
❯ Strict (recommended)
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
ファイルをプロジェクトの root に作成します。
ESLint を実行してエラーをキャッチしたいときは、next lint
を実行できます。ESLint が設定されると、ビルド(next build
)のたびに自動的に実行されます。エラーはビルドを失敗させますが、警告は失敗しません。
詳細は ESLint プラグイン ページを参照してください。
絶対インポートとモジュールパスエイリアスの設定
Next.js には、tsconfig.json
および jsconfig.json
ファイルの "paths"
および "baseUrl"
オプションのサポートが組み込まれています。
これらのオプションを使用すると、プロジェクトディレクトリを絶対パスにエイリアス化し、モジュールのインポートをより簡単かつクリーンにすることができます。たとえば:
// Before
import { Button } from '../../../components/button'
// After
import { Button } from '@/components/button'
絶対インポートを設定するには、tsconfig.json
または jsconfig.json
ファイルに baseUrl
設定オプションを追加します。たとえば:
{
"compilerOptions": {
"baseUrl": "src/"
}
}
baseUrl
パスの設定に加えて、"paths"
オプションを使用してモジュールパスを "alias"
することができます。
たとえば、次の設定は @/components/*
を components/*
にマッピングします:
{
"compilerOptions": {
"baseUrl": "src/",
"paths": {
"@/styles/*": ["styles/*"],
"@/components/*": ["components/*"]
}
}
}
各 "paths"
は baseUrl
の場所に対して相対的です。