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

インストール

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

クイックスタート

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

システム要件

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

  • 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 19 の変更点と、フレームワークで検証中の新しい機能すべてを含む、組み込みの React canary リリース を使用します。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
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

ホーム ページ app/page.tsx に初期コンテンツを作成します。

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

ユーザーがアプリケーションのルート (/) にアクセスすると、layout.tsx と page.tsx の両方がレンダリングされます。

App Folder Structure

知っておくと良いこと:

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

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. 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 リファレンス ページを参照してください。

Lint の設定

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

  • ESLint (包括的なルール) を使用する
package.json
{
  "scripts": {
    "lint": "eslint",
    "lint:fix": "eslint --fix"
  }
}
  • または Biome (高速 linter + フォーマッター) を使用する
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 Plugin ページを参照してください。

絶対インポートとモジュールパスエイリアスの設定

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 の場所からの相対パスです。