When using Next.js 13 and the App directory, you might encounter the following error when using the <head>
tag in your root component:
Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering
This occurs because Next.js controls the injection of metadata into the <head>
tag of the HTML of your page during hydration. By using the <head>
tag directly, the server-rendered HTML does not match what is on the client at the time of hydration.
To resolve this error, you can instead use the custom Head
component provided by Next.js:
import Head from "next/head"; export default function Home() { return ( <main> <Head> <title>Test Title</title> </Head> <div> <h1>Hello World</h1> </div> </main> ); }
This tag allows you to inject your required attributes into the HTML of your page during hydration.
Get actionable, code-level insights to resolve Next.js performance bottlenecks and errors.
Run the line of code below to:
Create a free Sentry account
Run the CLI install command to automatically add the Sentry SDK to your project:
npx @sentry/wizard@latest -i nextjs
Start capturing errors and performance issues
Loved by over 4 million developers and more than 90,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.