# Fix Next.js Hydration Error Outside Suspense Boundary

> Use the Next.js Metadata API in the App Router or the next/head component in the Pages Router to manage head elements and prevent hydration mismatches

**URL:** https://sentry.io/answers/error-hydrating-happened-outside-suspense-boundary/

---

## The Problem

When using Next.js 13 and the App directory, you might encounter the following error when using the [`<head>` tag](https://www.w3schools.com/tags/tag_head.asp) 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.

## The Solution

In the App Router, use the [Metadata API](https://nextjs.org/docs/app/building-your-application/optimizing/metadata) to manage `<head>` elements. The `next/head` component does not work in the App Router.

Export a `metadata` object from your page or layout:

```jsx
export const metadata = {
  title: "Test Title",
};

export default function Home() {
  return (
    <main>
      <div>
        <h1>Hello World</h1>
      </div>
    </main>
  );
}
```

For dynamic metadata, use the `generateMetadata` function:

```jsx
export async function generateMetadata({ params }) {
  const { slug } = await params;
  return { title: `Page - ${slug}` };
}
```

### Pages Router

If you are using the Pages Router, use the `Head` component from `next/head`:

```jsx
import Head from "next/head";

export default function Home() {
  return (
    <main>
      <Head>
        <title>Test Title</title>
      </Head>
      <div>
        <h1>Hello World</h1>
      </div>
    </main>
  );
}
```

For additional guidance on fixing hydration errors, see this [answer](https://sentry.io/answers/hydration-error-nextjs/).

---

*Source: [sentry.io/answers/error-hydrating-happened-outside-suspense-boundary/](https://sentry.io/answers/error-hydrating-happened-outside-suspense-boundary/)*