Menu
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-token

3. 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.