Next.js 開発環境 メンテしました2021-04

1 min read読了の目安(約1200字

ほとんど他の記事から引っ張ってきただけのような内容ですが、なぜかハマったところが多少あったので記事にしました。

リポジトリ

参考記事の方のマネをして lighthouse の gif をREADMEに貼ってみました。
気持ちいいですね。
そのためにホスティングもしたんで一応貼っておきます。

https://github.com/itomise/next-template/tree/archive-20200405

https://next-template-itomise.netlify.app/

構成

  • 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でトランスパイルする設定を追加しました。

参考記事

お世話になりました。

https://github.com/eXamadeus/next-emotion

https://github.com/syuji-higa/template-nextjs-2020-december

https://github.com/Gaji-Labo/demo-storybook-with-next-typescript