NetlifyでNext.jsをホストする時は、`Bundle JS`に注意

半日潰れたので覚書。

Bundle JSとは？

Netlifyが提供するAsset最適化オプションの1つ。複数のファイルを1つにまとめて、Amazon CloudFrontから配信するように自動でしてくれます。

Next.jsアプリで使った場合

Next.jsはビルド時にファイルを複数のchunkにわけて生成します。

これが1ファイルに自動でまとめられます。

何が起きたか

自分が遭遇したのは、「React Hookが一部ページで実行されなくなった」という現象です。

# pages/_app.tsx
function MyApp({ Component, pageProps }) {
  useIonicComponent()
  useIonDarkModeHandler()
  useGATrackPageView()

# pages/[slug].tsx
export const SinglePostContent: FC<{
    post: WPPost | null
}> = ({post}) => {
    useHighlightJS(post)

このあたりが子ページの一部で動作しなくなり、「IonicのWeb Componentが描画されない」「HilightsJSのハイライトが入らない」などの現象に遭遇しました。

Frameworkが生成するファイルは無闇に結合しない

WordPressでもこういう現象あったなぁというのを後から思い出しました。何かしらの目的を持ってフレームワークがファイル分割を行なっている場合がありますので、Assetの最適化はテスト環境を作って試してからやるなど、慎重に行う方が良さそうです。