{"id":14982113,"url":"https://github.com/frouo/next-markdown","last_synced_at":"2025-08-19T21:31:22.361Z","repository":{"id":41831001,"uuid":"463882878","full_name":"frouo/next-markdown","owner":"frouo","description":"Markdown Pages for Next.js with 0 effort, dynamic routes and your layout design","archived":false,"fork":false,"pushed_at":"2022-09-13T09:20:26.000Z","size":1883,"stargazers_count":121,"open_issues_count":1,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-07-30T12:35:39.439Z","etag":null,"topics":["blog-aware","docs-generator","getstaticpaths","getstaticprops","markdown","mdx","nextjs","plug-and-play"],"latest_commit_sha":null,"homepage":"https://twitter.com/nextmarkdown","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/frouo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-02-26T14:56:50.000Z","updated_at":"2025-02-19T19:51:39.000Z","dependencies_parsed_at":"2022-08-11T18:50:32.331Z","dependency_job_id":null,"html_url":"https://github.com/frouo/next-markdown","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"purl":"pkg:github/frouo/next-markdown","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frouo%2Fnext-markdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frouo%2Fnext-markdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frouo%2Fnext-markdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frouo%2Fnext-markdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/frouo","download_url":"https://codeload.github.com/frouo/next-markdown/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frouo%2Fnext-markdown/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269498343,"owners_count":24427120,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-08T02:00:09.200Z","response_time":72,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blog-aware","docs-generator","getstaticpaths","getstaticprops","markdown","mdx","nextjs","plug-and-play"],"created_at":"2024-09-24T14:04:49.079Z","updated_at":"2025-08-19T21:31:21.870Z","avatar_url":"https://github.com/frouo.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n   \u003cbr/\u003e\n   \u003cimg width=\"150px\" src=\"./logo.png\" /\u003e\n   \u003ch3 align=\"center\"\u003enext-markdown\u003c/h3\u003e\n   \u003cp align=\"center\"\u003eMarkdown Pages for Next.js\u003c/p\u003e\n   \u003cp align=\"center\"\u003e\n   Dynamic Routes • Blog Aware • Design Your Layout\n   \u003c/p\u003e\n   \u003cp align=\"center\" style=\"align: center;\"\u003e\n      \u003ca href=\"https://www.npmjs.com/package/next-markdown\"\u003e\n        \u003cimg alt=\"npm (tag)\" src=\"https://img.shields.io/npm/v/next-markdown/latest\"\u003e\n      \u003c/a\u003e\n      \u003ca href=\"https://www.npmtrends.com/next-markdown\"\u003e\n        \u003cimg src=\"https://img.shields.io/npm/dm/next-markdown\" alt=\"Downloads\" /\u003e\n      \u003c/a\u003e\n      \u003ca href=\"https://github.com/frouo/next-markdown/stargazers\"\u003e\n        \u003cimg src=\"https://img.shields.io/github/stars/frouo/next-markdown?style=social\" alt=\"GitHub stars\"\u003e\n      \u003c/a\u003e\n   \u003c/p\u003e\n   \u003cp align=\"center\" style=\"align: center;\"\u003e\n      \u003ca href=\"https://twitter.com/nextmarkdown\"\u003e\n        \u003cimg alt=\"Twitter Follow\" src=\"https://img.shields.io/twitter/follow/nextmarkdown?style=social\"\u003e\n      \u003c/a\u003e\n   \u003c/p\u003e\n\u003c/p\u003e\n\nMade for people\n\n- having a [nextjs](https://nextjs.org/) project\n- in ❤️ with markdown\n- who want to generate boring (but very necessary!) pages like `/about`, `/terms`, `/blog`, `/docs` or `/whatever/other/route` from markdown files with 0 effort\n\nUsed by\n\n- **lembot.com** - all pages except the home page are generated from markdown hosted in a separate public [github repo](https://github.com/frouo/lembot-public-website).\n- **[snappify.io](https://snappify.io)** (blog, docs) - a powerful design tool to create and manage beautiful images of your code.\n- **[frouo.com](https://frouo.com)** - a dev blog\n- reach us on twitter [@nextmarkdown](https://twitter.com/nextmarkdown) to add your website here (or personal: [@frouo](https://twitter.com/frouo))\n\n## Get Started ✨\n\nIn your nextjs project, run\n\n```bash\nnpm install next-markdown\n```\n\nAdd the following `[...nextmd].jsx` file in the `pages/` folder\n\n```nodejs\nimport NextMarkdown from \"next-markdown\";\n\nconst nextmd = NextMarkdown({ pathToContent: \"./pages-markdown\" });\n\nexport const getStaticPaths = nextmd.getStaticPaths;\nexport const getStaticProps = nextmd.getStaticProps;\n\nexport default function MarkdownPage({ frontMatter, html, subPaths }) {\n  return \u003cdiv dangerouslySetInnerHTML={{ __html: html }} /\u003e 👈 design your own layout 🧑‍🎨\n}\n```\n\n## Usage 👋\n\nAt the root of your project create the folder `pages-markdown/`, add the following `hello.md` file\n\n```\n# Hello World\n\nThis is **awesome**\n```\n\nThat's it. Open `http://localhost:3000/hello` page and see the magic.\n\nEnjoy.\n\n![nextmd demo](https://user-images.githubusercontent.com/2499356/157421649-6be78442-400c-43cd-81e5-27ba6da1ee7b.png)\n\n## Features 🚀\n\n### Dynamic Routes for Markdown Files\n\n`next-markdown` generates routes based on the path of your markdown files.\n\nJust like nextjs does with `pages/`.\n\nFor example, the following project structure will result into creating the following pages:\n\n```\npages/\n├ index.jsx    ......... ➡️ /\n├ caveat.jsx   ......... ➡️ /caveat\n├ [...nextmd].jsx\n\npages-markdown/\n├ about.md     ......... ➡️ /about\n├ caveat.md    ......... ➡️ ❌ because `pages/caveat.jsx` is already defined cf. https://nextjs.org/docs/routing/dynamic-routes#caveats\n├ hello/\n  ├ index.md   ......... ➡️ /hello\n  ├ world.md   ......... ➡️ /hello/world\n  ├ jurassic/\n    ├ park.md  ......... ➡️ /hello/jurassic/park\n├ blog/\n  ├ index.md   ......... ➡️ /blog\n  ├ hello.md   ......... ➡️ /blog/hello\n  ├ world.md   ......... ➡️ /blog/world\n├ docs/\n  ├ index.md   ......... ➡️ /docs\n  ├ get-started.md   ... ➡️ /docs/get-started\n  ├ features.md   ...... ➡️ /docs/features\n  ├ contribute.md   .... ➡️ /docs/contribute\n```\n\nSee the [example](./examples/dynamic-routes/).\n\n### Blog Aware ([example](./examples/blog/))\n\n`next-markdown` is blog-aware:\n\n- list all the posts\n- write draft or unpublish a post by simply prefixing the file name with an underscore (eg. `_hello.md` will redirect to 404)\n- reading time\n- etc.\n\n### Documentation ([example](./examples/documentation/))\n\n`next-markdown` lets you build a documentation:\n\n- sidebar\n- previous / next\n- organize your docs by folders\n- etc.\n\n### Table of Contents ([example](./examples/blog/))\n\nFor each page you'll receive the Table of Contents based on headings in your markdown.\n\n### Personal Blog ([example](./examples/personal-blog/))\n\nUse `next-markdown` to browse and parse your markdown files so you can build your personal blog in seconds.\n\n### MDX Support ([example](./examples/mdx/))\n\nThere is nothing to setup on your side, MDX support comes for free.\n\nYou can mix `.md` and `.mdx` files.\n\n### Configure custom remark and rehype plugins ([example](./examples/custom-remark-rehype-plugins/))\n\n`next-markdown` comes with some default remark and rehype plugins to ensure its basic functionality.\n\nIn some cases you might want to specify additional plugins to enrich your page with extra features.\n\nYou can pass custom remark and rehype plugins via the `next-markdown` initializer config:\n\n```nodejs\nimport NextMarkdown from \"next-markdown\";\n\nconst nextmd = NextMarkdown({\n  ...,\n  remarkPlugins: [],\n  rehypePlugins: [],\n});\n```\n\n### Host Your .md Files in Another Repo ([example](./examples/remote-content/))\n\nFor many good reasons you may want to host your content in another GIT repo.\n\n## Examples 🖥\n\nMore examples [here ↗️](./examples).\n\nFeel free to browse them to see `next-markdown` in action.\n\n## Contributing 🏗️\n\n\u003e Thanks for your interest in next-markdown! You are very welcome to contribute. If you are proposing a new feature, please [open an issue](https://github.com/frouo/next-markdown/issues/new) to make sure it is inline with the project goals.\n\n#### 1. Fork this repository to your own GitHub account and clone it to your local device\n\n```bash\ngit clone https://github.com/your-name/next-markdown.git\ncd next-markdown\n```\n\n#### 2. Install the dependencies and run dev script\n\n```bash\nnpm install\nnpm run dev\n```\n\n![terminal 1](https://user-images.githubusercontent.com/2499356/160489894-5eb85a94-0a03-4c73-bfef-eb68c030f865.jpg)\n\n#### 3. Open **another terminal**, pick an example in the `examples/` folder, install dependencies and run dev\n\n```bash\ncd examples/blog # or dynamic-routes, or remote-content\nnpm install\nnpm run dev\n```\n\n![terminal 2](https://user-images.githubusercontent.com/2499356/160492988-1dc83947-1a74-46ba-aee8-4f66ecc70ed2.jpg)\n\n#### 4. Start coding\n\n- edit files in `src/`, save: http://localhost:3000 gets updated automatically (aka **hot-reloading**)\n- add tests in `src/__tests__/`. Run tests with `npm test` command.\n\n![browser](https://user-images.githubusercontent.com/2499356/160491479-39b47264-5aec-4185-b472-f209d8a45181.jpg)\n\n#### 5. Submitting a PR\n\nBefore you make your pull request, make sure to run:\n\n- `npm test` to make sure nothing is broken\n- `npm run format` to make sure the code looks consistent\n- `npm run lint` to make sure there is no problem in the code\n\n## Contributors 🙏\n\n\u003ca href=\"https://github.com/frouo/next-markdown/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=frouo/next-markdown\" /\u003e\n\u003c/a\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrouo%2Fnext-markdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffrouo%2Fnext-markdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrouo%2Fnext-markdown/lists"}