Zenn
🐱

Next.jsでのプロジェクト初期設定まとめ

2024/09/12に公開
Next.js
yarn
ESLint
Tailwind CSS
Prettier
tech

Next.jsでプロジェクトを構築する際の初期設定(自分なりの)をまとめておきます。
yarnをv4にアップデートしたり、Prettierを組み込んだり、いつも同じことを実施するのに、毎回調べなおして実施していたので。。。
あくまでも自分好みの設定なので、参考までにどうぞ。
※随時ブラッシュアップしていきます。

まずはNext.jsとしてプロジェクトを初期構築

まずは公式の手順通り、Next.jsのcreate-next-appコマンドでNext.jsとしてプロジェクトを初期構築します。
※Node.jsは事前にインストールしておいてください。

https://nextjs.org/docs/getting-started/installation

$ npx create-next-app@latest

デフォルト設定で問題無いので、プロジェクト名以外はそのままEnter。

Gitのリモートリポジトリを登録

Gitで管理を行う場合は、リモートリポジトリを登録する。
create-next-appの段階でGitリポジトリとしても初期化されているので、originを登録するだけでOKです。

$ git remote add origin https://github.com/***/***.git

yarn v4系を利用するように変更

自分はyarn v4系を利用したいので、そのように変更します。
今はpnpmなんかも人気なんですかね。
このあたりはお好みで。

package-lock.jsonを削除し、一旦node_modulesも削除

$ rm -rf node_modules/
$ rm package-lock.json

yarn v4を導入

v4というか、stableの最新版を利用するようになります。

$ yarn set version stable

node-modulesを利用する設定を追加

デフォルトだとnode-modulesを利用しない設定なので、自分はnode-modulesを利用する設定に変更しています。
まだ、node-modulesを利用しない設定だとうまくいかない場合がある気がするので。

.yarnrc.ymlを作成し、下記のように設定。

.yarnrc.yml
nodeLinker: node-modules

.gitignoreの設定を追加

yarn v4用に下記設定を追加します。

.gitignore
# yarn
.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

yarn install

最後にyarn installを行って、yarn.lock、node-modulesが生成されればOKです。

$ yarn install

パッケージのアップデート

ここで一旦パッケージを最新化しておきます。
yarn v4だとupgrade-interactiveコマンドが利用できるので、これでまとめて最新化します。

$ yarn upgrade-interactive

下記のようにアップデート可能なパッケージとバージョンが表示されるので、アップデートしたいものを選んでEnter。
基本的に最新化します。
※ESLintのv9はまだ使いたくないので、v8の最新にしておきます。

ビルド確認

パッケージの最新化を行った段階で一旦ビルドを行って、問題無くビルドできることを確認しておきます。
※パッケージのメジャーバージョンアップなどをしてしまうと、ビルドが通らない可能性があります。

$ yarn build

EditorConfigの設定

EditorConfigを設定しておきます。
.editorconfigを作成し、下記の通り設定します。

下記設定値は自分の好みで。
特にmax_line_length = 120など。
80はやりすぎ(短すぎ)な気がして、自分は120派です(笑)

.editorconfig
root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
max_line_length = 120
trim_trailing_whitespace = true

[*.md]
max_line_length = 0
trim_trailing_whitespace = false

Prettierの導入

importとtailwindcssの整形プラグインと共にprettierを追加します。

$ yarn add -D prettier prettier-plugin-organize-imports prettier-plugin-tailwindcss

設定ファイル(.prettierrc)を作成し、下記の通り設定します。
デフォルト値以外を設定しています。
各種設定の内容はお好みで。
semiやprintWidthの設定値は意見が分かれるところ(笑)
自分はセミコロンは無くて良いなら不要派で、printWidthはEditorConfigと同様で120としています。

.prettierrc
{
  "trailingComma": "all",
  "semi": false,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "printWidth": 120,
  "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"]
}

Prettierの整形がファイル保存時に自動で動くように、VSCodeに下記の通り設定を追加します。

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

一括整形用のスクリプトを追加しておきます。

package.json
{
  "scripts": {
    "prettier": "prettier --write './src/**/*.{js,jsx,ts,tsx,json,css}'"
  },
}

ESLintの追加設定

Next.jsとしてプロジェクトを初期化した際にESLintは組み込まれていますが、少しプラグインや設定を追加します。

$ yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-tailwindcss eslint-config-prettier

設定ファイル(.eslintrc.json)を下記の通り修正します。

.eslintrc.json
{
  "extends": [
    "next/core-web-vitals",
    "next/typescript",
    "plugin:@typescript-eslint/recommended",
    "plugin:tailwindcss/recommended",
    "prettier"
  ],
  "plugins": ["@typescript-eslint"],
  "overrides": [
    {
      "files": ["*.ts", "*.tsx", "*.js"],
      "parser": "@typescript-eslint/parser"
    }
  ]
}

TailwindCSS用追加パッケージ

TailwindCSSを便利に使うために、下記パッケージを追加しておきます。

$ yarn add tailwind-merge tailwind-variants

デバッグ用起動設定

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

Discussion