Manual installation
Learn the steps to manually integrate Croct into your Next.js project.
The following guide gives you a step-by-step overview of how to install and initialize the SDK in your project.
The CLI can fully automate the integration process for you. Check out the integration guide to get started faster.
Install the SDK
Run the following command to install the SDK:
npm install @croct/plug-nextSet up environment variables
When generating the API key, check the Issue user tokens permission to allow the SDK to generate signed tokens.
Add the following environment variables to your project replacing the placeholders with your Application ID and API Key:
NEXT_PUBLIC_CROCT_APP_ID=<APPLICATION_ID>CROCT_API_KEY=<API_KEY>For a list of all available environment variables, see the Environment variables reference.
Configure the middleware
Choose a section below based on whether your project already uses middleware.
New middleware
Create a new middleware file in the root of your project:
export {middleware} from '@croct/plug-next/middleware';
export const config = { matcher: "/((?!api|_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)"};Existing middleware
Use the withCroct function to wrap your existing middleware as shown in the example below:
import {NextResponse} from 'next/server';import {withCroct} from '@croct/plug-next/middleware';
export const config = {const config = { matcher: '/about/:path*',}
export function middleware(request) {function log(request) { // Your middleware logic here return NextResponse.next();}
export const middleware = withCroct(log, {matcher: config.matcher});Initialize the provider
Add the <CroctProvider> component to the root of your application:
import {CroctProvider} from '@croct/plug-next/CroctProvider';
export default function RootLayout({children}) { return ( <html lang="en"> <body> <CroctProvider> {children} </CroctProvider> </body> </html> );}Check your integration
If you open your application now, it should start sending events.
To check if your integration is working, go to the Integration page of your application.
When working correctly, you should see a green bullet next to the Status label saying "Received traffic in the past 24 hours". If you still do not see this message after a few minutes, see the Troubleshooting reference.