Nextjs blog with markdown and wanting to add presentation

[knandraina]

Hello everyone,

I'm starting a blog right now, and I want to publish my article slides. My blog is built with Nextjs and Tailwind for the CSS. Every time I want to write an article, I create a mdx file.
I discovered yesterday Marp. And it seems powerful and matches my needs. I struggle a little bit to implement it correctly.

I copied the markdown example from the homepage.

---
theme: gaia
_class: lead
paginate: true
backgroundColor: #fff
backgroundImage: url('https://marp.app/assets/hero-background.svg')
---

![bg left:40% 80%](https://marp.app/assets/marp.svg)

# **Marp**

Markdown Presentation Ecosystem

https://marp.app/

---

# How to write slides

Split pages by horizontal ruler (`---`). It's very simple! :satisfied:

```markdown
# Slide 1

foobar

---

# Slide 2

foobar

Then in my ArticleLayout.jsx, I imported

import { Marp } from '@marp-team/marp-core'

// Convert Markdown slide deck into HTML and CSS
const marp = new Marp()
const { html, css } = marp.render({markdown here})

And here is the results:

So what have I done wrong? Can you help me please?

Cheers,

[yhatt]

The output of Marp Core is framework-agnostic. When using Marp Core in Next.js, typically you have to set raw HTML by React's dangerouslySetInnerHTML.
https://react.dev/reference/react-dom/components/common#dangerously-setting-the-inner-html

See also <Marp> component designed for https://marp.app/ made by Next.js. It has many tricks, for reducing the client bundle size, making CSS scope by Shadow DOM, executing the client script for browser, and applying Web Fonts in cross-browser correctly.
https://github.com/marp-team/marp/blob/main/website/components/Marp.tsx

FYI: Marp Core has a very huge bundle size due to math libraries (MathJax, KaTeX). In the latest Next.js, I recommend to use Marp Core only in React Server Components, and prevent to bundle the Marp component into the client script.
https://nextjs.org/docs/getting-started/react-essentials#server-components