next.jsでpages配下にstyleファイルがあるとビルドに失敗する時の対処法

概要

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