Welcome to highlight.io
Company
Mission & Values
Compliance & Security
Open Source
Getting Started
Overview
Fullstack Mapping
Backend / Server
Frontend / Client
Fullstack Frameworks
Product Features
Session Replay
Error Monitoring
General Features
Logging
Integrations
Integrations Overview
Amplitude Integration
ClickUp Integration
Discord Integration
Electron Support
Front Integration
Height Integration
Intercom Integration
Linear Integration
Mixpanel Integration
Segment Integration
Slack Integration
Vercel Integration
Tips
Content-Security-Policy
Local Development
Monkey Patches
Performance Impact
Proxying Highlight
Session Search Deep Linking
Troubleshooting
Upgrading Highlight
Highlight.io Changelog
Changelog 12 (02/17)
Menu
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 highlight.io 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 'highlight.run'; 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> ) }