新しい 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 ファイルに追加します:

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

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>
}

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

app/page.tsx
import Image from 'next/image'

export default function Page() {
  return <Image src="/profile.png" alt="Profile" width={100} height={100} />
}

app/page.js
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 をスクリプトとして追加します:

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

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

Terminal

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 設定オプションを追加します。たとえば:

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 の場所に対して相対的です。

システム要件​

自動インストール​

手動インストール​

app ディレクトリの作成​

public フォルダの作成（オプション）​

開発サーバーの実行​

TypeScript のセットアップ​

IDE プラグイン​

ESLint のセットアップ​

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

システム要件

自動インストール

手動インストール

`app` ディレクトリの作成

`public` フォルダの作成（オプション）

開発サーバーの実行

TypeScript のセットアップ

IDE プラグイン

ESLint のセットアップ

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