Day1

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

$ npx create-next-app next-tutorial

Dockerfileを追加

FROM node:14-alpine

WORKDIR /usr/app

COPY package.json .

RUN yarn

COPY . .

EXPOSE 3000

CMD ["yarn", "dev"]

ビルド

$ docker build -t nextjs .
$ docker run -it -d -p 3000:3000 --name app nextjs

http://localhost:3000へ接続して起動を確認

oosuke

Day2

毎回buildコマンド叩くのも面倒なのでミニマムなdocker-compose.ymlを追加、volumesを設定して、編集がすぐに反映されるように。

version: "3"

services:
  app:
    build:
      context: .
    volumes:
      - .:/usr/app
    ports:
      - 3000:3000
    command: /bin/sh -c "yarn dev"

起動する際に、以下のエラー

error  - Failed to load SWC binary, see more info here: https://nextjs.org/docs/messages/failed-loading-swc

SWCの互換性エラーのよう。

SWC - Rust製の高速なコンパイラ

https://swc.rs/

チュートリアルなので、一旦動くバージョンまで下げて動作することを確認。
まだバージョンによって動く動かないがあるのでSWC自体を無効にする方が良さそう。

oosuke

Day3

typescript化を行う

tsconfig.jsonの用意

$ npx tsc --init

必要なモジュールのインストール

$ yarn add -D typescript @types/react @types/node

index.jsをindex.tsxへリネーム

yarn devで正常起動を確認

eslintの設定を行う

eslintの初期化

$ npx eslint --init

package.jsonにnpmスクリプトを追加

"lint": "eslint . --ext .js,.jsx,.tsx,.ts

.eslintrc.jsへ追加のルール設定とreactのバージョン、envを指定する

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["react", "@typescript-eslint"],
  rules: { // 追加
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/ban-ts-comment": "off",
    "react/react-in-jsx-scope": "off"
  },
  settings: { // 追加
    react: {
      version: "detect",
    },
  },
};

settingへreact: { version: "detect" }を指定することでpackage.jsonを見てreactのversionを判断してくれる

prettierの設定

$ yarn add -D prettier eslint-plugin-prettier eslint-config-prettier

.eslintrc.jsへprettierの記述を追加

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true, // 追加
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier", // 追加
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["react", "@typescript-eslint", "prettier" // 追加],
  rules: {
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/ban-ts-comment": "off",
    "react/react-in-jsx-scope": "off",
    "prettier/prettier": "error", // 追加
  },
  settings: {
    react: {
      version: "detect",
    },
  },
};

yarn lint --fixでprettierが機能していることを確認

oosuke

追記

eslint --fixでeslint、prettierを適用していたが、この推奨方法が変わったらしい。

eslint-plugin-prettierは不要になった

Linters usually contain not only code quality rules, but also stylistic rules. Most stylistic rules are unnecessary when using Prettier, but worse – they might conflict with Prettier! Use Prettier for code formatting concerns, and linters for code-quality concerns, as outlined in Prettier vs. Linters.

静的解析とコードフォーマッターは分けて利用すべきとのこと。prettierを簡単に除去することができるよとのこと。

対応

.eslintrc.jsのextendsからplugin:@typescript-eslint/recommendedを削除する。pretteirは引き続き残す。prettierを残す理由としてはeslint-config-prettierを利用しているので競合を回避するため。

あとはeslintとprettierを単純に別々に行うだけ

$ eslint -fix && prettier --write

package.jsonにスクリプトを定義している場合はそちらを書き換える。