Next.js
SSG and build-time prerendering with the Next.js App Router for a simple Paragraph CMS blog.
This quickstart uses the Next.js App Router and walks through the core setup
for fetching and rendering Paragraph CMS content in a Next.js app, using SSG
and build-time prerendering for known /blog/[slug] routes because the slug
list can be derived from the CMS with generateStaticParams().
Want a ready-made project instead? Use the
paragraphcms/nextjs-starter,
which ships with the same integration pattern already wired into a blog.
Install the Package
Add the Paragraph CMS client and React renderer to your Next.js app:
npm install @paragraphcms/client @paragraphcms/parser-reactpnpm add @paragraphcms/client @paragraphcms/parser-reactyarn add @paragraphcms/client @paragraphcms/parser-reactbun add @paragraphcms/client @paragraphcms/parser-reactCreate a Paragraph CMS Client
Create paragraph.config.ts and initialize a shared client:
import { Client } from "@paragraphcms/client";
const apiKey = process.env.PARAGRAPH_API_KEY;
if (!apiKey) {
throw new Error("PARAGRAPH_API_KEY environment variable is not set");
}
export const client = new Client({ apiKey });Create Example Components
Create two very simple components that we will render in the next steps:
import type { PageSummaryWithSlug } from "@paragraphcms/client";
import Link from "next/link";
export function Blog({ posts }: { posts: PageSummaryWithSlug[] }) {
return (
<main>
<h1>Blog</h1>
<ul>
{posts.map((post) => (
<li key={post.id}>
<Link href={`/blog/${post.slug}`}>{post.title}</Link>
</li>
))}
</ul>
</main>
);
}import type { PageWithSlug } from "@paragraphcms/client";
import { ParagraphContent } from "@paragraphcms/parser-react";
export function Post({ page }: { page: PageWithSlug }) {
return (
<main>
<h1>{page.title}</h1>
<ParagraphContent content={page.content} />
</main>
);
}Build /blog
Build the /blog index route with client.pages.list(). Setting
requiredSlug: true narrows the result to PageSummaryWithSlug[], so
post.slug is safe to use directly.
import { Blog } from "@/components/blog/blog";
import { client } from "@/paragraph.config";
export default async function Page() {
const { data, error } = await client.pages.list({
requiredSlug: true,
});
if (error) {
throw error;
}
return <Blog posts={data} />;
}By default, client.pages.list() returns published pages only. If you want
to include unpublished pages too or limit the query to a single
collection, pass additional parameters under the same call:
client.pages.list({
requiredSlug: true,
published: false,
collection: "blog",
});Build /blog/[slug]
Build the /blog/[slug] route by generating all known slugs and resolving each page with client.page.getBySlug().
import { Post } from "@/components/blog/post";
import { client } from "@/paragraph.config";
export const dynamicParams = false;
export async function generateStaticParams() {
const { data, error } = await client.pages.list({
requiredSlug: true,
});
if (error) {
throw error;
}
return data;
}
export default async function Page({
params,
}: {
params: Promise<{ slug: string }>;
}) {
const { slug } = await params;
const { data, error } = await client.page.getBySlug(slug);
if (error) {
throw error;
}
return <Post page={data} />;
}This keeps the route aligned with the slugs stored in Paragraph CMS.
Once this is wired, the rest of the page can be standard Next.js UI around the rendered Paragraph content.