使用中间件 Next JS 重定向时不会加载清单

Question

我已经用 Next JS 做了几个 pwa 项目，但是这次我的 site.webmanifest 文件没有加载。当我在浏览器中查看 site.webmanifest 时，我看到它加载了一个带有起始页的 html 文件。

site.webmanifest:

{
  "name": "Task Manager",
  "short_name": "Task Manager",
  "description": "Application to save tasks",
  "display": "standalone",
  "start_url": "/",
  "icons": [
    {
      "src": "/icons/manifest-icon-192.maskable.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/manifest-icon-192.maskable.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/icons/manifest-icon-512.maskable.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/manifest-icon-512.maskable.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

_middleware.tsx:

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

export function middleware(req: NextRequest, event: NextFetchEvent) {
  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`);
  }
}

link 在 _document.tsx

中体现

<link rel="manifest" href="/site.webmanifest" />

错误：Error on browser console

编辑：我发现发生此错误是因为我在未经身份验证时使用中间件重定向到登录页面。但是我仍然没有解决这个问题，因为我想保留中间件。

Answer 1

找到了可能的问题，我遇到了同样的问题。

Next.js pages/_middleware.ts 中的中间件会拦截所有发出的请求，甚至是对“public/images”或您的情况 /site.webmanifest[=12 发出的请求=]

你的中间件告诉任何请求都需要有一个 jwt 或 /login，所以这个中间件阻止了对 /site.webmanifest

的请求

仍然不知道这是否是 Nextjs 的意图

if ((req.url !== `${baseUrl}/login` || req.url !== '/site.webmanifest') && !jwt) {
    return NextResponse.redirect(`${baseUrl}/login`);
}

添加私有路由之类的东西，这样中间件只会阻止对它们的请求

const privatePaths = [/\/privateRoute2/,/\/privateRoute1\/*/]
const isPrivate = privatePaths.some(rx => rx.test(req.nextUrl.pathname));
if (isPrivate && !jwt) {
    const url = req.nextUrl.clone()
    url.pathname = '/authenticate'
    return NextResponse.redirect(url, 302);
}
return NextResponse.next()

使用中间件 Next JS 重定向时不会加载清单

Manifest does not load when redirecting with middleware Next JS

progressive-web-apps

manifest.json

next.js