Next.js Integration Guide

This guide provides resources and information for integrating Sveltia CMS with Next.js, a popular React framework for building server-side rendered and static websites.

Examples

See real-world examples of Next.js integrations in our Showcase. Most of the listed sites include links to their source code, so you can explore how they implemented Sveltia CMS with Next.js.

Setup

Adding the Admin Page

Next.js serves static files from the public folder. Create public/admin/index.html and public/admin/config.yml as described in the Getting Started guide.

Serving the Admin Page

Unlike most static site generators, Next.js doesn’t serve index.html for a folder path. /admin/ is redirected to /admin, which returns a 404 Not Found error, so the CMS is only available at /admin/index.html out of the box. To make /admin work, add a rewrite to next.config.ts:

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  async rewrites() {
    return [{ source: '/admin', destination: '/admin/index.html' }];
  },
};

export default nextConfig;

Rewrites are not supported for a static export with output: 'export'. In that case, the public folder is copied to the out folder as is, and most static hosting services serve admin/index.html at /admin/ without additional configuration.

Linking to the Admin Page

The admin page is not part of your Next.js app, so link to it with a regular <a> element instead of the <Link> component, which would try to render it as a client-side route:

<a href="/admin/index.html">Edit content</a>

Configuration

Next.js doesn’t have a built-in content folder, so you can store Markdown files anywhere outside the app folder. The following example stores blog posts in content/posts and images in public/images:

media_folder: public/images
public_folder: /images
collections:
  - name: posts
    label: Blog Posts
    folder: content/posts
    create: true
    fields:
      - { name: title, label: Title }
      - { name: date, label: Date, widget: datetime }
      - { name: description, label: Description, required: false }
      - { name: image, label: Cover Image, widget: image, required: false }
      - { name: body, label: Body, widget: markdown }

The media_folder must be inside public so the images are served by Next.js, while the public_folder is the URL path written to the content. See Internal Media Storage for more options.

Loading Content

Read the Markdown files in a Server Component with Node.js’s fs module, then parse the front matter with a library like gray-matter and convert the body to HTML with a Markdown processor like remark or marked. Use generateStaticParams to generate a page for each post at build time. If you prefer MDX, see the Next.js MDX guide for options.

Since content files are bundled with your site, the site must be rebuilt to reflect content changes made in the CMS. Most hosting services, including Vercel and Netlify, rebuild the site automatically when a commit is pushed to the repository.