新しい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 devを実行し、開発モードでNext.jsを起動します。
build: next buildを実行し、本番用にアプリケーションをビルドします。
start: next startを実行し、Next.js本番サーバーを起動します。
lint: next lintを実行し、Next.jsの組み込みESLint設定をセットアップします。

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

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

appフォルダを作成し、その中にlayout.tsxとpage.tsxファイルを追加してください。これらはユーザーがアプリケーションのルート（/）にアクセスしたときにレンダリングされます。

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

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 devで開発サーバーを実行すると、Next.jsは自動的にこのファイルを作成します。

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

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

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

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

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

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

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

プロジェクトでESLintを設定する方法の詳細については、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"オプションを使用してモジュールパスに"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>
  )
}