Next.js静态导出时如何正确配置public文件夹路径？

针对Next.js静态导出后无法通过相对路径访问public文件夹资源的问题，以下是几种实用的解决方法：

方法1：用CSS变量动态注入相对路径 #

这种方法能同时适配开发环境和静态导出后的生产环境，无需手动修改路径：

1. 在next.config.js中配置基础路径和环境变量：

module.exports = {
  assetPrefix: './',
  env: {
    NEXT_PUBLIC_ASSET_PREFIX: './',
  },
  // Next.js 13+ 需添加该配置启用静态导出
  output: 'export',
};

2. 在_app.js（或App Router中的layout.js）中注入CSS变量：

import { useEffect } from 'react';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  const assetPrefix = process.env.NEXT_PUBLIC_ASSET_PREFIX || './';
  
  useEffect(() => {
    document.documentElement.style.setProperty('--asset-prefix', assetPrefix);
  }, [assetPrefix]);

  return <Component {...pageProps} />;
}

export default MyApp;

3. 在CSS中使用该变量引用资源：

.classname {
  background-image: url(var(--asset-prefix)/bg.svg);
}

@font-face {
  font-family: 'CustomFont';
  src: url(var(--asset-prefix)/fonts/custom-font.woff2) format('woff2');
}

方法2：动态生成内联样式（适合组件级控制） #

如果需要在组件中灵活控制资源路径，可以通过Next.js的配置变量动态生成：

1. 在next.config.js中添加配置：

module.exports = {
  assetPrefix: './',
  publicRuntimeConfig: {
    assetPrefix: './',
  },
  output: 'export',
};

2. 在组件中使用内联样式：

import getConfig from 'next/config';
const { publicRuntimeConfig } = getConfig();

function HeroSection() {
  return (
    <div
      style={{
        backgroundImage: `url(${publicRuntimeConfig.assetPrefix}/bg.svg)`
      }}
    />
  );
}

export default HeroSection;

方法3：环境区分的CSS路径（简单场景） #

如果项目结构简单，可通过媒体查询区分开发和生产环境的路径：

/* 开发环境使用绝对路径 */
@media screen and (min-width: 0px) {
  .classname {
    background-image: url('/bg.svg');
  }
}

/* 静态导出后使用相对路径 */
@media screen and (min-width: 0px) {
  .classname {
    background-image: url('./bg.svg');
  }
}

注意事项 #

• Next.js 13+ 启用静态导出需在配置中添加output: 'export'，执行next build即可自动生成导出文件（无需再单独执行next export）。
• 导出后可直接打开out文件夹中的index.html，通过浏览器开发者工具的Network标签检查资源加载路径是否正确。
• public文件夹内的资源结构会原封不动同步到out目录，确保资源存放路径与代码中的引用路径一致。

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