Render Content from Markdown - Next.js Markdown Boilerplate

The Next.js Markdown Boilerplate allows you to render content from Markdown files within a Next.js-powered application. It provides a quick way to set up dynamic pages from Markdown, integrate React components, and utilize a structured folder system for routing.

This boilerplate is helpful for blogs, documentation sites, or any project where content is primarily written in Markdown. It allows you to focus on content creation, while the application manages rendering, routing, and styling.

GitHub Repo

Live Demo

Features

📄 Dynamic Pages: Render Markdown files as dynamic pages, updating automatically with content changes.

🗺️ Folder Routing: The folder structure within the content directory mirrors the URL path, simplifying navigation.

⚛️ React Components: Insert React components directly into your Markdown content for enhanced interactivity.

💅 Global Styling: Use Tailwind CSS and DaisyUI for consistent styling throughout the site.

Use Cases

Blog Platform: Create a blog where each post is written in Markdown. The dynamic routing ensures each Markdown file has a unique URL, and React components allow for additional features, like social sharing or author bios.
Documentation Site: Develop documentation by using Markdown for text and code snippets. The folder structure makes organizing documentation sections easy, and custom React components can provide interactive examples.
Personal Website: Build a simple portfolio site where the main content is managed in Markdown. This allows for quick content updates and can integrate custom components for more advanced functionalities.

Installation

Make sure you first have Node.js 18+ and npm 9+ are installed.
Download or clone the repository.
Run npm install to install all dependencies.
Start the development server with npm run dev.

Usage

Creating Pages: Write Markdown content in .mdx files within the app/content directory. The file name becomes the URL path.

# My Page
This is my page.

Routing: Add new pages by creating .mdx files in the app/content directory. The file structure determines the URL path.

app/content/index.mdx → /
app/content/a-beautiful-page.mdx → /a-beautiful-page
app/content/more-content/another-page.mdx → /more-content/another-page

React Components: Add custom React components to the components directory. Import and use them in your MDX files.

import MyComponent from '../components/my-component';
**Hey**, here's a component:
<MyComponent />
*And here's some more markdown content.*

FAQs

Q: Can I use custom React components in Markdown?
A: Yes, you can import and use React components directly within your Markdown files.

Q: How does routing work in this boilerplate?
A: The folder structure in app/content automatically determines URL paths. For example, app/content/my-page.mdx becomes /my-page.

Q: Is this suitable for large-scale projects?
A: While excellent for small to medium projects, very complex sites might require additional customization.

Q: Do I need to know TypeScript?
A: Basic TypeScript knowledge is helpful but not mandatory. The boilerplate provides a straightforward setup.

Q: Can I style my Markdown content?
A: Absolutely. The boilerplate includes Tailwind CSS and DaisyUI for comprehensive styling options.