Markdown Pages for Next.js with 0 effort, dynamic routes and your layout design
Made for people
/about
, /terms
, /blog
, /docs
or /whatever/other/route
from markdown files with 0 effortUsed by
In your nextjs project, run
npm install next-markdown
Add the following [...nextmd].jsx
file in the pages/
folder
import NextMarkdown from "next-markdown";
const nextmd = NextMarkdown({ pathToContent: "./pages-markdown" });
export const getStaticPaths = nextmd.getStaticPaths;
export const getStaticProps = nextmd.getStaticProps;
export default function MarkdownPage({ frontMatter, html, subPaths }) {
return <div dangerouslySetInnerHTML={{ __html: html }} /> 👈 design your own layout 🧑🎨
}
At the root of your project create the folder pages-markdown/
, add the following hello.md
file
# Hello World
This is **awesome**
That's it. Open http://localhost:3000/hello
page and see the magic.
Enjoy.
next-markdown
generates routes based on the path of your markdown files.
Just like nextjs does with pages/
.
For example, the following project structure will result into creating the following pages:
pages/
├ index.jsx ......... ➡️ /
├ caveat.jsx ......... ➡️ /caveat
├ [...nextmd].jsx
pages-markdown/
├ about.md ......... ➡️ /about
├ caveat.md ......... ➡️ ❌ because `pages/caveat.jsx` is already defined cf. https://nextjs.org/docs/routing/dynamic-routes#caveats
├ hello/
├ index.md ......... ➡️ /hello
├ world.md ......... ➡️ /hello/world
├ jurassic/
├ park.md ......... ➡️ /hello/jurassic/park
├ blog/
├ index.md ......... ➡️ /blog
├ hello.md ......... ➡️ /blog/hello
├ world.md ......... ➡️ /blog/world
├ docs/
├ index.md ......... ➡️ /docs
├ get-started.md ... ➡️ /docs/get-started
├ features.md ...... ➡️ /docs/features
├ contribute.md .... ➡️ /docs/contribute
See the example.
next-markdown
is blog-aware:
_hello.md
will redirect to 404)next-markdown
lets you build a documentation:
For each page you'll receive the Table of Contents based on headings in your markdown.
Use next-markdown
to browse and parse your markdown files so you can build your personal blog in seconds.
There is nothing to setup on your side, MDX support comes for free.
You can mix .md
and .mdx
files.
next-markdown
comes with some default remark and rehype plugins to ensure its basic functionality.
In some cases you might want to specify additional plugins to enrich your page with extra features.
You can pass custom remark and rehype plugins via the next-markdown
initializer config:
import NextMarkdown from "next-markdown";
const nextmd = NextMarkdown({
...,
remarkPlugins: [],
rehypePlugins: [],
});
For many good reasons you may want to host your content in another GIT repo.
More examples here ↗️.
Feel free to browse them to see next-markdown
in action.
Thanks for your interest in next-markdown! You are very welcome to contribute. If you are proposing a new feature, please open an issue to make sure it is inline with the project goals.
git clone https://github.com/your-name/next-markdown.git
cd next-markdown
npm install
npm run dev
examples/
folder, install dependencies and run devcd examples/blog # or dynamic-routes, or remote-content
npm install
npm run dev
src/
, save: http://localhost:3000 gets updated automatically (aka hot-reloading)src/__tests__/
. Run tests with npm test
command.Before you make your pull request, make sure to run:
npm test
to make sure nothing is brokennpm run format
to make sure the code looks consistentnpm run lint
to make sure there is no problem in the code