コンテンツへスキップ
App Routerはじめにインストール

新しい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ファイルに以下のスクリプトを追加します

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

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

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

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

App Folder Structure

知っておくと良いこと:

  • ルートレイアウトの作成を忘れた場合、next devで開発サーバーを実行すると、Next.jsが自動的にこのファイルを作成します。
  • オプションで、プロジェクトのルートにsrcディレクトリを使用して、アプリケーションのコードと設定ファイルを分離することができます。

publicフォルダーの作成 (オプション)

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

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

app/page.tsx
import Image from 'next/image'
 
export default function Page() {
  return <Image src="/profile.png" alt="Profile" width={100} height={100} />
}

開発サーバーの実行

  1. 開発サーバーを起動するには、npm run devを実行します。
  2. http://localhost:3000にアクセスしてアプリケーションを表示します。
  3. app/page.tsxを編集ファイルを保存して、ブラウザで更新された結果を確認します。

TypeScriptのセットアップ

最低TypeScriptバージョン: v4.5.2

Next.jsにはTypeScriptのサポートが組み込まれています。プロジェクトにTypeScriptを追加するには、ファイルを.ts / .tsxにリネームし、next devを実行します。Next.jsは必要な依存関係を自動的にインストールし、推奨設定オプションを含むtsconfig.jsonファイルを追加します。

IDEプラグイン

Next.jsにはカスタムTypeScriptプラグインと型チェッカーが含まれており、VS Codeや他のコードエディタで高度な型チェックと自動補完に利用できます。

VS Codeでプラグインを有効にするには、以下を実行します。

  1. コマンドパレットを開く (Ctrl/⌘ + Shift + P)
  2. "TypeScript: Select TypeScript Version" を検索
  3. "Use Workspace Version" を選択
TypeScript Command Palette

詳細については、TypeScriptリファレンスページを参照してください。

ESLintのセットアップ

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

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

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

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

ターミナル
npm run lint

次のようなプロンプトが表示されます

? ESLintをどのように設定しますか？

❯ Strict (推奨)
Base
キャンセル

  • 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"オプションを組み込みでサポートしています。

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

// Before
import { Button } from '../../../components/button'
 
// After
import { Button } from '@/components/button'

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

tsconfig.jsonまたはjsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src/"
  }
}

baseUrlパスを設定するだけでなく、"paths"オプションを使用してモジュールパスを"alias"できます。

例えば、以下の設定は@/components/*をcomponents/*にマップします

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

各"paths"はbaseUrlの場所に対する相対パスです。