I wanted to try out nextjs-13 so made a very simple blog.
Folder structure (skip to 'The Problem' section for actual issue):
app/
page.jsx
layout.jsx
test.mdx
public/
...
styles/
...
mdx-components.jsx
next.config.mjs
package.json
So this is a pure nextjs-13 app with all content only in the app/ directory.
next.config.mjs
import nextMDX from "@next/mdx";
import remarkGfm from "remark-gfm";
import rehypePrism from "@mapbox/rehype-prism";
// /** @type {import('next').NextConfig} */
const nextConfig = {
pageExtensions: ["ts", "tsx", "js", "jsx", "mdx"],
experimental: {
appDir: true,
mdxRs: true,
},
reactStrictMode: true,
};
export default nextMDX({
extension: /\.mdx?$/,
options: {
remarkPlugins: [remarkGfm],
rehypePlugins: [rehypePrism],
},
})(nextConfig);
package.json
{
"private": true,
"scripts": {
// ...
},
"dependencies": {
"@mapbox/rehype-prism": "^0.8.0",
"@next/mdx": "latest",
"next": "latest",
"react": "18.2.0",
"react-dom": "18.2.0",
"remark-gfm": "^3.0.1",
"remark-rehype": "^10.1.0",
},
}
and finally, page.jsx
import Foo from "./test.mdx";
export default function Page() {
return <Foo />;
}
and layout.jsx
import "./global.scss";
import "../styles/prism.css";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
The problem
When I run this, next certainly seems to be compiling the mdx. But it's some very basic out-of-the-box transform that does not parse code blocks (all code appears as a single string), and does not render tables correctly. That is, rehypePrism and remarkGfm are not actually being applied.
Any suggestions? Thanks!
