Integration — Next.js App Router
Step-by-step guide for adding RPAlert to a Next.js App Router project.
1. Add your API key to environment variables
Add your API key to .env.local:
NEXT_PUBLIC_RPALERT_API_KEY=your_api_key_here
You can find your API key on the app detail page in the RPAlert dashboard.
2. Add RPAlertProvider to your root layout
Edit app/layout.tsx and wrap <body> with RPAlertProvider:
import { RPAlertProvider } from "rpalert-sdk/react";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<RPAlertProvider apiKey={process.env.NEXT_PUBLIC_RPALERT_API_KEY!}>
{children}
</RPAlertProvider>
</body>
</html>
);
}
RPAlertProvider uses useEffect internally, so it works seamlessly with Next.js App Router server components.
3. Verify with debug mode
Add the debug prop to print SDK logs to the browser console:
<RPAlertProvider
apiKey={process.env.NEXT_PUBLIC_RPALERT_API_KEY!}
debug={process.env.NODE_ENV === "development"}
>
{children}
</RPAlertProvider>
Open DevTools and look for [RPAlert] prefixed logs:
[RPAlert] Starting performance monitoring
[RPAlert] Navigation detected: /about
[RPAlert] Metrics sent successfully
4. Optional configuration
<RPAlertProvider
apiKey={process.env.NEXT_PUBLIC_RPALERT_API_KEY!}
endpoint="https://rpalert.dev/api/metrics" // Custom endpoint (rarely needed)
>
{children}
</RPAlertProvider>
Need
batchInterval? TheRPAlertProvideruses the default 30-second interval. To customize it, use the Functional API withstart("key", { batchInterval: 15000 }).
See the API Reference for the full list of options.