Code Lab 🤔

🐶

Next.jsのinitializeをしてみた

#nextjs#storybook#prettier#react

公開:

今回設定するもの

一応、完成品は こちら

設定をしていく

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 が動くようになりました。

↓ 参考

Prettier

ReactNative の開発環境メモ2 - 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

最後にhuskylint-stagedをついか
下記の記事参考にそのまんま実装…!!!

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

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

  $ npx husky-init && npm install

まとめ

いったんおわり。

最終的に、PrettierStoryBookしか追加してないような…???

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