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 (withgenerateStaticParams, 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 aslugfield, 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.