naopoyo.com
  • Docs
  • Tags
  • Bookmarks
  • Tools
  • About
  • Docs
  • Tags
  • Bookmarks
  • Tools
  • About

目次

© naopoyo

📖

Next.jsのインストールとESLint・Prettierのセットアップ

公開日
約2年前
2023-10-01
更新日
15日前
2025-10-08
更新履歴
GitHubで見る
  • Next.js
preview

この記事の概要

App Routerを使うNext.jsプロジェクトのセットアップ手順をまとめた記事です。アプリの種類に依らず共通して役立つ項目を中心に記しています。

  • ESLintの設定
  • Prettierの設定

Tailwind CSSを使った構成で説明しています。Tailwindを使わない場合は適宜読み替えてください。

この記事は次の環境で作業した内容を元にしています:

  • macOS 15.2
  • Node 20.15.1
  • pnpm 10.18.1
  • Next.js 15.5.4
  • Tailwind CSS 4.1.14

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

次のコマンドで新しいNext.jsアプリを作成します。my-app は任意の名前に置き換えてください。

Terminal
npx create-next-app@latest my-app --ts --tailwind --eslint --app --turbopack --src-dir --import-alias '@/*' --use-pnpm --skip-install

作成後、プロジェクトに移動して依存をインストールします:

Terminal
cd my-app
pnpm install

.npmrc を設置

.npmrc
public-hoist-pattern[]=*eslint*
public-hoist-pattern[]=*prettier*

pnpm v10系では、この .npmrc がないとVS Code の ESLint 拡張が正しく動かないケースがあります。

pnpm を v10 に上げたら VSCode で ESLint の通知が出なくなった
zenn.dev favicon
zenn.dev
pnpm を v10 に上げたら VSCode で ESLint の通知が出なくなった

npm 周辺ツールの設定

npm-check-updates や sort-package-json をローカルにインストールせずに使う方法です。package.json に次のスクリプトを追加すると便利です:

package.json
"scripts": {
  "format:package": "pnpm dlx sort-package-json",
  "ncu": "pnpm dlx npm-check-updates"
}

これで次のコマンドが使えます:

  • pnpm ncu — package.json の依存を最新に更新(書き換え)
  • pnpm format:package — package.json の項目を整列

コードフォーマットのための設定

pnpm format でプロジェクトのファイルをフォーマットできるように、Prettier を開発依存として追加します。

Terminal
pnpm add -D -E prettier eslint-config-prettier

これで Prettier と eslint-config-prettier が追加されます。続けて設定ファイルを作成・編集します。

package.jsonを修正

下記のようにスクリプトを追加すると、pnpm format で整形と ESLint の自動修正が実行できます。

package.json
"scripts": {
  "lint:fix": "next lint --fix",
  "prettier": "prettier --write --ignore-unknown .",
  "prettier:check": "prettier --check --ignore-unknown .",
  "format": "pnpm prettier && pnpm lint:fix"
}

eslint.config.mjs を修正

eslint-config-prettier をESLint設定に追加して優先させます。

eslint.config.mjs
const eslintConfig = [
  // ...
  ...compat.extends("next/core-web-vitals", "next/typescript", "prettier"),
  // ...
];

.prettierrc.yamlを作成

次のような Prettier 設定を用意します。

.prettierrc.yaml
trailingComma: 'es5'
tabWidth: 2
semi: true
singleQuote: true
jsxSingleQuote: false
arrowParens: 'always'
printWidth: 100

.prettierignoreを作成

Prettierの適用を除外するために .prettierignore を用意します。

.prettierignore
.vercel
.next
pnpm-lock.yaml

.vscode/settings.jsonの修正

VS Code では次の設定を追加すると保存時に自動フォーマット・自動修正が動きます(拡張機能が必要)。

.vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "editor.tabSize": 2
}

Typescriptのimportを綺麗にするための設定

Terminal
pnpm add -D -E eslint-plugin-import eslint-plugin-unused-imports

これらのプラグインを導入すると、importの並び替えや未使用importの検出が可能になります。eslint.config.mjs に次のように追加してください:

eslint.config.mjs
import eslintPluginBetterTailwindcss from 'eslint-plugin-better-tailwindcss'
import eslintPluginImport from 'eslint-plugin-import'
import eslintPluginUnusedImports from 'eslint-plugin-unused-imports'

// ...

const eslintConfig = [
  // ...
  {
    plugins: {
      'better-tailwindcss': eslintPluginBetterTailwindcss,
      import: eslintPluginImport,
      'unused-imports': eslintPluginUnusedImports,
    },
    rules: {
      ...eslintPluginBetterTailwindcss.configs['recommended-error'].rules,
      'better-tailwindcss/no-unregistered-classes': ['error', { detectComponentClasses: true }],
      'unused-imports/no-unused-imports': 'error',
      'import/order': [
        'error',
        {
          groups: [
            'builtin',
            'external',
            'internal',
            ['parent', 'sibling'],
            'object',
            'type',
            'index',
          ],
          'newlines-between': 'always',
          alphabetize: { order: 'asc', caseInsensitive: true },
        },
      ],
    },
    settings: {
      'better-tailwindcss': {
        entryPoint: 'src/styles/globals.css',
      },
    },
  },
  // ...
]

Tailwind CSSのためのESLintの設定

eslint-plugin-better-tailwindcss プラグインを使うと、次のような恩恵があります:

  • Tailwindクラスの順序を自動で整える
  • 存在しないクラス名や誤ったクラス名を検出
  • 重複や競合するクラスを検出

eslint-plugin-better-tailwindcss をインストール

例として eslint-plugin-better-tailwindcss をインストールし、eslint.config.mjs に設定を追加する例です:

Terminal
pnpm add -D -E eslint-plugin-better-tailwindcss
eslint.config.mjs
import eslintPluginBetterTailwindcss from 'eslint-plugin-better-tailwindcss'

// ...

const eslintConfig = [
  // ...
  {
    plugins: {
      'better-tailwindcss': eslintPluginBetterTailwindcss,
    },
    rules: {
      ...eslintPluginBetterTailwindcss.configs['recommended-error'].rules,
      'better-tailwindcss/no-unregistered-classes': ['error', { detectComponentClasses: true }],
    },
    settings: {
      'better-tailwindcss': {
        entryPoint: 'src/app/globals.css',
      },
    },
  },
  // ...
]

VS Codeの拡張をインストール

  • ESLint
    ESLintのエラーを表示できるようになります。
  • Prettier - Code formatter
    Prettierによるコードフォーマットができるようになります。
  • Tailwind CSS IntelliSense
    Tailwind CSSのクラス名の自動補完などができるようになります。

コマンドラインから拡張機能をインストールする場合は次のようにします:

Terminal
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension bradlc.vscode-tailwindcss

目次

この記事にリンクしている記事

🐇
Next.jsでGraphQLを使用するためのcodegenとurqlの設定方法
1年以上前 - 2024年07月06日
  • Next.js
  • GraphQL

最近更新された記事

🚩
Next.js 16にアップグレードする
約3時間後 - 2025年10月24日
  • Next.js
🙄
開発日記-2025-10-23 / jsdom v27.0.1 にすると vitest がエラーになる
約2時間後 - 2025年10月24日
  • 開発日記
🛗
Rubocop個人的まとめ
2日前 - 2025年10月21日
  • Ruby
  • Rubocop