Next.jsでReactのライブラリが動かない時の対処法

結論

Next.jsのDynamic importを使おう！

解決した例

@react-google-maps/apiというReactのライブラリを用いてGoogle Map上にルート (Polyline) を表示したかった... のだが、地図自体は表示されるけどそのchildrenに指定したPolylineやその他 Polygon, Marker などが一切表示されなかった... イライラ...

// pages/index.jsx

import { GoogleMap, Polyline, useJsApiLoader } from '@react-google-maps/api'

const Home = () => {

  /* 本題と関係ないところは省略 */

  return (
    <>
      {isLoaded && (
          <GoogleMap
            mapContainerStyle={{ height: '400px', width: '800px' }}
            zoom={2}
            onLoad={onLoad}
            onUnmount={onUnmount}
          >
            <Polyline path={path} options={options} />
          </GoogleMap>
        )}
    </>
  )
}

export default Home

ここで、試しに素のReactでやってみた
おい！フツーに表示されるじゃあないか！
window is not definedとかいつものNext.jsのSSR由来のエラーは表示されていなかったから気づけなかった
色々試行錯誤した末、Dynamic importにたどり着いた

// components/googlemap/DynamicPolyline.jsx

import { Polyline } from '@react-google-maps/api'

const DynamicPolyline = ({ path, options }) => {
  return <Polyline path={path} options={options} />
}

export default DynamicPolyline

// pages/index.jsx

import dynamic from 'next/dynamic'

const DynamicPolyline = dynamic(() => import('components/googlemap/DynamicPolyline'))

/* あとはPolylineをDynamicPolylineに置き換えるだけ */

これでちゃんと動くようになった、めでたしめでたし👏

疑問点

このあとわざわざ自前のコンポーネントにしなくてよくね？と思って下のコードにしてみたけど無理でした... なんでだろう...

const DynamicPolyline = dynamic(() =>
  import('@react-google-maps/api').then((mod) => mod.Polyline)
)