@trevosdk/nextjs

Next.js integration for Trevo experiments: a bucketing-cookie middleware and server-side variant resolution, so the first paint is correct for every visitor — no flicker, nothing hidden. Pairs with @trevosdk/react on the client.

npm install @trevosdk/nextjs @trevosdk/react

Middleware

Gives every visitor a stable trevo_id cookie before the page renders, so the server and the client SDK agree on one identity:

// middleware.ts
export { middleware } from '@trevosdk/nextjs';

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico|.*\\..*).*)'],
};

App Router

// app/layout.tsx (or the experiment page's server component)
import { getTrevoBootstrap } from '@trevosdk/nextjs';
import { TrevoProvider } from '@trevosdk/react';

export default async function Layout({ children }: { children: React.ReactNode }) {
  const bootstrap = await getTrevoBootstrap();
  return (
    <TrevoProvider apiKey={process.env.NEXT_PUBLIC_TREVO_API_KEY} bootstrap={bootstrap}>
      {children}
    </TrevoProvider>
  );
}

getTrevoBootstrap reads the trevo_id cookie, which opts the calling route into dynamic rendering — call it only where experiments run, or pass a single assignment down as useExperiment(key, { initialVariant }) to keep other routes static.

Pages Router

// pages/pricing.tsx
import { resolveExperiments, TREVO_ID_COOKIE } from '@trevosdk/nextjs/server';

export async function getServerSideProps({ req }) {
  const bootstrap = await resolveExperiments({
    apiKey: process.env.NEXT_PUBLIC_TREVO_API_KEY,
    bucketingId: req.cookies[TREVO_ID_COOKIE] ?? '',
  });
  return { props: { bootstrap } };
}

Pass bootstrap to <TrevoProvider> exactly as in the App Router example.

Any other server

@trevosdk/nextjs/server has no Next.js imports — resolveExperiments({ apiKey, bucketingId }) runs on any Node 18+ or edge runtime. Server-side resolution never records an exposure; the client reports it on the variant actually rendered. Full docs at docs.trevosdk.com.