TL;DR
Best Google Optimize replacement for Next.js: ExperimentHQ for visual testing (works with App Router and Pages Router) or Statsig for server-side experiments. ExperimentHQ is the closest to Optimize's simplicity—just add the script tag. For zero-flicker, use middleware-based testing.
Your Options
Client-Side (Easiest)
Use ExperimentHQ like you used Optimize:
- • Add script tag to _app.tsx or layout
- • Use visual editor for changes
- • Minimal flicker with <5KB script
- • Works with App Router and Pages Router
Server-Side (Zero Flicker)
Use middleware for edge-based testing:
- • Implement in middleware.ts
- • Assign variants at the edge
- • Zero flicker guaranteed
- • Requires code changes
Migration from Google Optimize
- Remove Google Optimize script from your Next.js app
- Sign up for ExperimentHQ
- Add ExperimentHQ script to _app.tsx (Pages Router) or layout.tsx (App Router)
- Recreate experiments using visual editor
Installation (App Router)
// app/layout.tsx
export default function RootLayout({ children }) {
return (
<html>
<head>
<script src="https://cdn.experimenthq.io/snippet.js" data-project-id="your-id"></script>
</head>
<body>{children}</body>
</html>
)
}