Next.js

# .env.local
SKAYLE_API_BASE_URL=https://api.skayle.ai
SKAYLE_ORG_ID=your_organization_id

const API_BASE = process.env.SKAYLE_API_BASE_URL || "https://api.skayle.ai";
const ORG_ID = process.env.SKAYLE_ORG_ID;

if (!ORG_ID) {
	throw new Error("Missing SKAYLE_ORG_ID env var");
}

type JsonApiResource<T = Record<string, unknown>> = {
	id: string;
	type: string;
	attributes: T;
	relationships?: Record<string, unknown>;
};

type JsonApiListResponse<T> = {
	data: Array<JsonApiResource<T>>;
	included?: Array<JsonApiResource>;
	meta?: { total?: number; page?: number; per_page?: number };
};

type JsonApiSingleResponse<T> = {
	data: JsonApiResource<T> | null;
	included?: Array<JsonApiResource>;
};

export type CmsPost = {
	title: string;
	slug: string;
	excerpt: string | null;
	content_html: string | null;
	created_at: string;
	updated_at: string;
};

async function fetchJson<T>(path: string): Promise<T> {
	const url = `${API_BASE}/v1/${ORG_ID}${path}`;
	const res = await fetch(url, {
		next: { revalidate: 300 },
		headers: { "Content-Type": "application/json" },
	});

	if (!res.ok) {
		throw new Error(`Skayle CMS request failed: ${res.status}`);
	}

	return res.json() as Promise<T>;
}

export async function getPosts() {
	const response = await fetchJson<JsonApiListResponse<CmsPost>>(
		"/articles?status=published&orderby=date&order=desc&page=1&per_page=50",
	);
	return response.data;
}

export async function getPostBySlug(slug: string) {
	const response = await fetchJson<JsonApiSingleResponse<CmsPost>>(
		`/articles/${encodeURIComponent(slug)}?include=categories,tags,authors`,
	);
	return response.data;
}

import Link from "next/link";
import { getPosts } from "@/lib/skayle-cms";

export const revalidate = 300;

export default async function BlogPage() {
	const posts = await getPosts();

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

import { notFound } from "next/navigation";
import { getPostBySlug, getPosts } from "@/lib/skayle-cms";

type PageProps = { params: Promise<{ slug: string }> };

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

export default async function BlogPostPage({ params }: PageProps) {
	const { slug } = await params;
	const post = await getPostBySlug(slug);

	if (!post) notFound();

	return (
		<article>
			<h1>{post.attributes.title}</h1>
			{post.attributes.excerpt ? <p>{post.attributes.excerpt}</p> : null}
			<div
				dangerouslySetInnerHTML={{
					__html: post.attributes.content_html || "",
				}}
			/>
		</article>
	);
}

export async function getAnswerItems() {
	const response = await fetchJson<JsonApiListResponse<CmsPost>>(
		"/collections/answers/items?status=published&orderby=date&order=desc&page=1&per_page=50",
	);
	return response.data;
}