next.config.ts

import path from "node:path";
import createMDX from "@next/mdx";
import type { NextConfig } from "next";

const preRawPlugin = path.join(
  __dirname,
  "app/(docs)/_lib/rehype-pre-code.mjs"
);
const postRawPlugin = path.join(
  __dirname,
  "app/(docs)/_lib/rehype-post-code.mjs"
);
const tocPlugin = path.join(__dirname, "app/(docs)/_lib/remark-toc.mjs");

const withMDX = createMDX({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: ["remark-frontmatter", "remark-mdx-frontmatter", tocPlugin],
    rehypePlugins: [
      preRawPlugin,
      "rehype-slug",
      ["rehype-autolink-headings", { behavior: "wrap" }],
      postRawPlugin,
    ],
  },
});

const nextConfig: NextConfig = {
  pageExtensions: ["ts", "tsx", "mdx"],
  reactCompiler: true,
};

export default withMDX(nextConfig);