Next.js中使用中间件重定向时site.webmanifest无法加载的问题

我完全懂你现在的困扰——之前做过不少Next.js PWA项目都没问题，结果这次因为中间件的认证重定向，把site.webmanifest的请求也给拦截了，导致浏览器拿到的是登录页HTML，PWA功能直接罢工。别担心，咱们可以在保留中间件认证功能的前提下，轻松解决这个问题：

方法一：在中间件中排除静态资源请求 #

最直接的方式就是修改你的_middleware.tsx，让它跳过对site.webmanifest和PWA图标这类静态资源的拦截。这样未认证用户访问这些资源时，不会被重定向到登录页，浏览器就能正确获取到manifest文件了。

修改后的中间件代码如下：

import { NextFetchEvent, NextRequest, NextResponse } from "next/server";

export function middleware(req: NextRequest, event: NextFetchEvent) {
  // 跳过manifest文件和图标目录的请求，直接放行
  const requestPath = req.nextUrl.pathname;
  if (requestPath === "/site.webmanifest" || requestPath.startsWith("/icons/")) {
    return NextResponse.next();
  }

  const jwt = req.cookies["jwt"];
  const urlArray: Array<string> = req.url.split("/");
  const baseUrl = `${urlArray[0]}//${urlArray[2]}`;
  
  if (req.url !== `${baseUrl}/login` && !jwt) {
    return NextResponse.redirect(`${baseUrl}/login`);
  }
}

方法二：用Matcher限定中间件作用范围（Next.js 13+） #

如果你的项目用的是Next.js 13及以上版本，更推荐用matcher配置来精准控制中间件生效的路由。这样中间件只会拦截需要认证的页面请求，完全不会碰静态资源，代码也更简洁。

在next.config.js中添加如下配置：

module.exports = {
  middleware: {
    // 这里填写需要认证的路由，比如首页、任务列表页等
    matcher: ['/', '/dashboard/:path*', '/tasks/:path*']
  }
}

配置完成后，你的原中间件代码可以保持不变，因为matcher已经自动排除了静态资源（包括site.webmanifest）的请求。

额外检查点 #

最后再确认一下：你的site.webmanifest文件是不是放在项目根目录的public文件夹里？Next.js会自动把public下的文件作为静态资源对外提供，这是PWA资源的正确放置位置，别放错了路径哦。

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