【Next.js】SSRを止める方法

Next jsを使用していて一部のページでSSRを無効にしたい

理由としてはモジュールにブラウザでのみ機能するライブラリが含まれているため

やり方はコンポーネントを遅延読み込みし、SSRを無効にする方法が公式ドキュメントに記載されている

https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr

ssrオプションをfalseにすることで向こうにする

import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(
  () => import('../components/hello3'),
  { ssr: false }
)

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponentWithNoSSR />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home