Next.js Guide

Fetch Wriven content from a Next.js App Router server component. No SDK — the platform fetch works directly, with full control over caching.

1. Add your token

Put a read key and your project id in .env.local (server-only — no NEXT_PUBLIC_ prefix):

bash

WRIVEN_TOKEN=wrk_live_xxx
WRIVEN_PROJECT_ID=PROJECT_ID

2. A small fetch helper

typescript

// lib/wriven.ts
const BASE = "https://api.wriven.com/v1";

export async function getEntries(type: string, params = "") {
  const res = await fetch(
    `${BASE}/projects/${process.env.WRIVEN_PROJECT_ID}/content/${type}${params}`,
    {
      headers: { Authorization: `Bearer ${process.env.WRIVEN_TOKEN}` },
      next: { revalidate: 60 }, // ISR: re-fetch at most every 60s
    }
  );
  if (!res.ok) throw new Error("Wriven fetch failed");
  const { data } = await res.json();
  return data.items;
}

3. Render in a server component

tsx

// app/blog/page.tsx
import { getEntries } from "@/lib/wriven";

export default async function BlogPage() {
  const posts = await getEntries("blog_post", "?sort=-publishedAt&limit=10");

  return (
    <main className="mx-auto max-w-3xl py-12">
      {posts.map((p) => (
        <article key={p.id} className="mb-8">
          <h2 className="text-2xl font-bold">{p.data.title}</h2>
          <p>{p.data.excerpt}</p>
        </article>
      ))}
    </main>
  );
}

// REVALIDATIONUse next: { revalidate } for time-based ISR. For instant updates on publish, wire a webhook to revalidatePath() — webhooks are on the roadmap.