Next.js

This guide covers using Vard with the Next.js App Router. Pages Router is not currently supported.

Setup

1. Install


npm install @vard-app/sdk

2. Create your client

lib/vard.ts


import { createVardNext } from "@vard-app/sdk/next";
 
export const vard = createVardNext({
  apiKey: process.env.VARD_API_KEY,
  revalidate: 60,
});

3. Add your API key

.env.local


VARD_API_KEY=vard_live_xxxxxxxxxxxx

Usage in Server Components

vard.define() works directly in async Server Components:

app/page.tsx


import { vard } from "@/lib/vard";
import { v } from "@vard-app/sdk";
 
export default async function Page() {
  const content = vard.define({
    hero: {
      title: v.string("Welcome"),
      subtitle: v.string(""),
      cta: v.string("Get started"),
    },
  });
 
  return (
    <section>
      <h1>{content.hero.title}</h1>
      <p>{content.hero.subtitle}</p>
      <a href="/sign-up">{content.hero.cta}</a>
    </section>
  );
}

Usage in layouts

You can call vard.define() in a layout and pass content down to child pages via props or a React context:

app/layout.tsx


import { vard } from "@/lib/vard";
import { v } from "@vard-app/sdk";
 
export default async function RootLayout({ children }) {
  const content = vard.define({
    nav: {
      logo: v.image(),
      ctaLabel: v.string("Get started"),
    },
  });
 
  return (
    <html>
      <body>
        <nav>
          <img src={content.nav.logo} alt="Logo" />
          <a href="/sign-up">{content.nav.ctaLabel}</a>
        </nav>
        {children}
      </body>
    </html>
  );
}

Per-page schema fragments

For large sites, co-locate each page’s schema with the page file. This pattern uses vard.extend().get() instead of vard.define() — extend merges an external schema fragment and get returns the values asynchronously. Both are valid; use define for quick inline schemas, extend + get when you want to co-locate the schema in a separate file.

app/about/schema.ts


import { v } from "@vard-app/sdk";
 
export const aboutSchema = v.schema({
  about: {
    heading: v.string("About us"),
    body: v.richtext(),
    photo: v.image(),
  },
});

app/about/page.tsx


import { vard } from "@/lib/vard";
import { aboutSchema } from "./schema";
 
export default async function AboutPage() {
  const { about } = await vard.extend(aboutSchema).get();
 
  return (
    <article>
      <h1>{about.heading}</h1>
      <div dangerouslySetInnerHTML={{ __html: about.body }} />
    </article>
  );
}

Caching strategies

Static (default)

Content is fetched at build time and cached indefinitely. Revalidates on redeploy.


createVardNext({ /* no cache option */ })

ISR — revalidate on interval


createVardNext({ revalidate: 60 }) // recheck every 60 seconds

Dynamic — fetch on every request

Use Next.js’s dynamic export to opt a page out of caching entirely:

app/page.tsx


export const dynamic = "force-dynamic";

On-demand revalidation

Set up a revalidation webhook in your Vard dashboard. When a client publishes content, Vard calls your webhook and Next.js revalidates the cache immediately. See Cache Revalidation.

Environment variables

Variable	Required	Description
`VARD_API_KEY`	Yes	Your workspace API key

Make sure VARD_API_KEY is available at build time (not just runtime) if you use static export.