Menu

インストール

新しいNext.jsアプリを作成してローカルで実行します。

クイックスタート

  1. my-appという名前の新しいNext.jsアプリを作成します
  2. cd my-appを実行し、開発サーバーを起動します。
  3. http://localhost:3000にアクセスします。
pnpm create next-app@latest my-app --yes
cd my-app
pnpm dev
npx create-next-app@latest my-app --yes
cd my-app
npm run dev
yarn create next-app@latest my-app --yes
cd my-app
yarn dev
bun create next-app@latest my-app --yes
cd my-app
bun dev
  • --yesは保存されたプリセットまたはデフォルトを使用してプロンプトをスキップします。デフォルトセットアップではTypeScript、Tailwind、App Router、Turbopackが有効になり、インポートエイリアス@/*が設定されます。

システム要件

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

  • 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ドキュメントを参照してください。

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

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

appフォルダを作成します。その後、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とpage.tsxの両方は、ユーザーがアプリケーションのルート（/）にアクセスするときにレンダリングされます。

App Folder Structure

補足：

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

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

TypeScriptをセットアップする

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

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

IDEプラグイン

Next.jsはカスタムTypeScriptプラグインと型チェッカーを含み、VSCodeおよび他のコードエディタが高度な型チェックと自動補完に使用できます。

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

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

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