Star us on GitHub

Next.JS 13 Considerations

Given that Next.js 13 supports the new app directory and defaults to using server components, its important to make sure that is being initialized on the client. In order to do this, we recommend creating a client component within your Next.js /app directory, and then importing this component in your layout file of choice.

Take a look at the example below, or for a full project, refer to this sample github app.

// app/highlight.tsx 'use client' import { H } from '' H.init('<YOUR_PROJECT_ID>', { environment: 'production', enableStrictPrivacy: false, }) const Highlight = () => { return null } export default Highlight

In the layout.tsx file below, keep the imported component within the <body></body> component so that client-side hydration works correctly.

// app/layout.tsx import './globals.css' import Highlight from './highlight' export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="en"> <head /> <body> <Highlight /> {children} </body> </html> ) }