Questions tagged [mdxjs]
MDX is a flexible format that enables users to incorporate JSX directly into their markdown files.
Having trouble with this code. Initially, I had: // file 1 import Box from '@/components/Box' import Popup from '@/components/Popup' const MDXComponents = { Box, Popup } // using MDXComponents somewhere in file 1 Now, to manage the growing size of t ...
I’ve been experimenting with Github Flavored Markdown using @next/mdx, but I’m struggling to understand how to use plugins alongside the code. Here’s a breakdown of what I’ve attempted so far: (I’m following the instructions from the Next.js Doc ...
After initiating a nextjs site using a tailwind blog starter that comes with withBundleAnalyzer in my next.config.js, I am faced with the challenge of making .mdx files work directly from the pages. The documentation suggests adding withMDX to my nextjs.co ...
Currently, I am going through the Strapi tutorial that covers the process of creating a blog using Nextjs with Strapi. If you are interested, you can find the tutorial here One important point mentioned in the tutorial is that a markdown package needs to ...
I'm currently in the process of setting up a blog using MDX and Next.js, but I've encountered an issue with rendering Markdown content. The blog post seems to only display the markdown content as plain text instead of rendering it properly. If you'd like ...
I have implemented NextJS and MDX using next-mdx-remote to retrieve my data, and it's working successfully. However, I encounter an error whenever I try to import React components: Error: Expected component CodeBlock to be defined: you likely forgot to i ...
I have been using next-mdx-remote in my next.js project. One of the components I've passed to it makes API calls using axios, which has been working well. However, I now want to switch to using react-query. When implementing this change, I encountered ...
Can custom MDX components be defined using a data-attribute of the HTML element? Currently, I am developing a Next.js blog utilizing contentlayer for MDX and Rehype Pretty Code for syntax highlighting code blocks. The HTML output structure from Rehype Pre ...
I am currently working on developing an RSS reader and I need to convert the code returned by bundleMDX into a string. This is necessary so that I can utilize it with ReactDOMServer.renderToStaticMarkup(mdx) in my project. You can find a similar implement ...
Currently, I am incorporating next.js + mdx-bundler into my project. There is a simple component that I frequently use in my mdx files. Everything runs smoothly with the following code: Mdx is a great <Component>format and I like it a lot</Compon ...
Currently, I am utilizing Codehike Bright alongside NextJS 13.2 in my app directory, which involves React Server Components integration. In addition to this setup, I am also incorporating MDX. Within the TSX file named page.tsx, the MDX content is loaded ...
As I construct a blog platform using MDX and NextJS, I am creating a custom image component that utilizes the Next <Image> component. However, I've encountered a minor issue for which I have been unable to find a solution. The main question is: In R ...
What is the most effective method to incorporate content from a markdown file foo.md into a component <Bar />? Will props need to be used for this? Can MDX handle such scenarios effectively? Your help is greatly appreciated! ...
I'm currently in the process of utilizing MDX pages along with React components for a project. My issue lies in wanting to generate HTML when adding text inside a component, similar to how it works with content outside of components. However, I've noticed ...
I have integrated Rehype Pretty code into my MDX blog to enhance syntax highlighting. However, I am encountering an issue with getting the line highlighting feature to function properly. After referring to the documentation and a few other sources, it see ...
After importing the plugin @mapbox/rehype-prism, I noticed that syntax highlighting is not functioning as expected. //next.config.js const rehypePrism = require("@mapbox/rehype-prism"); const withMDX = require("@next/mdx")({ extens ...
I am interested in incorporating MDX into next.js with the remark-gfm plugin. After discovering the Next.js Docs on MDX, I decided to follow their guidelines and added an import statement. // next.config.js import remarkGfm from 'remark-gfm;' const withMD ...
I am currently working on a project that involves incorporating MDX with Strapi. I'm a bit confused about how and where to integrate them, especially since MDX works with .mdx files while Strapi operates using APIs. If anyone has any insights or guid ...