NextJS生产构建中无法加载public内的.docx文件该如何解决？

先澄清：public文件夹支持所有静态文件类型 #

Next.js的public文件夹并非只支持图片、字体或样式表，所有静态资源（包括.docx）都可以放在这里并在生产环境正常访问，你遇到的"unknown server error"大概率是路径配置或构建产物部署的问题，而非文件类型限制。

排查与解决步骤 #

• 检查文件路径是否正确
  确保代码中引用文件时使用根路径（比如/document.docx），而非相对路径。开发环境下相对路径可能偶然生效，但生产构建后路径解析会严格遵循Next.js的静态资源路由逻辑。
• 验证生产构建产物
  执行next build后，检查.next/static和.next/public目录下是否存在你的.docx文件。如果文件未被正确复制到构建产物中，尝试删除.next文件夹和node_modules，重新执行npm install和next build。
• 调整next.config.js配置（按需）
  若文件较大或有特殊资源规则，可在next.config.js中添加超时配置或设置正确的Content-Type：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    staticPageGenerationTimeout: 1000,
    async headers() {
      return [
        {
          source: '/:path*.docx',
          headers: [
            {
              key: 'Content-Type',
              value: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
            },
          ],
        },
      ];
    },
  };
  
  module.exports = nextConfig;
  

• 备选方案：使用API路由返回文件
  如果上述方法无效，可创建API路由读取文件并返回给客户端：
  1. 在pages/api/download-docx.js中编写代码：

     import fs from 'fs';
     import path from 'path';
     
     export default function handler(req, res) {
       const filePath = path.join(process.cwd(), 'public', 'document.docx');
       const file = fs.readFileSync(filePath);
       res.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document');
       res.setHeader('Content-Disposition', 'attachment; filename="document.docx"');
       res.send(file);
     }
     

  2. 前端通过访问/api/download-docx触发下载。

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