Just write Markdown. Add React components whenever you want. I'm lazy, so I made this extremely simple.

- Render Markdown files as dynamic pages

- Add React components anywhere in your Markdown

- The folder structure becomes the URL path

- Global styles using Tailwind CSS and DaisyUI

https://github.com/dtedesco1/nextjs-markdown-boilerplate

  • spacesanjeet 3 days ago |
    I will try this out. I am on a hunt for a way to render markdown files into html code in a way that supports the existing structure of the webpage. For example, if I have a static webpage ready from scratch using HTML and CSS, would I be then able to post blogs using markdown to html in just a corner of the site?
    • lioeters 3 days ago |
      Next.js is an all-encompassing framework, so your existing static site would need to be placed in its `public` directory. Even then, the React-based frontend will take dominance.

      For your use case I'd recommend a command-line tool that converts Markdown files from a given folder and outputs it to a corner of your existing site. There are implementations in various languages, so you can choose according to preference.

    • dtedesco1 2 days ago |
      Given you have an existing website, it might be easier for you to add Markdown support to your site through a static site generator or server-side conversion step.

      Or you can even use a Markdown-to-HTML tool (I believe pandoc has this feature) to convert the pages yourself before posting. That's a bit more manual but wouldn't require changing your current structure.

      Anyway, if you end up using boilerplate, let me know what you think!

  • fulldecent2 3 days ago |
    Thanks for sharing. Can you say why you start with Next?

    There are other tools that /just/ do Markdown builds like parceljs.org But with your approach you can actually be used to do more than that.

    • dtedesco1 2 days ago |
      Three main reasons, two functional and one practical:

      1. Built-in MDX support means you can seamlessly mix Markdown and React components. (I previously had some trouble with the @mdx-js/react library and was in the market for more native solutions.)

      2. Next.js makes it pretty easy to do modern web stuff, like client/server components and Tailwind/DaisyUI styling.

      3. With Vercel spending so much getting YouTubers to create general Next.js tutorials, I found it very easy to get this set up.

      If you're dealing with purely static Markdown content, I would recommend something simpler.

      • leerob 2 days ago |
        (I work at Vercel) We spend $0 on YouTube, just FYI as I sometimes see this sentiment.