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
public
folder so that we canfetch()
them just use their paths. For example,public/sample.md
can 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-loader
allows Next.js to read the markdown file.
- Using
react-markdown
to render the markdown file.
- Bonus: using
react-syntax-highlighter
to 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
.