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

新しいNext.jsアプリケーションの作成

システム要件

開始する前に、システムが以下の要件を満たしていることを確認してください。

  • Node.js 20.9以降。
  • macOS、Windows（WSLを含む）、またはLinux。

CLIでの作成

新しいNext.jsアプリを最速で作成するには、すべてを自動的に設定してくれるcreate-next-appを使用します。プロジェクトを作成するには、次を実行します。

ターミナル
npx create-next-app@latest

インストール時に、以下のプロンプトが表示されます。

ターミナル
What is your project named? my-app
Would you like to use the recommended Next.js defaults?
    Yes, use recommended defaults - TypeScript, ESLint, Tailwind CSS, App Router, Turbopack
    No, reuse previous settings
    No, customize settings - Choose your own preferences

設定をカスタマイズするを選択すると、以下のプロンプトが表示されます。

ターミナル
Would you like to use TypeScript? No / Yes
Which linter would you like to use? ESLint / Biome / None
Would you like to use React Compiler? 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? (recommended) 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アプリを作成するには、必要なパッケージをインストールします。

ターミナル
pnpm i next@latest react@latest react-dom@latest

知っておくと良いこと: App Router は、React canary リリース を組み込んでおり、これには安定版の React 19 の変更点と、フレームワークで検証中の新しい機能が含まれています。Pages Router は、package.json にインストールされた React バージョンを使用します。

次に、package.json ファイルに以下のスクリプトを追加します。

package.json
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint",
    "lint:fix": "eslint --fix"
  }
}

これらのスクリプトは、アプリケーション開発のさまざまな段階を参照します。

  • next dev: 開発サーバーを Turbopack（デフォルトのバンドラー）で起動します。
  • next build: 本番環境用にアプリケーションをビルドします。
  • next start: 本番サーバーを起動します。
  • eslint: ESLint を実行します。

Turbopack がデフォルトのバンドラーになりました。Webpack を使用するには、next dev --webpack または next build --webpack を実行します。設定の詳細については、Turbopack ドキュメントを参照してください。

pages ディレクトリの作成

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

プロジェクトのルートに pages ディレクトリを作成します。次に、pages フォルダ内に index.tsx ファイルを追加します。これがホームページ（/）になります。

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

次に、グローバルレイアウトを定義するために pages/ 内に _app.tsx ファイルを追加します。カスタム App ファイルについては、こちら を参照してください。

pages/_app.tsx
import type { AppProps } from 'next/app'
 
export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

最後に、サーバーからの初期レスポンスを制御するために pages/ 内に _document.tsx ファイルを追加します。カスタム Document ファイルについては、こちら を参照してください。

pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'
 
export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

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. https://:3000 にアクセスして、アプリケーションを表示します。
  3. pages/index.tsx ファイルを編集して保存すると、ブラウザに更新された結果が表示されます。

TypeScript の設定

最小 TypeScript バージョン: v5.1.0

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

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

Lint の設定

Next.js は ESLint または Biome での linting をサポートしています。linter を選択し、package.json スクリプトから直接実行します。

  • ESLint（包括的なルール）を使用します。
package.json
{
  "scripts": {
    "lint": "eslint",
    "lint:fix": "eslint --fix"
  }
}
  • または Biome（高速 linter + formatter）を使用します。
package.json
{
  "scripts": {
    "lint": "biome check",
    "format": "biome format --write"
  }
}

プロジェクトで以前 next lint を使用していた場合は、codemod を使用してスクリプトを ESLint CLI に移行してください。

ターミナル
npx @next/codemod@canary next-lint-to-eslint-cli .

ESLint を使用する場合、明示的な設定（推奨は eslint.config.mjs）を作成します。ESLint は、レガシーな .eslintrc.* と新しい eslint.config.mjs の形式の両方 をサポートしています。推奨される設定については、ESLint API リファレンス を参照してください。

知っておくと良いこと: Next.js 16 以降、next build は自動的に linter を実行しなくなりました。代わりに、NPM スクリプト経由で linter を実行できます。

詳細については、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 の場所からの相対パスです。