---
url: /en/docs/frameworks/next.md
description: >-
  Learn how to integrate Sveltia CMS with Next.js, including serving the admin
  page, configuring a blog collection and real-world examples.
---

# Next.js Integration Guide

This guide provides resources and information for integrating Sveltia CMS with [Next.js](https://nextjs.org/), a popular React framework for building server-side rendered and static websites.

## Examples

See real-world examples of Next.js integrations in our [Showcase](/en/showcase?framework=next). 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](https://nextjs.org/docs/app/api-reference/file-conventions/public-folder). Create `public/admin/index.html` and `public/admin/config.yml` as described in the [Getting Started](/en/docs/start#manual-installation) 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](https://nextjs.org/docs/app/api-reference/config/next-config-js/rewrites) to `next.config.ts`:

```ts [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](https://nextjs.org/docs/app/guides/static-exports) 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:

```tsx
<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`:

```yaml [public/admin/config.yml]
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](/en/docs/media/internal) for more options.

## Loading Content

Read the Markdown files in a [Server Component](https://nextjs.org/docs/app/getting-started/server-and-client-components) with Node.js’s `fs` module, then parse the front matter with a library like [gray-matter](https://github.com/jonschlinkert/gray-matter) and convert the body to HTML with a Markdown processor like [remark](https://github.com/remarkjs/remark) or [marked](https://marked.js.org/). Use [`generateStaticParams`](https://nextjs.org/docs/app/api-reference/functions/generate-static-params) to generate a page for each post at build time. If you prefer MDX, see the [Next.js MDX guide](https://nextjs.org/docs/app/guides/mdx) 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.