概要

本記事のゴール

以下を参考にフロントエンド環境構築(Docker + React + TypeScript + ESLint + Prettier + VSCode)を行う。

以下つまづいた点をメモする。

DockerによるNext.js + TypeScriptの導入

FROM node:lts-buster-slim

WORKDIR /app/src

ENV LANG C.UTF-8
ENV TZ Asia/Tokyo

ADD . /app

docker-compose.yml

  frontend:
    container_name: front
    build: ./frontend/
    image: frontend
    volumes:
      - ./frontend:/app
    ports:
      - 3000:3000
    command: "npm run dev"
    networks:
      app_net:
        ipv4_address: "172.20.0.4"

docker-compose build

docker-compose run --rm frontend sh -c 'npx create-next-app src --typescript'

docker-compose up

リンター・フォーマッターの設定

以下記事を参考に設定
https://zenn.dev/temple_c_tech/articles/setup-next-on-docker

エラー内容1: .eslintrc.jsonでstandardをロードできない

npm run lint

> src@0.1.0 lint
> next lint

Failed to load config "standard" to extend from.

解決策1:.eslintrc.jsonからstandardを除外する

  "extends": [
    "plugin:react/recommended",
-   "standard",
    "prettier" // eslintとprettierの衝突回避
  ],

エラー内容2: @typescript-eslint/eslint-pluginモジュールが見つからない

npm run lint

info  - SWC minify release candidate enabled. https://nextjs.link/swcmin
Failed to load plugin '@typescript-eslint' declared in '.eslintrc.json': Cannot find module '@typescript-eslint/eslint-plugin'

解決策2: @typescript-eslint/eslint-pluginを npm installする

docker-compose run --rm frontend npm i --save-dev @typescript-eslint/eslint-plugin

エラー内容3: npm run lint時にWarningなどが出る

npm run lint
・・・
warn  - The Next.js plugin was not detected in your ESLint configuration. See https://nextjs.org/docs/basic-features/eslint#migrating-existing-config
Warning: React version not specified in eslint-plugin-react settings. See https://github.com/jsx-eslint/eslint-plugin-react#configuration .
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

解決策3:

Next.jsではデフォルトでLintが入っているが、それを使っていないことが原因。
.eslintrc.jsonで以下を追加

  "extends": [
    "plugin:react/recommended",
    "prettier",
+   "next/core-web-vitals"
  ],

参考
https://github.com/vercel/next.js/discussions/28485

エラー内容4: VSCodeでファイル保存時にリンター・フォーマッターが効かない

解決策4: VSCodeの設定を見直す

以下などを参考にVSCodeの設定を見直す
https://applingo.tokyo/article/1867

成果

サンプルアプリの起動確認

localhost:3000にアクセスし、サンプルアプリが表示できることを確認

リンター・フォーマッターの設定確認

ファイル保存時にリンター・フォーマッターが効いていることを確認

React + Rails + AWS Fargate の構成を実現したい - 02 フロントエンド環境構築編(Docker + React + TypeScript + ESLint + Prettier + VSCode)

目次

概要