Hydration error:opening previewURL for localhost:3000


next-page router(getServerSideProps)

      model: 'page',
      locale: lang,
      userAttributes: { urlPath, version: Date.now() },

export default function App(props: Readonly<Props>) {
  const { page } = props
  const shouldRenderBuilderContent = page || isPreviewing() || isEditing()

  return shouldRenderBuilderContent ? (
    <Content customComponents={CUSTOM_COMPONENTS} content={page} model="page" apiKey={apiKey} />
  ) : (
    <DefaultErrorPage statusCode={404} />

When accessing localhost:3000 through the PreviewURL, encountering a hydration error that doesn’t occur when the site is accessed normally. The issue is likely due to parameters in the URL that may be causing <script> or <style> to be nested within <div> elements during rendering. How can this be resolved?

Hello @RadisLuo ,

For resolving hydration-related issues, we recommend you check out the below blog and plugin

Hope this helps!