Menu

新しい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 を初めて使用する場合は、プロジェクト構造のドキュメントでアプリケーション内の可能なファイルとフォルダの概要を参照してください。

補足：

  • Next.js は、デフォルトで TypeScript、ESLint、Tailwind CSS の設定を提供しています。
  • プロジェクトのルートに src ディレクトリをオプションで使用して、アプリケーションのコードと設定ファイルを分離できます。

手動インストール

新しい 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"
  }
}

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

  • 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 ファイルを追加してください。これらはユーザーがアプリケーションのルート（/）にアクセスしたときにレンダリングされます。

アプリフォルダ構造

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

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

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

開発サーバーを起動する

  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には、VSCodeやその他のコードエディタが高度な型チェックと自動補完に使用できるカスタムTypeScriptプラグインと型チェッカーが含まれています。

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

  1. コマンドパレット（Ctrl/⌘ + Shift + P）を開きます
  2. "TypeScript: Select TypeScript Version"を検索します
  3. "Use Workspace Version"を選択します
TypeScript Command Palette

これでファイルを編集する際にカスタムプラグインが有効になります。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
npm 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設定をセットアップする予定がある場合にのみ、このオプションを選択してください。

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

これで、エラーを検出するために 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
{
  "compilerOptions": {
    "baseUrl": "src/"
  }
}

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

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

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

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

src/app/page.tsx
TypeScript
import Button from '@/components/button'
import '@/styles/styles.css'
 
export default function HomePage() {
  return (
    <div>
      <h1>Hello World</h1>
      <Button />
    </div>
  )
}