Next.js edition

Some themes are also sold as a Next.js edition: the same design, built as a Next.js 16 project with React 19 and TypeScript on the App Router, with Tailwind CSS 4 wherever the Astro edition uses it. Every page, section, interaction and animation matches the theme’s live preview.

The Next.js edition is available for Vertex, Haven, Wayline, Moxie, Daymark and Fieldwork. It is a separate download from the Astro edition, and it is included in the All-Access Pass. The full list is on the Next.js templates page.

What is in the project

src/
  app/
    (default)/        the pages in your main language
    _[locale]/        the same pages for other languages (off until you add one; not in Haven)
  views/              the content of each page
  components/         sections, header, footer
  components/client/  the interactive parts: menus, dialogs, tabs, sliders, forms
  config/site.ts      the copy, links, prices and settings
  content/            Markdown collections, in themes with a blog or case studies
  lib/                content reader, metadata, helpers
  styles/             the theme's CSS
public/               images, fonts, favicon
AGENTS.md, CLAUDE.md  instructions for coding assistants
README.md             file map, editing notes and deploy steps for this theme
netlify.toml, vercel.json, .github/workflows/deploy.yml

• Route files are a few lines each. src/app/(default)/pricing/page.tsx only picks the language and renders src/views/PricingPage.tsx, which holds the page itself.
• Pages are React Server Components. Everything that runs in the browser lives in src/components/client/, marked with "use client".
• The output is static. npm run build writes plain HTML, CSS and JavaScript to out/. There is no Node server to keep running.

Run it

You need Node.js 22.12 or newer.

npm install
npm run dev        # http://localhost:3000
npm run build      # static site in out/
npm run preview    # serves out/ locally
npm run lint
npm run typecheck

Edit the content

The copy, navigation, links, prices and settings live in one file, so you can rebrand the site without opening a component:

Theme	Content file
Vertex, Haven, Wayline, Daymark, Fieldwork	src/config/site.ts
Moxie	src/i18n/locales/en.ts (read through src/config/site.ts)

Vertex, Daymark and Moxie keep their blog posts, release notes and case studies as Markdown files: Vertex and Daymark in src/content/blog/ and src/content/changelog/, Moxie in src/content/work/, src/content/services/ and src/content/journal/. Wayline and Fieldwork keep their articles in src/config/site.ts, next to the rest of the copy. In a Markdown collection the file name is the URL, so src/content/blog/my-post.md becomes /blog/my-post/. The frontmatter of every file is checked against the schema in src/content.config.ts. If a field is missing or has the wrong type, npm run build stops and names the file and the field.

Images are plain <img> tags pointing at files in public/. A static export has no image server, so next/image would not resize anything. Upload images at the size they are shown.

Add a language

Vertex, Wayline, Moxie, Daymark and Fieldwork are translation-ready; Haven is a single-language store. The default language has no prefix (/pricing/) and every other language gets its code (/fr/pricing/).

1. Create a file for the language in src/i18n/locales/, such as fr.ts, and translate what you need. Vertex, Wayline, Daymark and Fieldwork include a template.ts to copy, and Moxie’s README shows an example. Anything you leave out stays in the default language.
2. Register it in src/i18n/config.ts.
3. Rename the folder src/app/_[locale] to src/app/[locale]. While the site has one language the underscore keeps Next.js from building that folder. If the folder and your languages disagree, npm run build stops and tells you which one to change.

Each page then gets a twin under the language code, with the right <html lang>, alternate links for search engines, and internal links that keep the prefix.

Deploy

Run npm run build and publish the out/ folder.

• Vercel: import the repository at vercel.com/new. Vercel detects Next.js and needs no settings.
• Netlify: import the repository. netlify.toml already sets the build command, the out folder and Node 22.
• Cloudflare Pages: pick the framework preset “Next.js (Static HTML Export)”, build command npm run build, output directory out.
• GitHub Pages: .github/workflows/deploy.yml builds and publishes on every push to main. Set Pages > Source to “GitHub Actions” in the repository settings. A project site lives under /<repo>/, so the workflow builds with BASE_PATH=/<repo>; delete that line for a custom domain.
• Any other static host: upload the contents of out/, with 404.html as the not-found page.

Before you launch, set your domain where the theme’s README says (the site URL in the content file, or an environment variable in Haven and Wayline), so canonical links, social previews and the sitemap point at it.

How it differs from the Astro edition

• The design is the same. Each Next.js edition was checked page by page and state by state against its Astro edition, at phone, tablet and desktop widths.
• It ships React. Interactive parts run as React components, so pages load more JavaScript than the Astro edition does. Content still arrives as static HTML.
• It is a static export. API routes, middleware and server actions need a Node server, and the export has none. If you add them, deploy the project as a regular Next.js app on a host that runs Node, such as Vercel.
• The visual builder works with the Astro edition only.

When to pick a different edition

• Pick the Astro edition if you work in Astro, or want the lightest pages.
• Pick the EmDash CMS edition if a client needs to edit the site themselves, with an admin panel and click-to-edit on the live pages.
• Pick the HTML edition if you want to open a file, change the words, and upload the folder.
• Stay on the Next.js edition if your project, team or client already builds in React and Next.js.