Next.js

The @astracms/next package provides optimized utilities for using AstraCMS with Next.js, including server components support and automatic caching.

Installation

npm install @astracms/next

pnpm add @astracms/next

yarn add @astracms/next

bun add @astracms/next

Environment Variables

Create a .env.local file in your Next.js project:

.env.local

ASTRACMS_API_KEY=your_api_key_here

Configuration

Create a client instance in your app:

lib/astracms.ts

import { createAstraCMSClient } from '@astracms/next'

export const astracms = createAstraCMSClient({
  apiKey: process.env.ASTRACMS_API_KEY!,
})

Server Components

Use the client directly in server components:

app/blog/page.tsx

import { astracms } from '@/lib/astracms'

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

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

With Caching

Enable Next.js caching for optimal performance:

const posts = await astracms.getPosts({
  next: { revalidate: 60 }, // Revalidate every 60 seconds
})

Static Generation

For fully static sites:

app/blog/[slug]/page.tsx

import { astracms } from '@/lib/astracms'
import { notFound } from 'next/navigation'

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

export default async function PostPage({ 
  params 
}: { 
  params: Promise<{ slug: string }> 
}) {
  const { slug } = await params
  const post = await astracms.getPost(slug)

  if (!post) {
    notFound()
  }

  return <article>{post.content}</article>
}

Filtering Posts

The getPosts function supports filtering options: