Documentation Next.js

はじめに

Next.js開発において、適切な開発環境を構築することは生産性に大きく影響します。本記事では、Visual Studio Code（VSCode）でNext.js開発を効率化するための必須拡張機能と推奨設定を体系的に解説します。

この記事で学べること:

  • Next.js開発に必須の拡張機能とそのインストール方法
  • プロジェクト単位での設定ファイルの書き方
  • チーム開発で統一した環境を構築するためのベストプラクティス

必須拡張機能

Next.js開発において、最低限インストールしておくべき拡張機能を紹介します。

ESLint

ESLintは、JavaScriptやTypeScriptコードの品質を保つための静的解析ツールです。コード内の潜在的なエラーやアンチパターンを検出し、チーム全体で一貫したコーディングスタイルを維持できます。

Next.js 11以降では、ESLintが標準でサポートされており、next lintコマンドで実行できます。VSCode拡張機能をインストールすることで、エディタ上でリアルタイムにエラーを確認できるようになります。

# 拡張機能のインストール（VSCodeのコマンドパレットから）
ext install dbaeumer.vscode-eslint

# Next.jsプロジェクトでESLintを初期化
npx eslint --init

Prettier

Prettierは、コードを自動的に整形するフォーマッターです。保存時に自動フォーマットを有効にすることで、コードスタイルの議論を減らし、コードレビューの効率を向上させます。

# 拡張機能のインストール
ext install esbenp.prettier-vscode

# プロジェクトにPrettierをインストール
npm install --save-dev prettier

Prettierの設定ファイル（.prettierrc）の例:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80
}

TypeScript関連

Next.jsはTypeScriptを標準でサポートしています。以下の拡張機能でTypeScript開発をさらに快適にできます。

  • TypeScript Importer: 未インポートのモジュールを自動でインポート
  • Error Lens: エラーや警告をインラインで表示
# TypeScript Importerのインストール
ext install pmneo.tsimporter

# Error Lensのインストール
ext install usernamehw.errorlens

Tailwind CSS IntelliSense

Tailwind CSSを使用するプロジェクトには必須の拡張機能です。クラス名のオートコンプリート、シンタックスハイライト、ホバー時のCSSプレビューなどの機能を提供します。

# 拡張機能のインストール
ext install bradlc.vscode-tailwindcss

主な機能:

  • オートコンプリート: クラス名を入力中に候補を表示
  • リンティング: 無効なクラス名や重複を検出
  • CSSプレビュー: ホバー時に実際のCSSを表示
  • カスタム設定対応: tailwind.config.jsの設定を反映

Next.js Snippets

Next.js特有のコードスニペットを提供する拡張機能です。よく使うパターンを素早く入力できます。

# 拡張機能のインストール
ext install pulkitgangwar.nextjs-snippets

主なスニペット例:

プレフィックス説明
npageページコンポーネントのテンプレート
ngspgetServerSidePropsのテンプレート
ngstpgetStaticPropsのテンプレート
ngstpagetStaticPathsのテンプレート
napiAPIルートのテンプレート

推奨拡張機能

必須ではありませんが、開発効率をさらに向上させる拡張機能を紹介します。

Auto Rename Tag

JSXファイルでHTMLタグを変更すると、開始タグと終了タグの両方が自動的に更新されます。特にコンポーネントの構造を変更する際に便利です。

ext install formulahendry.auto-rename-tag

GitLens

Gitリポジトリの変更履歴を詳細に追跡できる拡張機能です。各行のコミット履歴やコードの著者を確認でき、大規模なチーム開発で特に役立ちます。

ext install eamodio.gitlens

Path Intellisense

ファイルパスの入力時にオートコンプリートを提供します。Next.jsのimport文やコンポーネントの参照で効率的にパスを入力できます。

ext install christian-kohler.path-intellisense

Import Cost

インポートしたパッケージのサイズをインラインで表示します。バンドルサイズを意識した開発に役立ちます。

ext install wix.vscode-import-cost

VSCode設定のカスタマイズ

拡張機能を最大限に活用するには、VSCodeの設定をカスタマイズすることが重要です。

プロジェクト単位の設定

プロジェクトのルートに.vscode/settings.jsonを作成し、チーム全体で共有する設定を記述します。

{
  // 保存時に自動フォーマット
  "editor.formatOnSave": true,

  // デフォルトのフォーマッターをPrettierに設定
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // TypeScriptファイルの設定
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // 保存時にESLintの自動修正を実行
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },

  // ESLintの設定
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],

  // Tailwind CSSの設定
  "tailwindCSS.includeLanguages": {
    "typescriptreact": "html"
  },
  "tailwindCSS.experimental.classRegex": [
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
  ],

  // ファイル関連の設定
  "files.associations": {
    "*.css": "tailwindcss"
  },

  // TypeScriptの設定
  "typescript.preferences.importModuleSpecifier": "relative",
  "typescript.updateImportsOnFileMove.enabled": "always"
}

推奨拡張機能の共有

.vscode/extensions.jsonを作成して、チームメンバーに推奨する拡張機能を定義できます。

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "bradlc.vscode-tailwindcss",
    "pulkitgangwar.nextjs-snippets",
    "formulahendry.auto-rename-tag",
    "christian-kohler.path-intellisense",
    "usernamehw.errorlens",
    "eamodio.gitlens"
  ]
}

ESLintとPrettierの統合

ESLintとPrettierを併用する場合、ルールの競合を防ぐための設定が必要です。

必要なパッケージのインストール

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

ESLint設定ファイル

.eslintrc.jsonの設定例:

{
  "extends": [
    "next/core-web-vitals",
    "prettier"
  ],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "react/react-in-jsx-scope": "off",
    "react/prop-types": "off",
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }]
  }
}

競合の解決

eslint-config-prettierは、Prettierと競合するESLintルールを無効化します。これにより、フォーマットはPrettierが担当し、コード品質のチェックはESLintが担当するという役割分担が明確になります。

デバッグ設定

Next.jsアプリケーションのデバッグ設定も重要です。.vscode/launch.jsonを作成します。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev"
    },
    {
      "name": "Next.js: debug client-side",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000"
    },
    {
      "name": "Next.js: debug full stack",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev",
      "serverReadyAction": {
        "pattern": "started server on .+, url: (https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      }
    }
  ]
}

まとめ

VSCodeの拡張機能を適切に設定することで、Next.js開発の効率を大幅に向上させることができます。

必須拡張機能:

  • ESLint: コード品質の維持
  • Prettier: 自動フォーマット
  • Tailwind CSS IntelliSense: スタイル作成の効率化
  • Next.js Snippets: コードスニペット

重要な設定ポイント:

  • プロジェクト単位の設定を.vscode/ディレクトリで管理
  • ESLintとPrettierの競合を適切に解決
  • チーム全体で統一した環境を構築

これらのツールを活用して、快適なNext.js開発環境を構築しましょう。

参考文献

円