Skip to main content

Next.js Integration

@bildit-platform/nextjs is the SDK that renders your BILDIT scheduled content on a production Next.js website. This section walks you from an empty project to scheduled content showing for real visitors.

How it works: two parts​

A complete BILDIT setup has two pieces, and you need both:

  1. The Visual Editor script (bildit-cms-script.min.js) — lets you edit and preview slots inside the Visual Editor. Set it up in Visual Editor Setup. It does not render on your production site.
  2. The @bildit-platform/nextjs SDK — fetches your published scheduled content and renders it on your production website, server-side. This is what visitors see.
Downloading the script does not show scheduled content on your site

The Visual Editor script only renders inside the Visual Editor. To display scheduled content on your production website you install the @bildit-platform/nextjs SDK and follow the Integration Guide.

What you'll set up​

The SDK integration is a one-sitting task across a handful of files: install the packages, add middleware, fetch scheduled content in your root layout, wrap your app in BilditProvider, and drop <SlotPlaceholder> where scheduled content should appear. The Integration Guide is a step-by-step, copy-along walkthrough.

Before you start​

  • A web instance in the VEE, with at least one published scheduled content item that has a Location assigned.
  • An API key for that instance. (On a free trial your content renders in the VEE but is blank on the production site until you upgrade the plan — see Free-trial plan entitlement.)
  • A Next.js App Router project. (The @bildit-platform/* packages are public on npm — npm install, no token needed.)
Two different BilditProvider components

This is the scheduled-content-rendering SDK — @bildit-platform/nextjs, whose BilditProvider takes banners={...}. If you come across a BilditProvider client={...} elsewhere in BILDIT's docs, that's a separate (e-commerce) product that happens to share the component name — not what you want here.

Next steps​