概要
page 内に style.ts ファイルを配置する形で開発をしていて、 build 時に以下のようなエラーが起きたので対処法をメモしておきます。
(style.ts には styled-components で定義したスタイルがある)
Build optimization failed: found page without a React Component as default export in
pages/s/create/index.style
対処法
どうやらデフォルトの設定だと、pages 配下にある 'tsx', 'ts', 'jsx', 'js'
ファイルが page として認識されるようです。
そこで next.config.js の pageExtensions を以下のように上書きする事で style ファイルをページ対象外に設定する事が出来ます。
next.config.js
module.exports = {
pageExtensions: ['jsx', 'tsx'],
}
参考にした記事
next.config.js: Custom Page Extensions | Next.js
https://nextjs.org/docs/api-reference/next.config.js/custom-page-extensions#including-non-page-files-in-the-pages-directory