Use fivepixels with Next.js
Add Fivepixels to a Next.js App Router project with a small Client Component, then include it once in the root layout.
Tip
Help me follow the Use fivepixels with Next.js guide. Add Fivepixels to a Next.js App Router project with a small Client Component, then include it once in the root layout. Start by running npm install @fivepixels-js/react react react-dom, then review the project and suggest the next steps.
Install the package
bash
npm install @fivepixels-js/react react react-domCreate a client component
tsx
// src/components/FivepixelsClient.tsx"use client";
import { FivePixels } from "@fivepixels-js/react";
export function FivepixelsClient() { return ( <FivePixels project={{ id: "my-next-app" }} visibility={{ devOnly: true }} /> );}Keep the client boundary in this small component. The root layout can remain a Server Component.
Add it to the root layout
tsx
// src/app/layout.tsximport { FivepixelsClient } from "@/components/FivepixelsClient";
export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="en"> <body> <FivepixelsClient /> {children} </body> </html> );}Add stable data-report-id attributes inside individual pages and components as your team expands the review scope.
