A complete example of using AstraCMS with Next.js App Router.
- ✅ Server Components with
@astracms/next - ✅ Static Site Generation (SSG) with
generateStaticParams - ✅ Blog listing with filtering options
- ✅ Individual post pages with cover images
- ✅ Tailwind CSS with Typography plugin
- ✅ Dark mode support
git clone https://github.com/astracms/astracms-nextjs-example.git
cd astracms-nextjs-example
pnpm installCopy the example environment file and add your API key:
cp .env.example .env.localEdit .env.local:
ASTRACMS_API_KEY=astra_pk_your_api_key_hereGet your API key from AstraCMS Dashboard → Settings → API Keys.
pnpm devOpen http://localhost:3000 to see the result.
app/
├── page.tsx # Home page
├── layout.tsx # Root layout with fonts
├── globals.css # Global styles with Tailwind
└── blog/
├── page.tsx # Blog listing page
└── [slug]/
└── page.tsx # Individual blog post page
lib/
└── astracms.ts # AstraCMS client configuration
import { astracms } from '@/lib/astracms'
// Get all posts
const posts = await astracms.getPosts()
// With filtering options
const posts = await astracms.getPosts({
categories: ['blog'],
excludeCategories: ['internal'],
excludeTags: ['draft'],
format: 'html',
limit: 10,
page: 1,
})import { astracms } from '@/lib/astracms'
const post = await astracms.getPost('my-post-slug')export async function generateStaticParams() {
const posts = await astracms.getPosts()
return posts.map((post) => ({ slug: post.slug }))
}For remote images from AstraCMS CDN, add to next.config.ts:
const nextConfig: NextConfig = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'cdn.astracms.dev',
},
],
},
}Configure the client in lib/astracms.ts:
import { createAstraCMSClient } from '@astracms/next'
export const astracms = createAstraCMSClient({
apiKey: process.env.ASTRACMS_API_KEY!,
})MIT