【02】Next.js + TypeScript + Tailwind CSSでサイト公開したときのメモ【環境構築編】

Next.js + TypeScript + Tailwind CSS を使ってサイトを公開したときの備忘録です。

1. 事前準備

Voltaインストール

Voltaをインストールしておきます。

# windowsの場合
winget install Volta.Volta

Voltaインストール手順は公式サイトを確認ください。

# Node.jsのインストール
volta install node

# 特定バージョンのNode.jsをインストール
volta install node@18

# プロジェクトにNode 18を固定
volta pin node@18

# 現在使っているバージョン確認
volta list

# npmのバージョン指定もできる
volta install npm@10
volta pin npm@10

Node.jsインストール

今回はVoltaを使って管理するので、voltaコマンドを実行します。

volta install node

// package.json
"scripts": {
  "start": "node app.js",
  "build": "vite build",
  "dev": "vite",
  "lint": "eslint ."
}

2.Next.js プロジェクトの作成

VSCodeでプロジェクトの階層へ移動します。

cd C:\Users\（階層）

ターミナルで以下コードを実行します。

npx create-next-app@latest

実行後、対話コマンドが出てくるので答えていきます。

このあと、自動的にプロジェクトフォルダが作成され、初期ファイルが配置されます。

3.開発サーバーの起動

作成されたプロジェクトのフォルダへ移動し、開発サーバーを立ち上げます。

cd code ＞npm run dev

以下のURLにアクセスすると、Next.js の初期画面が確認できます。

http://localhost:3000

初期画面でもなんか嬉しい

4.TypeScript の設定をカスタマイズ（tsconfig.json）

Next.js で自動生成された tsconfig.json をカスタマイズします。
※今回はこちらのzennの記事のとおりに進めました。

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": false,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noUncheckedIndexedAccess": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

主な設定の意味

5.Prettier の導入と設定

Prettier は、コードの「見た目」を統一してくれる整形ツールです。

• Prettier本体のインストール
  • .prettierrc.jsonの設定
  • .prettierignore の設定
• VsCodeにPrettier拡張機能をインストール
  • settings.jsonを調整

の手順で進めます。

Prettier本体のインストール

npm i -D prettier

.prettierrc.jsonの設定

.prettierrc.jsonファイルを作成し、以下を記載して保存します。

{
  "printWidth": 100,
  "tabWidth": 2,
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "arrowParens": "always"
}

.prettierignore の設定

.prettierignore は、Prettierで自動整形したくないファイルやフォルダを除外するための設定ファイルです。
.gitignore と同じように使えます。

/package.json
/package-lock.json

package.json、package-lock.json は Prettier で整形すべきではないので.prettierignore に入れておくのが安全＆おすすめです。

VsCodeにPrettier拡張機能をインストール

Prettier – Code formatter は、VSCode上でコードのフォーマット（整形）を自動で行ってくれる拡張機能です。

settings.jsonを調整

インストール後、VSCodeのsettings.json に以下を追加します。

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

この設定により、保存時に自動で整形されるようになります。

動作確認

この時点で、ちゃんとPrettierが動いているか確認します。
app/page.tsxを開いて、インデントを適当に削除してからctrl + Sを押してください。
インデントが綺麗になれば無事に動いています。

6.ESLintの設定

ESLintは、JavaScriptやTypeScriptのコードに潜むエラーや非推奨の書き方を検出し、自動修正もしてくれる静的解析ツールです。実行する前にミスを教えてくれるので、安心して開発を進められます。

さきほど新規プロジェクトを作成したときESLintもインストールしたので、eslint.config.mjsという設定ファイルも自動生成されています。

import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

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

export default eslintConfig;

※以前は .eslintrc.json や .eslintrc.js が主流でしたが、ESLint 8.21以降では eslint.config.js（CJS）や eslint.config.mjs（ESM）が公式に推奨されているそうです。

検索すると古い情報が出てきて混乱しがちなところ。

上記デフォルト設定に調整を加えていきます。

typescript-eslintをインストール

npm install -D typescript-eslint

ESLintに設定追加

import { dirname } from 'path';
import { fileURLToPath } from 'url';
import { FlatCompat } from '@eslint/eslintrc';
import tseslint from 'typescript-eslint';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

const eslintConfig = [
  ...tseslint.configs.recommended,
  ...compat.extends('next/core-web-vitals', 'next/typescript'),
  {
    files: ['**/*.ts', '**/*.tsx'],
    languageOptions: {
      parser: tseslint.parser,
      parserOptions: {
        project: './tsconfig.json',
      },
    },
  },
];

export default eslintConfig;

typescript-eslint | typescript-eslint

7.  eslint-config-prettierを導入

eslint-config-prettier は、ESLintとPrettierのルールの衝突を防ぐための設定パッケージです。

インストール

npm install -D eslint-config-prettier

ESLintに設定追加

import { dirname } from 'path';
import { fileURLToPath } from 'url';
import { FlatCompat } from '@eslint/eslintrc';
import tseslint from 'typescript-eslint';
import eslintConfigPrettier from 'eslint-config-prettier/flat';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

const eslintConfig = [
  ...tseslint.configs.recommendedTypeChecked,
  ...compat.extends('next/core-web-vitals', 'next/typescript'),

  {
    files: ['**/*.ts', '**/*.tsx'],
    languageOptions: {
      parser: tseslint.parser,
      parserOptions: {
        project: './tsconfig.json',
      },
    },
  },

  eslintConfigPrettier,
];

export default eslintConfig;

ESLint 拡張機能の追加

VSCodeにESLintの拡張機能を入れておくと、エラーや警告がその場で見えるようになります。
保存と同時にコードの修正も自動で行えるようになるので、とても便利です。

settings.jsonに設定追加

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

動作確認

この時点で、ちゃんとESLintが動いているか動作確認しておきます。（こまめにやっておく）

npm run lint

エラーを確認したい場合は、app/page.tsxに使用しない変数を定義してみます。

エラーが出ていればESLintが効いています。
また保存時に自動で構文チェックし、適切に変更してくれます。

8.Tailwind CSSに関する設定

※参考にした Zenn 記事では eslint-plugin-tailwindcss を用いてクラスの自動整理を行っています。
ただ、今回は Tailwind CSS v4 を使用しているため、2025年7月時点では未対応です。
そのため、クラス名のソートのみ行うprettier-plugin-tailwindcssを入れたいと思います。

prettier-plugin-tailwindcssパッケージをインストール

npm install -D prettier-plugin-tailwindcss

.prettierrc.jsonに設定を追加

{
  "plugins": ["prettier-plugin-tailwindcss"],
  "printWidth": 100,
  "tabWidth": 2,
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "arrowParens": "always"
}

これでtailwindクラスの自動整形ができるようになりました。

拡張機能を追加

tailwindのクラス名を保管してくれるTailwind CSS IntelliSense拡張機能も入れておきます。

動作確認

app/page.tsxのクラスをいじって、自動整形が効いているか確認してみます。
適当な順番にしてctrl+Sをすると…ちゃんと変換されました！

9.Markuplintの導入

Markuplintは、HTML やテンプレートファイルの構文やルールをチェックしてくれるLinterです。
公式サイトが日本語対応（というより開発者さんが日本人）というのもあり、とても安心して使えます…！

インストール

npx markuplint --init

markuplint本体に加え、「Install npm dependencies?」の項目で、@markuplint/jsx-parser、@markuplint/react-specがインストールされてますね。
これでreactにも対応してくれます。

.markuplintrcの調整

設定ファイルを調整します。

{
  "specs": {
    "\\.[jt]sx?$": "@markuplint/react-spec"
  },
  "parser": {
    "\\.[jt]sx?$": "@markuplint/jsx-parser"
  },
  "extends": [
    "markuplint:recommended-react"
  ]
}

VsCodeにMarkuplint拡張機能をインストール

Markuplintの拡張機能もインストールし、settings.jsonに追記します

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "markuplint.enable": true
}