新しい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ファイルを作成します。このファイルはルートレイアウトです。これは必須であり、<html>と<body>タグを含める必要があります。

app/layout.tsx

TypeScript

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

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

app/page.tsx

TypeScript

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

ユーザーがアプリケーションのルート（/）にアクセスすると、layout.tsxとpage.tsxの両方がレンダリングされます。

補足:

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

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

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

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

これらのアセットはルートパス（/）を使用して参照できます。例えば、public/profile.pngは/profile.pngとして参照できます：

app/page.tsx

TypeScript

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やその他のコードエディタで高度な型チェックと自動補完を利用できます。

VSCodeでプラグインを有効にするには：

コマンドパレット（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ファイルをプロジェクトのルートに作成します。

これで、エラーを検出するためにESLintを実行したいときはいつでもnext lintを実行できます。ESLintが設定されると、ビルド（next build）中にも自動的に実行されます。エラーがあるとビルドは失敗しますが、警告はビルドを妨げません。

詳細については、ESLintプラグインページをご覧ください。

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

Next.jsにはtsconfig.jsonとjsconfig.jsonファイルの"paths"および"baseUrl"オプションの組み込みサポートがあります。

これらのオプションを使用すると、プロジェクトディレクトリを絶対パスにエイリアスできるため、モジュールのインポートがより簡単で分かりやすくなります。例えば：

// 変更前
import { Button } from '../../../components/button'
 
// 変更後
import { Button } from '@/components/button'

絶対インポートを設定するには、tsconfig.jsonまたはjsconfig.jsonファイルにbaseUrl設定オプションを追加します。例えば：

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src/"
  }
}

baseUrlパスを設定することに加えて、"paths"オプションを使用してモジュールパスに「エイリアス」を設定できます。

例えば、次の構成では@/components/*をcomponents/*にマップします：

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src/",
    "paths": {
      "@/styles/*": ["styles/*"],
      "@/components/*": ["components/*"]
    }
  }
}

各"paths"はbaseUrlの場所からの相対パスです。