はじめに
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"
}