Next.js构建报错：pages/tos/[locale]页面无React组件默认导出

开发者阿泽

2026-10-1

Next.js构建报错“页面无有效React组件默认导出”解决方案

错误原因

Next.js生产构建阶段会对页面文件执行静态依赖分析，你在getStaticProps中使用了带模板变量的动态导入语句加载非JS类型的Markdown文件，导致构建器的静态分析逻辑异常，误判该页面没有导出有效的React组件。同时你将需要预编译读取的Markdown文件存放在public目录也不符合设计规范，public目录仅用于存放可直接被客户端请求访问的静态资源，不适合存放服务端构建阶段需要读取的源文件。

修复步骤

调整Markdown文件存放路径：在项目根目录新建content/tos文件夹，将原public/tos下的所有Markdown文件移动到该新目录下。
重写getStaticProps逻辑，使用Node.js原生fs模块读取文件替代动态导入，修改后的完整页面代码如下：

import matter from 'gray-matter'
import ReactMarkdown from 'react-markdown'
import fs from 'fs'
import path from 'path'

export default function Index({ content, data: frontMatter }) {
  return (
    <div className="p-8">
      Title: {frontMatter.title}
      <ReactMarkdown className="prose lg:prose-xl mx-auto">
        {content}
      </ReactMarkdown>
    </div>
  )
}

export async function getStaticPaths() {
  return {
    paths: [{ params: { locale: 'en' } }, { params: { locale: 'pl' } }],
    fallback: false,
  }
}

export async function getStaticProps({ params }) {
  // 用绝对路径读取文件避免相对路径异常
  const filePath = path.join(process.cwd(), 'content', 'tos', `tos-${params.locale}.md`)
  const fileContent = fs.readFileSync(filePath, 'utf8')
  const parsedFile = matter(fileContent)
  delete parsedFile.orig

  return {
    props: parsedFile,
  }
}