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);