Next.js构建部署后本地字体路径错误问题求助

核心问题 #

assetPrefix仅对JSX/JS中的资源生效，不会自动处理自定义CSS文件里的绝对路径（如/fonts/xxx），导致部署到子路径后资源请求路径缺失前缀。

方案一：使用basePath（官方推荐，最省心） #

basePath是Next.js专为子路径部署设计的配置，会自动给所有资源（包括CSS中的绝对路径）添加前缀，能解决assetPrefix的局限。

1. 修改next.config.js，添加basePath配置：

const nextConfig = {
  reactStrictMode: false,
  basePath: '/games/crash', // 你的部署子路径
  images: {
    unoptimized: true,
    path: '/games/crash/_next/image' // 图片资源的路径前缀
  },
  async redirects() {
    return [
      {
        source: '/',
        destination: '/home',
        permanent: true,
        basePath: false // 重定向源不包含basePath，按需调整
      },
    ]
  },
}

module.exports = nextConfig;

2. 全局CSS中的路径保持不变（依然用/fonts/xxx）：

@font-face {
  font-family: "GAS";
  src: url("/fonts/gas.TTF");
}

@font-face {
  font-family: "MONUMENT";
  src: url("/fonts/monument.otf");
}

@font-face {
  font-family: "UNIVERSE";
  src: url("/fonts/universe.otf");
}

构建部署后，Next.js会自动将CSS中的/fonts/xxx转换为/games/crash/fonts/xxx，匹配正确的资源路径。

方案二：用CSS变量动态注入资源前缀 #

如果无法使用basePath，可以通过全局CSS变量注入前缀，适配CSS中的路径。

1. 在next.config.js中设置环境变量：

const nextConfig = {
  reactStrictMode: false,
  assetPrefix: '/games/crash',
  env: {
    NEXT_PUBLIC_ASSET_PREFIX: '/games/crash' // 暴露给前端的环境变量
  },
  images: {
    unoptimized: true
  },
  async redirects() {
    return [
      {
        source: '/',
        destination: '/home',
        permanent: true
      },
    ]
  },
}

module.exports = nextConfig;

2. 在_app.js（或_app.tsx）中注入全局CSS变量：

import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <style jsx global>{`
        :root {
          --asset-prefix: ${process.env.NEXT_PUBLIC_ASSET_PREFIX};
        }
      `}</style>
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

3. 修改全局CSS中的字体路径，使用CSS变量：

@font-face {
  font-family: "GAS";
  src: url("var(--asset-prefix)/fonts/gas.TTF");
}

@font-face {
  font-family: "MONUMENT";
  src: url("var(--asset-prefix)/fonts/monument.otf");
}

@font-face {
  font-family: "UNIVERSE";
  src: url("var(--asset-prefix)/fonts/universe.otf");
}

方案三：用PostCSS插件批量替换路径 #

通过PostCSS插件在构建时自动替换CSS中的绝对路径，适合需要自定义路径处理的场景。

1. 安装postcss-url插件：

npm install postcss-url --save-dev

2. 创建postcss.config.js，配置路径替换规则：

module.exports = {
  plugins: {
    'postcss-url': {
      url: (asset) => {
        // 匹配字体和背景图路径，添加前缀
        if (asset.url.startsWith('/fonts/') || asset.url.startsWith('/images/')) {
          return `/games/crash${asset.url}`;
        }
        return asset.url;
      },
    },
    tailwindcss: {},
    autoprefixer: {},
  },
};

3. 保持全局CSS路径不变，构建时插件会自动将/fonts/xxx替换为/games/crash/fonts/xxx。

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