Menu

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

システム要件

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

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

CLIを使用した作成

新しいNext.jsアプリを作成する最も速い方法は、create-next-appを使用することです。これがすべてを自動的にセットアップします。プロジェクトを作成するには、以下を実行します。

Terminal
npx create-next-app@latest

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

Terminal
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

customize settingsを選択した場合、以下のプロンプトが表示されます。

Terminal
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
npm i next@latest react@latest react-dom@latest
yarn add next@latest react@latest react-dom@latest
bun add 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
TypeScript
export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

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

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

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

pages/_document.tsx
TypeScript
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
TypeScript
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. pages/index.tsxファイルを編集して保存すると、ブラウザに更新された結果が表示されます。

TypeScriptをセットアップする

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

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

詳細はTypeScript参照ページを参照してください。

リンティングをセットアップする

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

  • ESLintを使用します（包括的なルール）：
package.json
{
  "scripts": {
    "lint": "eslint",
    "lint:fix": "eslint --fix"
  }
}
  • またはBiomeを使用します（高速リンター＋フォーマッタ）：
package.json
{
  "scripts": {
    "lint": "biome check",
    "format": "biome format --write"
  }
}

プロジェクトが以前next lintを使用していた場合、codemを使用してスクリプトをESLint CLIにマイグレーションします。

Terminal
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はリンターを自動的に実行しなくなります。代わりに、NPMスクリプトを通じてリンターを実行できます。

詳細は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の場所に相対的です。