Docs
Next.js adapter guide
Use the packaged adapter in `packages/growthsync-nextjs-adapter` to consume published GrowthSync pages from another Next.js app.
1. Copy or package the adapter
The consumer-side adapter lives in packages/growthsync-nextjs-adapter. For testing, copy that folder into your other app or link it locally as a package.
2. Add the site credentials
GROWTHSYNC_BASE_URL=https://your-growthsync-instance.com
GROWTHSYNC_SITE_ID=your-site-id
GROWTHSYNC_SITE_TOKEN=your-site-token3. Create the route in your Next.js app
import { GrowthSyncPage, createGrowthSyncClient } from "growthsync-nextjs-adapter";
const client = createGrowthSyncClient({
baseUrl: process.env.GROWTHSYNC_BASE_URL!,
siteId: process.env.GROWTHSYNC_SITE_ID!,
siteToken: process.env.GROWTHSYNC_SITE_TOKEN!,
});
export async function generateStaticParams() {
const slugs = await client.getSlugs();
return slugs.map((slug) => ({ slug }));
}
export default async function Page({
params,
}: {
params: Promise<{ slug: string }>;
}) {
const { slug } = await params;
const page = await client.getPage(slug);
return <GrowthSyncPage blueprint={page.blueprint} appName="Your Product" />;
}4. The manifest endpoint shape
const manifest = await fetch(
`${process.env.GROWTHSYNC_BASE_URL}/api/sites/${process.env.GROWTHSYNC_SITE_ID}/manifest`,
{
headers: {
Authorization: `Bearer ${process.env.GROWTHSYNC_SITE_TOKEN}`,
},
next: { revalidate: 60 },
}
).then((res) => res.json());Use GET /api/sites/:siteId/manifest to list published slugs and GET /api/sites/:siteId/pages/:slug to fetch a full page blueprint.