Next.js 13 动态导入MDX文件问题求助

前提准备 #

假设你的本地MDX文件统一存放在项目根目录的content/blog/下，比如article-1.mdx、article-2.mdx等，路由规则为/blog/[slug]，访问/blog/article-1时加载对应article-1.mdx。

步骤1：配置Next.js识别MDX文件 #

修改next.config.js，添加MDX支持：

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ['js', 'jsx', 'md', 'mdx'],
}

const withMDX = require('@next/mdx')()
module.exports = withMDX(nextConfig)

步骤2：实现动态加载（两种方案） #

方案一：静态生成（SSG，推荐用于内容稳定的场景）

在app/blog/[slug]/page.js中编写代码，预生成所有博客页面：

import fs from 'fs';
import path from 'path';
import { compileMDX } from '@next/mdx';
import { MDXProvider } from '@mdx-js/react';

// 自定义MDX组件映射（按需调整）
const components = {
  h1: (props) => <h1 style={{ color: '#2563eb' }} {...props} />,
  p: (props) => <p style={{ lineHeight: 1.7 }} {...props} />,
};

// 预生成所有可用的slug路由
export async function generateStaticParams() {
  const postsDir = path.join(process.cwd(), 'content', 'blog');
  const filenames = fs.readdirSync(postsDir);
  
  return filenames.map(filename => ({
    slug: filename.replace(/\.mdx$/, ''),
  }));
}

export default async function BlogPost({ params }) {
  const { slug } = params;
  const filePath = path.join(process.cwd(), 'content', 'blog', `${slug}.mdx`);
  const rawContent = fs.readFileSync(filePath, 'utf8');

  // 编译MDX内容
  const { content } = await compileMDX({
    source: rawContent,
    components,
  });

  return (
    <MDXProvider components={components}>
      {content}
    </MDXProvider>
  );
}

方案二：动态导入MDX组件

如果不需要预生成页面，可直接动态导入对应MDX文件：

import { Suspense } from 'react';

// 可选：预生成路由提升性能，去掉则每次请求动态处理
export async function generateStaticParams() {
  const fs = require('fs');
  const path = require('path');
  const postsDir = path.join(process.cwd(), 'content', 'blog');
  const filenames = fs.readdirSync(postsDir);
  
  return filenames.map(filename => ({
    slug: filename.replace(/\.mdx$/, ''),
  }));
}

export default async function BlogPost({ params }) {
  const { slug } = params;
  // 动态导入对应MDX文件
  const PostModule = await import(`../../../content/blog/${slug}.mdx`);
  const PostComponent = PostModule.default;

  return (
    <Suspense fallback={<div>加载中...</div>}>
      <PostComponent />
    </Suspense>
  );
}

注意事项 #

• 安装必要依赖：npm install @next/mdx @mdx-js/react @mdx-js/loader
• 调整文件路径：如果你的MDX文件存放位置不同，需修改代码中的path.join参数
• 自定义组件：如果MDX文件中使用了自定义组件，需在components对象中添加对应映射

内容的提问来源于stack exchange，提问作者antonwilhelm