Next.js メモ

Next.jsで next dev を立ち上げながら、別ターミナルで next build すると、development でビルドされいるファイルが production のビルドで上書きされてしまって、 next dev で立ち上げているページが見れなくなってしまいます。
以下のようにdevとprodでビルドディレクトリを分けることで、同時に行っても問題なく作業していけました。
export のたびに ローカルサーバを閉じていてかなり非効率だったのでよかったです。

const isProd = process.env.NODE_ENV === 'production'

const nextConfig = {
  distDir: isProd ? 'build' : '.next',
}

module.exports = nextConfig

DOMの操作をしたいときは CSS Modules の クラス名とかを取得して操作しないようにする。
ちゃんと useRef でやる（あたりまえだけど）
タイミングが変になったりしたので改めてメモ

const divRef = useRef<HTMLDivElement>(null)

useEffect(() => {
  if (!divRef.current) return
  divRef.current.classList.add('active')
}, [])

return (
  <div ref={divRef}></div>
)