NextJs need to solve that!

Unanswered

Argente Brun posted this in #help-forum

Open in Discord

Argente BrunOP

2023-10-03T09:01:58.000Z

Next.js 13 consistently encounters unnecessary errors, and at times, I struggle to pinpoint their origins.

4 Replies

riský

2023-10-03T09:04:43.000Z

you can't put a div inside span

Original message was deleted

riský

2023-10-03T12:03:35.000Z

can i ask how this is a relevant comment for helping the OP?

Emdadul Islam

2023-10-03T12:44:34.000Z

Hydration errors can occur from:

Incorrect nesting of HTML tags

<p> nested in another <p> tag
<div> nested in a <p> tag

Possible Ways to Fix It
1. Disabling SSR on specific components

import dynamic from 'next/dynamic'
 
const NoSSR = dynamic(() => import('../components/no-ssr'), { ssr: false })
 
export default function Page() {
  return (
    <div>
      <NoSSR />
    </div>
  )
}

2. Using suppressHydrationWarning
Sometimes content will inevitably differ between the server and client, such as a timestamp. You can silence the hydration mismatch warning by adding suppressHydrationWarning={true}to the element.

<html lang="en">
      <body suppressHydrationWarning={true}>
      {children}
      </body>
    </html>

For more Details : https://nextjs.org/docs/messages/react-hydration-error?trk=public_post_comment-text

@Emdadul Islam **Hydration errors can occur from:** Incorrect nesting of HTML tags `<p> nested in another <p> tag <div> nested in a <p> tag` **Possible Ways to Fix It** ** 1. Disabling SSR on specific components** `import dynamic from 'next/dynamic' const NoSSR = dynamic(() => import('../components/no-ssr'), { ssr: false }) export default function Page() { return ( <div> <NoSSR /> </div> ) }` 2. **Using suppressHydrationWarning** Sometimes content will inevitably differ between the server and client, such as a timestamp. You can silence the hydration mismatch warning by adding `suppressHydrationWarning={true} `to the element. ` <html lang="en"> <body suppressHydrationWarning={true}> {children} </body> </html>` For more Details : https://nextjs.org/docs/messages/react-hydration-error?trk=public_post_comment-text

riský

2023-10-03T12:48:27.000Z

your 2 solutions are a little overkill and should only be used as a last resort, the OP should try and see why they are using div inside p, and fix that instead