create next appした時のグローバルなCSSファイル、exampleによってglobals.cssだったりglobal.cssだったりする

小ネタ。

yarn create next-app したプロジェクトの設定ファイルなどを、 yarn create next-app --example with-jest したプロジェクトにコピーし、 yarn build したら Module not found: Can't resolve 'styles/globals.css' が発生。

TypeScriptプロジェクトにし、baseUrl を src にして、 pages や styles は src 配下に移動済みだったので、なんでだろうと思ったら、 styles 配下のCSSファイル名が異なっていた。

yarn create next-app だと globals.css だが、 yarn create next-app --example with-jest だと global.css と、拡張子前の s がない。

Next.js v12.2.0 のexamplesを検索すると、 globals.css が31件、 global.css が以下の9件。 with-jest 以外に、 with-react-hook-formglobal.css だった。

  • fast-refresh-demo
  • layout-component
  • script-component
  • with-ant-design
  • with-jest
  • with-jest-babel
  • with-react-hook-form
  • with-semantic-ui
  • with-unsplash

気づかずファイルを消してしまったのかと思い、結構慌てた。