@vard-app/sdk
v0.1.8
Published
Vard SDK — modern, schema-first content layer for Next.js
Readme
Vard SDK
The modern, schema-first content layer for Next.js.
Installation
npm install @vard/sdkQuick Start
1. Define your client
Setup a shared client instance in your project (e.g. lib/vard.ts).
import { createVard, v } from "@vard/sdk";
import { createVardNextAdapter } from "@vard/sdk/next";
export const vard = createVard({
apiKey: process.env.VARD_API_KEY,
store: createVardNextAdapter(),
schema: {
hero: {
title: v.string("Welcome to Vard"),
image: v.image("/hero.jpg"),
},
features: v.collection({
title: v.string(),
icon: v.image(),
}),
},
});2. Prefetch in Layout (App Router)
To ensure zero-layout shift, prefetch values in your root layout.
// app/layout.tsx
import { prefetchVardValues } from "@vard/sdk/next";
import { vard } from "@/lib/vard";
export default async function RootLayout({ children }) {
await prefetchVardValues(vard);
return (
<html>
<body>{children}</body>
</html>
);
}3. Use in Server Components
Retrieve your entire content structure with a single, type-safe call.
// app/page.tsx
import { vard } from "@/lib/vard";
export default async function Page() {
const { hero, features } = await vard.get();
return (
<main>
<h1>{hero.title}</h1>
<img src={hero.image} />
<ul>
{features.map((f) => (
<li key={f.title}>{f.title}</li>
))}
</ul>
</main>
);
}Schema-First Features
- Type Safety: Full TypeScript inference out of the box. No manual interfaces required.
- Auto-Sync: In
developmentmode, the SDK automatically syncs your schema to the Vard dashboard. - Hierarchical Data: Define nested objects and collections to match your UI perfectly.
- Backward Compatibility: Standard
vard.string(key, fallback)methods still work for simple use cases.
Environment Variables
| Variable | Description |
| --------------- | ------------------------------------------------ |
| VARD_API_KEY | Your workspace API Key (Required for production) |
| VARD_API_BASE | Optional custom API base (Defaults to vard.app) |