Alinea CMS Quickstart: Add Content to Next.js Fast

import {withAlinea} from 'alinea/next'
import type {NextConfig} from 'next'

const nextConfig: NextConfig = {
  // your existing Next.js options
}

export default withAlinea(nextConfig)

import {Config, Field} from 'alinea'
import {createCMS} from 'alinea/next'

// Define a Blog Post document type
const BlogPost = Config.document('Blog post', {
  fields: {
    title: Field.text('Title', {
      required: true
    }),
    body: Field.richText('Body text')
  }
})

// Define a Blog container that holds Blog Post entries
const Blog = Config.document('Blog', {
  contains: [BlogPost]
})

// Export types so they can be imported alongside the cms instance
export {BlogPost, Blog}

// Create and export the CMS instance
export const cms = createCMS({
  // URL where the API route handler is mounted (see next step)
  handlerUrl: '/api/cms',

  // All content types referenced in workspaces
  schema: {BlogPost, Blog},

  workspaces: {
    main: Config.workspace('Main', {
      // Directory where content files are stored
      source: 'content',
      roots: {
        blog: Config.root('Blog', {
          contains: [Blog]
        }),
        // Built-in media root for image and file uploads
        media: Config.media()
      }
    })
  }
})

import {cms} from '@/cms'
import {createHandler} from 'alinea/next'

const handler = createHandler(cms)

export {handler as GET, handler as POST}

import {cms, BlogPost} from '@/cms'

export default async function BlogPage() {
  // Fetch all published blog posts, selecting only the fields we need
  const posts = await cms.find({
    type: BlogPost,
    select: {
      title: BlogPost.title,
      path: BlogPost.path
    }
  })

  return (
    <ul>
      {posts.map(post => (
        <li key={post.path}>
          <a href={`/blog/${post.path}`}>{post.title}</a>
        </li>
      ))}
    </ul>
  )
}

import {cms, BlogPost} from '@/cms'

interface Props {
  params: {slug: string}
}

export default async function PostPage({params}: Props) {
  // Fetch a single entry by its path — first() returns null if not found
  const post = await cms.first({
    type: BlogPost,
    filter: {path: {is: params.slug}},
    select: {
      title: BlogPost.title,
      body: BlogPost.body
    }
  })

  if (!post) return <p>Not found</p>

  return (
    <article>
      <h1>{post.title}</h1>
      {/* Render rich text body */}
      <div>{post.body}</div>
    </article>
  )
}