@easy-cms/next

Next.js adapter for Easy CMS (App Router, 15 or later): route handlers for the REST API and the admin UI, and a typed getEasyCMS() for Server Components. Part of Easy CMS, the embedded, code-first headless CMS for Nuxt and Next.js.

Install

npm install @easy-cms/next @easy-cms/core @easy-cms/db-postgres

Or pnpm add, yarn add or bun add.

Usage

1. Wrap next.config.ts so the server build keeps the admin UI and database drivers:

import { withEasyCMS } from '@easy-cms/next/config'
export default withEasyCMS({ /* your Next config */ })

2. Add two route handlers (paths match routes.api and admin.path in your Easy CMS config):

// app/api/cms/[[...path]]/route.ts
import { createRouteHandlers } from '@easy-cms/next'
import config from '@/easy-cms.config'
export const { GET, HEAD, POST, PATCH, PUT, DELETE, OPTIONS } = createRouteHandlers(config)

// app/admin/[[...path]]/route.ts
import { createAdminRouteHandlers } from '@easy-cms/next'
import config from '@/easy-cms.config'
export const { GET, HEAD } = createAdminRouteHandlers(config)

3. Read content in Server Components with the typed Local API:

import { connection } from 'next/server'
import { Suspense } from 'react'
import { getEasyCMS, getEasyCMSUser } from '@easy-cms/next'
import config from '@/easy-cms.config'

export default function Page() {
  return (
    <Suspense>
      <Posts />
    </Suspense>
  )
}

async function Posts() {
  await connection() // read on each request
  const cms = await getEasyCMS(config)
  const { docs } = await cms.find('posts', { limit: 10 })
  const user = await getEasyCMSUser(config) // logged-in Easy CMS user or null
  // …
}

Pages that read from the CMS should render per request: await connection() in a component inside <Suspense>, as above (or cache on purpose with revalidation). Otherwise next build tries to query the database while prerendering. This works whether or not cacheComponents is on; new apps from create-next-app have it on, and there export const dynamic is not allowed.

createRouteHandlers(config, { trustProxy: true }) uses X-Forwarded-For for login rate limiting; enable it behind a proxy you trust (Vercel and Netlify are recognized without it). It also takes basePath and getClientIp(request).

Links

Next.js · Documentation (ภาษาไทย) · GitHub

MIT License