Executing client-side DOM manipulation after static rendering in NextJS

Question

I would like to render a Tripetto form in my NextJS static page. Unfortunately, the Tripetto library uses the "window" object, which is undefined with static rendering.

Is there a way to execute client-side Javascript after static rendering in NextJS to avoid this issue?

Many thanks!

Answer 1

window is not defined server side . You can import Tripetto by using next/dynamic import in this way :

import dynamic from 'next/dynamic'
const Tripetto = dynamic(()=> import('Tripetto'), {ssr: false})

Doing this next will load your lib client side and window will be defined