NextJS项目npm run dev正常，build后静态资源丢失、链接失效求助

1. 资源（图片、图标、字体）路径修复 #

• 图片引用：使用next/image时必须添加unoptimized: true（静态导出不支持图片优化），同时避免绝对路径，根据文件层级使用相对路径：

  import Image from 'next/image';
  <Image src="/images/avatar.png" alt="用户头像" width={80} height={80} unoptimized />
  

• 图标与字体：确保文件放在public目录下，引用时使用相对路径，若部署在子目录，需在next.config.js配置basePath：

  module.exports = {
    output: 'export',
    basePath: '/your-subdirectory', // 部署子目录时填写，本地测试可留空
    images: { unoptimized: true },
  };
  

2. Tailwind样式修复 #

• 检查tailwind.config.js的content字段，确保覆盖所有需要编译的文件：

  module.exports = {
    content: [
      './app/**/*.{js,ts,jsx,tsx}',
      './pages/**/*.{js,ts,jsx,tsx}',
      './components/**/*.{js,ts,jsx,tsx}',
    ],
    // 其余配置...
  };
  

• 确保全局CSS文件（如app/globals.css）正确导入Tailwind指令，无语法错误：

  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  

• 清除缓存重新打包：删除.next和out目录，执行npm run build，避免旧缓存导致的CSS异常。

3. 链接失效修复 #

• 使用next/link组件时，确保链接路径为相对路径（无需手动加.html）：

  import Link from 'next/link';
  <Link href="/contact">联系我们</Link>
  

• 本地测试必须将Live Server的根目录设置为out文件夹，而非直接打开out/index.html，否则相对路径会解析错误。

内容的提问来源于stack exchange，提问作者Arthur de Araujo Neves