はじめに

Next.jsプロジェクト構築の楽をしたいので、備忘録として残しておきます。

プロジェクト作成

下記コマンドを実行し、プロジェクトの雛形を作成します。

docker run --rm -it -v $PWD:/app -w /app node:20-slim \
sh -c 'npm install -g npm && npx create-next-app@latest --ts'

設定は以下とします。

✔ What is your project named? … nextjs-sample（任意の名前)
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … No
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? …　　Yes
✔ What import alias would you like configured? … @/*

Docker関連ファイル作成

プロジェクト作成後にできたプロジェクトルートフォルダに以下の構成でファイルを配置します。

プロジェクトルート
├─ .devcontainer
|  └─ devcontainer.json
├─ docker-compose.yml
└─ Dockerfile

.devcontainer.json

{
    "service": "nextjs-sample",
    "dockerComposeFile": "../docker-compose.yml",
    "portsAttributes": {
    "onAutoForward": {
        "label": "Application",
        "onAutoForward": "ignore"
      }
    },
    "workspaceFolder": "/workdir",
    "customizations": {
      "vscode": {
        "extensions": ["eamodio.gitlens", "dbaeumer.vscode-eslint", "esbenp.prettier-vscode"],
        "settings": {
          "prettier.configPath": ".prettierrc.json",
          "editor.defaultFormatter": "esbenp.prettier-vscode",
          "editor.formatOnSave": true,
          "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true
          },
          "editor.tabSize": 2
        }
      }
    }
}

docker-compose.yml

version: '3.9'
services:
  nextjs-sample:
    ports:
      - 3000:3000
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - .:/workdir
    tty: true

Dockerfile

FROM node:20-slim

RUN apt-get update && \
    apt-get install -y git vim locales-all && \
    npm update -g npm

ENV LANG ja_JP.UTF-8
ENV LANGUAGE ja_JP:ja
ENV LC_ALL ja_JP.UTF-8

WORKDIR /workdir

ESLint設定

ここからはdevcontainerを使用したコンテナ内で行います。

npm install --save-dev @typescript-eslint/eslint-plugin

下記ファイルを以下のように変更します。
ルールに関しては相対インポートをエラーとするために追加しています。

.eslintrc.json

{
  "extends": ["plugin:@typescript-eslint/recommended", "next/core-web-vitals"],
  "rules": {
    "no-restricted-imports": ["error", { "patterns": ["./", "../"] }]
  }
}

Prettier設定

npm install --save-dev prettier

下記ファイルをプロジェクトルート下へ配置します。
デフォルト値でいいルールは記載していません。

.prettierrc.json

{
  "singleQuote": true,
  "printWidth": 120,
  "jsxSingleQuote": true
}

npmコマンドを追加します。

package.json

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
+   "format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json,css}' && next lint --fix"
  }

Jest導入

npm install --save-dev jest jest-environment-jsdom @testing-library/jest-dom @testing-library/react @testing-library/user-event

package.jsonに記述を追加

package.json

"scripts": {
    // 省略
    "test": "jest"
  }

参考記事