新しい Next.js プロジェクトをセットアップする方法

システム要件

Node.js 18.18 以降
macOS、Windows（WSLを含む）、Linuxがサポートされています

自動インストール

新しい Next.js アプリを始めるには、すべてを自動的にセットアップしてくれる create-next-app を使用することをお勧めします。プロジェクトを作成するには、次のコマンドを実行します：

Terminal

npx create-next-app@latest

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

Terminal
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 アプリを手動で作成するには、必要なパッケージをインストールします：

Terminal

npm install next@latest react@latest react-dom@latest

package.json ファイルを開き、次の scripts を追加します：

package.json
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

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

dev: Next.js を開発モードで開始するために next dev を実行します
build: 本番利用のためにアプリケーションをビルドするために next build を実行します
start: Next.js の本番サーバーを開始するために next start を実行します
lint: Next.js の組み込み ESLint 設定をセットアップするために next lint を実行します

`app` ディレクトリを作成する

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

app フォルダを作成し、layout.tsx と page.tsx ファイルを追加します。これらはユーザーがアプリケーションの root (/) を訪れたときにレンダリングされます。

app/layout.tsx 内に必要な <html> と <body> タグを含む root レイアウトを作成します：

TypeScript
JavaScript

app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

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

TypeScript
JavaScript

app/page.tsx
export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

app/page.js
export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

Good to know:

layout.tsx の作成を忘れた場合、next dev で開発サーバーを実行すると Next.js が自動的にこのファイルを作成します。

プロジェクトの root に src ディレクトリを使用して、アプリケーションのコードを設定ファイルから分離することができます。

`public` フォルダを作成する（オプション）

プロジェクトの root に public フォルダを作成して、画像やフォントなどの静的アセットを保存することができます。public 内のファイルは、ベースURL (/) から始まるコードで参照できます。

開発サーバーを実行する

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」を選択

これで、ファイルを編集するときにカスタムプラグインが有効になります。next build を実行すると、カスタム型チェッカーが使用されます。

プロジェクトで TypeScript を使用する方法については、TypeScript 設定ページを参照してください。

ESLint をセットアップする

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

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

package.json
{
  "scripts": {
    "lint": "next lint"
  }
}

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

Terminal

pnpm 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 設定を含みません。独自のカスタム ESLint 設定を設定する予定がある場合にのみこのオプションを選択してください。

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

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

プロジェクトで ESLint を設定する方法については、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 設定オプションを追加します。例えば：

tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src/"
  }
}

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

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

tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src/",
    "paths": {
      "@/styles/*": ["styles/*"],
      "@/components/*": ["components/*"]
    }
  }
}

各 "paths" は baseUrl の場所に対して相対的です。例えば：

TypeScript
JavaScript

src/app/page.tsx
import Button from '@/components/button'
import '@/styles/styles.css'

export default function HomePage() {
  return (
    <div>
      <h1>Hello World</h1>
      <Button />
    </div>
  )
}

src/app/page.js
import Button from '@/components/button'
import '@/styles/styles.css'

export default function HomePage() {
  return (
    <div>
      <h1>Hello World</h1>
      <Button />
    </div>
  )
}

システム要件​

自動インストール​

手動インストール​

app ディレクトリを作成する​

public フォルダを作成する（オプション）​

開発サーバーを実行する​

TypeScript をセットアップする​

IDE プラグイン​

ESLint をセットアップする​

絶対インポートとモジュールパスエイリアスを設定する​

システム要件

自動インストール

手動インストール

`app` ディレクトリを作成する

`public` フォルダを作成する（オプション）

開発サーバーを実行する

TypeScript をセットアップする

IDE プラグイン

ESLint をセットアップする

絶対インポートとモジュールパスエイリアスを設定する