今回設定するもの

Next.js
TypeScript
ESLint
Prettier
StoryBook

一応、完成品はこちら

設定をしていく

Next.js

$ npx create-next-app --typescript --use-npm

create-next-app は久しぶりに実行する際はinstallしといた方が良いかと

npmを使いたいのでオプションで--use-npmを指定しています付けなかった場合はyarnが指定されているのでnpm派の方はつけるようにちなみに、毎度忘れて作り直してます

--typescriptを付与しているので、typescript対応も同時に完了です。

ESLint

nextjs11からnext lintが使用できます。

$ npx next lint
To use ESLint, additional required package(s) must be installed.

Please install eslint and eslint-config-next by running:

        npm install --save-dev eslint eslint-config-next

Once installed, run next lint again.

何個か入れろって言われたのでinstallします

$ npm install --save-dev eslint eslint-config-next

package.json にnext lintを追加します

package.json

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

npm run lintでlintが動くようになりました。

↓参考

https://nextjs.org/docs/basic-features/eslint

Prettier

ReactNativeの開発環境メモ２ - Prettier編の時と同じ設定で使います

.prettierrc

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "parser": "typescript",
  "filepath": "./src/**/*.{ts,tsx}"
}

StoryBook

これは好みですが、自分は入れておきます！！

$ npx -p @storybook/cli sb init --type react_scripts

いろいろ生成されますが、storiesディレクトリは空にしておきます（いらないのでw）

husky & lint-staged

最後にhuskyとlint-stagedをついか下記の記事参考にそのまんま実装....!!!

ReactNativeの開発環境メモ３ - husky & lint-staged編

と行きたかったのですが、npmを使っているのでhuskyの導入のとこは下記にします

$ npx husky-init && npm install

まとめ

いったんおわり。

最終的に、PrettierとStoryBookしか追加してないような.....???

今後material-uiとか入れておいた方がいいかなって物が出てきたら追加します！

Code Lab 🤔

Next.jsのinitializeをしてみた