Next.js生产环境无法访问public目录下的非图片文件

问题排查步骤与解决方案 #

1. 确认构建输出是否包含目标文件 #

运行npm run build后，检查构建输出目录：

• 若使用App Router默认构建：查看.next/public下是否存在PDFs、Lotties文件夹及对应文件
• 若使用静态导出（next export）：查看out目录下是否有上述文件

如果文件缺失，说明构建过程未复制这些非图片资源，需配置Webpack处理对应文件类型。

2. 配置Webpack处理PDF/Lottie文件 #

在项目根目录的next.config.js中添加以下配置，确保Next.js构建时将PDF和Lottie文件作为静态资源复制到输出目录：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    // 处理PDF和Lottie文件
    config.module.rules.push({
      test: /\.(pdf|lottie)$/,
      type: 'asset/resource',
      generator: {
        filename: '[path][name].[ext]' // 保留原目录结构输出
      }
    });
    return config;
  }
};

module.exports = nextConfig;

3. 服务器/托管平台访问规则检查 #

如果构建输出已包含目标文件但仍返回403，需检查服务器的静态资源访问规则：

• Nginx配置：添加允许PDF/Lottie文件访问的规则

  location ~* \.(pdf|lottie)$ {
      allow all;
      try_files $uri $uri/ =404;
  }
  

• 托管平台（如Vercel/Netlify）：检查是否有自定义Headers或访问限制规则，默认情况下这些平台允许public目录下所有文件访问，若有自定义规则需确保未拦截目标文件类型。

4. 后端函数正确访问文件路径 #

若通过API路由/后端函数读取文件，需使用本地文件系统路径而非URL路径，示例代码：

import { readFileSync } from 'fs';
import path from 'path';
import { NextResponse } from 'next/server';

export async function GET() {
  // 拼接public目录下的文件绝对路径
  const filePath = path.join(process.cwd(), 'public', 'Lotties', 'example.lottie');
  const fileContent = readFileSync(filePath);
  
  // 返回文件并设置正确的Content-Type
  return new NextResponse(fileContent, {
    headers: {
      'Content-Type': 'application/json', // Lottie文件为JSON格式
      'Content-Disposition': 'inline'
    }
  });
}

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