Docs

Guides

Next.js

Install

bash
pnpm add @arovi/pagekit-next

Setup

Add to .env.local:

env
PAGEKIT_API_KEY=pk_live_...
PAGEKIT_API_URL=https://api.pagekit.app/v1  # optional

App Router (recommended)

typescript
// app/blog/page.tsx
import { getPosts } from "@arovi/pagekit-next";

export default async function BlogPage() {
  const { data: posts } = await getPosts({ status: "published" });

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <a href={`/blog/${post.slug}`}>{post.title}</a>
        </li>
      ))}
    </ul>
  );
}

Dynamic Route

typescript
// app/blog/[slug]/page.tsx
import { getPost } from "@arovi/pagekit-next";

export default async function PostPage({
  params,
}: {
  params: { slug: string };
}) {
  const post = await getPost({ slug: params.slug });
  return <article dangerouslySetInnerHTML={{ __html: post.content }} />;
}

export async function generateStaticParams() {
  const { data: posts } = await getPosts({ status: "published" });
  return posts.map((post) => ({ slug: post.slug }));
}

SEO Metadata

typescript
import type { Metadata } from "next";
import { getPost } from "@arovi/pagekit-next";

export async function generateMetadata({
  params,
}: {
  params: { slug: string };
}): Promise<Metadata> {
  const post = await getPost({ slug: params.slug });
  return { title: post.title, description: post.excerpt };
}

ISR + webhook revalidation

typescript
// app/api/revalidate/route.ts
import { revalidatePath } from "next/cache";

export async function POST(request: Request) {
  const payload = await request.json();
  if (payload.event === "post.published") {
    revalidatePath(`/blog/${payload.data.slug}`);
    revalidatePath("/blog");
  }
  return Response.json({ revalidated: true });
}

Pages Router

typescript
import { Pagekit } from "@arovi/pagekit-core";

export async function getStaticProps() {
  const blog = new Pagekit({ apiKey: process.env.PAGEKIT_API_KEY! });
  const posts = await blog.posts.list({ status: "published" });

  return { props: { posts: posts.data }, revalidate: 60 };
}

Custom client

typescript
import { createPageKit, getPosts } from "@arovi/pagekit-next";

const pagekit = createPageKit({
  apiKey: "pk_live_...",
  baseUrl: "https://api.pagekit.app/v1",
});

const posts = await getPosts({ status: "published" }, pagekit);