✍️
Next.js 開発環境 メンテしました2021-04
ほとんど他の記事から引っ張ってきただけのような内容ですが、なぜかハマったところが多少あったので記事にしました。
リポジトリ
参考記事の方のマネをして lighthouse の gif をREADMEに貼ってみました。
気持ちいいですね。
そのためにホスティングもしたんで一応貼っておきます。
構成
- Next.js（みんな大好き）
- Emotion（CSS Modulesとかなり迷ったけどやっぱりEmotionにしました）
- TypeScript（ないと生きていけない）
- Storybook（コンポーネント駆動開発したい）
- next-pwa（あとからいれるのめんどいから入れとく）
- Recoil（Context使ってたけどやっぱりこっちのが便利）
- ESLint
- Prettier
- Jest
概要
あまり書くことないですがポイントを軽く説明
だいたいの構成が higa さんの記事と同じなのでそちらにどうぞ。
storybook
Emotion + Next.jsの記事があまりなくて困りました。
Globalスタイルの当て方わからん、なぜか css props が動かない、など。
スナップショットなどはまだやってないのでやったら追加します。
Meta
meta系の情報をどう管理するかいつも迷っていて、jsonにするべきだとおもいつつtsの恩恵もうけたいということで現状になっています。
実際の案件ではスプレッドシートにするのもいいかもしれないですね。
next.config.js
productionでビルドするときに開発サーバを立ち上げながらやると開発サーバ側がとまってしまうので、distDirをNODE_ENVごとに分けると同時進行できる、という細かいtips。
pwaは開発時はoffるようにしました。
4/9 追記：
recoilがie11に対応していないようだったので、next-transpile-modulesでトランスパイルする設定を追加しました。
参考記事
お世話になりました。
Discussion