For the official way, read this documentation.
In my case, I don’t like this official one because it’s too heavy where I just need to display some markdown files on the site.
Weakness of the method given in this note is the content of markdown file isn’t rendered automatically if the file has changes in the dev mode.
As an example, you can check
devboost.app
- Markdown files are stored in
publicfolder so that we canfetch()them just use their paths. For example,public/sample.mdcan be access via/sample.md.
- Everything is put inside a
"use client"component.
- If you want to display a content in a server component, put this client component in it.
- Using
raw-loaderallows Next.js to read the markdown file.
- Using
react-markdownto render the markdown file.
- Bonus: using
react-syntax-highlighterto display codes with syntax highlights.
Want: click the button → show a popup which contains the rendered markdown.
Purpose: We want to display a site in
src/app/site-name/page.tsx. Its content is taken from public/site-name.md.