Next.js PWA集成导致图片加载失败问题求助

问题描述 #

我有个带博客的网站，为了实现新博文推送通知，用next-pwa将其改造为PWA。本地测试一切正常，但部署到Vercel后出现两个核心问题：

1. 所有从Firebase Storage加载的图片返回400错误，请求示例：

GET https://www.example.com/_next/image?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Feample.appspot.com%2Fo%2FimagePath.jpg%3Falt%3Dmedia%26token%4e1a-8e60-8c1058fa0993&w=256&q=75 400

2. Google Tag Manager和Vercel Insights触发Workbox无响应错误：

workbox-4f8070a3.js:1 Uncaught (in promise) no-response: no-response :: [{"url":"https://www.googletagmanager.com/gtag/js?l=dataLayer&id=G-WWGHCNEQG4"}]
    at v.D (https://www.cl-sektionen.se/workbox-4f8070a3.js:1:22182)
    at async v (https://www.cl-sektionen.se/workbox-4f8070a3.js:1:7597)

怀疑是PWA缓存逻辑干扰了Next.js的图片优化机制，需要在保留图片优化功能的前提下解决问题。

解决方案 #

1. 修复图片400错误：排除Next.js图片优化路由 #

next-pwa默认会缓存所有路由，但/_next/image是Next.js的动态图片优化接口，被PWA缓存拦截后会导致处理逻辑出错。需要将该路由从缓存规则中排除。

修改next.config.js中的withPWA配置：

const withPWA = require("next-pwa")({
  dest: "public",
  // 排除Next.js图片优化相关资源
  exclude: ({ asset, compilation }) => {
    if (asset.name.startsWith("_next/image/")) return true;
    if (asset.name.includes("firebasestorage.googleapis.com")) return true;
    return false;
  },
});

也可以用更简洁的正则匹配方式：

exclude: [/^\/_next\/image.*/]

2. 修复Workbox无响应错误：配置第三方资源缓存策略 #

Google Tag Manager、Vercel Insights这类第三方资源不适合被PWA缓存，强制缓存会因跨域或资源特性导致无响应错误。需要配置runtimeCaching跳过这类资源的缓存。

更新withPWA配置，添加runtimeCaching规则：

const withPWA = require("next-pwa")({
  dest: "public",
  exclude: ({ asset, compilation }) => {
    if (asset.name.startsWith("_next/image/")) return true;
    if (asset.name.includes("firebasestorage.googleapis.com")) return true;
    return false;
  },
  runtimeCaching: [
    // 项目静态资源采用网络优先策略
    {
      urlPattern: /^https?.*/,
      handler: "NetworkFirst",
      options: {
        cacheName: "assets-cache",
        expiration: {
          maxEntries: 50,
          maxAgeSeconds: 7 * 24 * 60 * 60, // 缓存7天
        },
        fetchOptions: {
          mode: "cors",
        },
        // 排除第三方脚本
        exclude: [
          /^https:\/\/www.googletagmanager.com\/.*/,
          /^https:\/\/vercel.live\/.*/,
        ],
      },
    },
    // 单独为GTM配置仅网络请求
    {
      urlPattern: /^https:\/\/www.googletagmanager.com\/.*/,
      handler: "NetworkOnly",
      options: {
        fetchOptions: {
          mode: "no-cors",
        },
      },
    },
    // 单独为Vercel Insights配置仅网络请求
    {
      urlPattern: /^https:\/\/vercel.live\/.*/,
      handler: "NetworkOnly",
    },
  ],
});

3. 修正Next.js配置合并方式 #

当前配置的导出写法有误，会导致Next.js无法正确识别images、plugins等配置项，这可能是图片优化失效的潜在原因。

修改module.exports：

// 错误写法
// module.exports = withPWA({
//   nextConfig,
// });

// 正确写法
module.exports = withPWA(nextConfig);

4. 验证manifest.json配置 #

确保manifest.json中的图标路径正确，Vercel会自动读取public目录下的资源，当前配置的media/icons路径如果确实存在于public内则无需修改。

总结 #

通过以上步骤：

• 排除Next.js图片优化路由，避免PWA缓存干扰图片处理流程
• 配置第三方资源的缓存策略，解决Workbox无响应错误
• 修正配置合并方式，确保所有Next.js配置生效
  可以在保留图片优化功能的同时，正常运行PWA推送通知功能，解决Vercel部署后的问题。

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