Next.js

Dhub works with any Next.js project that stores content as Markdown or MDX files in a GitHub repository. Whether you use the App Router or Pages Router, content-collections or next-mdx-remote, Dhub edits your files visually and syncs changes back to GitHub.

Getting started

1. Import your Next.js repository

   Connect your GitHub repo in Dhub. Your Markdown and MDX files appear in the sidebar file tree.

2. Edit content visually

   Open any content file. Dhub parses the Markdown and renders it in a WYSIWYG editor.

3. Push changes to GitHub

   Push directly or create a pull request. Your content files update in the repository, and your Next.js build picks up the changes.

How it works with Next.js

Dhub does not run your Next.js application or interact with its build process. It edits the Markdown and MDX source files in your repository. Your existing content pipeline—whether that's content-collections, @next/mdx, next-mdx-remote, contentlayer, or raw file reads—works the same as before.

This means Dhub is compatible with any Next.js content setup:

• App Router with MDX files in a content/ directory
• Pages Router with Markdown files processed at build time
• Blog and documentation sections using any MDX library
• Static generation via generateStaticParams or getStaticPaths

What Dhub supports

• Frontmatter editing — title, description, date, and custom fields through a form UI
• Tables — visual table editor, no Markdown pipe syntax
• Images — drag and drop uploads, saved to your project with the correct relative path
• Code blocks — syntax-highlighted blocks with language selection
• MDX components — custom components render as editable MDX blocks

Custom components

If your Next.js project uses custom MDX components, Dhub displays them as embedded code blocks that you can edit inline. Standard Markdown content around them is still editable visually.