2023-06-30

Next.jsセットアップ作業履歴。

参考

https://zenn.dev/rh820/articles/1e62510776221e

バージョン

React: 18.x
ReactDOM: 18.x
Next.js: 13.x

導入するライブラリ等

  • TypeScript: 5.1.6
  • ESLint (8.23.0)
  • Prettier (8.43.0)
  • jest
  • testing-library
  • msw
  • react-hook-form
  • zod
  • swr

コマンドたち

amanokokorotarou🙃 ~/Project/Next on ☁️  (jp)  
❯ npx create-next-app@latest

対話型で適当に答えて作成。

フォームとバリデーション関連。

amanokokorotarou🙃 ~/Project/Next/suggest-sample-app on  main via  v18.12.1 on ☁️  (jp)
❯ npm install react-hook-form zod @hookform/resolvers

テスト関連のライブラリ

amanokokorotarou🙃 ~/Project/Next/suggest-sample-app on  main [!] via  v18.12.1 on ☁️  (jp) took 2s
❯ npm install -D jest @testing-library/react @testing-library/jest-dom @testing-library/react @testing-library/user-event msw cypress

データ取得のためのライブラリ

amanokokorotarou🙃 ~/Project/Next/suggest-sample-app on  main [!] via  v18.12.1 on ☁️  (jp) took 4s
❯ npm install swr

prettierとtailwind関連のeslintとprettierのプラグインやルールセット

amanokokorotarou🙃 ~/Project/Next/suggest-sample-app on  main [!] via  v18.12.1 on ☁️  (jp) took 2s
❯ npm install -D prettier prettier-plugin-tailwindcss eslint-config-airbnb eslint-plugin-tailwindcss
module.exports = {
  // eslint-disable-next-line global-require
  plugins: [require("prettier-plugin-tailwindcss")],
};

eslint.json

参考: 

{
  "rules": {
    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ],
    "react/jsx-filename-extension": [
      "error",
      { "extensions": [".js", ".jsx", "ts", "tsx"] }
    ],
    "react/jsx-props-no-spreading": "off",
    "react/jsx-curly-brace-presence": "off"
  },
  "extends": [
    "airbnb",
    "next/core-web-vitals",
    "plugin:tailwindcss/recommended",
    "prettier"
  ],
  "plugins": ["tailwindcss"]
}