Next.js

Setting up a Next.js site

A Next.js site whose posts or pages are Markdown files in the repository needs a short content map in orbit.config.yaml, at the root of the site, next to next.config.js. Orbit then edits those files through a form, and a post an editor adds is built by your route like any other.

The quickest start is the Next.js blog in Orbit Extras — Next’s own blog-starter example, already set up.

The content map

For a site laid out like Next’s blog example — posts in _posts/*.md, read with gray-matter and rendered by src/app/posts/[slug]/page.tsx:

# orbit.config.yaml
assetsDir: public/assets/blog

sections:
  posts:
    files: _posts/*.md
    template: src/app/posts/[slug]/page.tsx

That’s all it needs:

  • files — the folder your code reads posts from, and their extension.
  • template — the route that builds a page for each one. Naming it lets editors add posts. Check that the route really does build every file in the folder (with generateStaticParams, or by reading the folder at request time).
  • New posts are named after their title (_posts/my-new-post.md), which the example turns into the page’s address. If your code builds the address another way — from a slug field, say — set the field when you add a post.

With no fields, Orbit works the form out from your posts: in the example, a cover image and an author group with a picture come out as image fields. List them, or point at a JSON Schema, for required fields, dropdowns or date pickers. Dates are saved exactly as they’re written.

Images

Next serves public/ from the site root, so with assetsDir inside public, Orbit writes an image as /assets/blog/photo.jpg — the same as the example’s own posts.

MDX

If the site renders MDX (with @next/mdx or next-mdx-remote), sections whose files include .mdx take MDX pages, and editors can insert the components you declare in orbit.config.yaml. The portfolio in Orbit Extras is an MDX site (next-mdx-remote).

Read frontmatter with a YAML parser (gray-matter), not by splitting lines on : — Orbit writes any valid YAML (quoted text, lists, groups), and a home-made parser can break on it. Vercel’s portfolio starter did; the Extras copy is fixed.

What stays in code

Words written in your components — a home page heading, a footer — aren’t content files, so Orbit can’t edit them. Move them into a Markdown or JSON file your code reads, and add it to the map or to data:.

Check it

Open the site in Orbit and go to Site settings ▸ What Orbit edits: each section should list its pages and say new pages built by your route.