I moved my Hugo website to Next.js, but all the emojis I used with markdown syntax (e.g., ā ļø
or š”
) were displayed as text instead of actual emoji icons. I needed Next.js to recognize the emoji text like š”
in the MDX content and render it as an emoji icon.
Installed the Required Plugin
I searched online and found that I needed the remark-emoji
plugin to handle emoji rendering in MDX files. I installed it by running:
Updated Next.js Config
In my velite.config.ts
(since Iām using Velite for MDX content), I added the remark-emoji
plugin to the remarkPlugins
array, which is used to configure MDX processing:
Tested the Emoji Rendering
After making the changes, I restarted the development server, and the emojis in my MDX files were rendered correctly as icons instead of text.