reactjs - NextJS 13.4 应用程序路由器中间件页面重定向没有样式

Question

如果用户不在登录屏幕上，我将使用以下中间件来创建重定向。这只是一个测试用例。最终，条件将检查有效的身份验证 session 并有条件地重定向。

但是，重定向完成后，页面没有样式。

这是基于 NextJS documentation example 中的示例.

export async function middleware(req: NextRequest) {
    if(req.nextUrl.pathname != '/sign-in') {
        return NextResponse.redirect(new URL('/sign-in', req.url))
    }
}

禁用中间件(将其注释掉)，我可以毫无问题地加载 /sign-in 。在“源”开发工具选项卡中，我看到了这一点。

启用中间件会显示零样式(使用默认的 tailwind 配置)。它还显示了一个辅助登录文档(紫色图标)，该文档似乎被识别为完全不同的页面。无样式的页面似乎不是 react 性的。

我很困惑为什么会发生这种情况，或者是否有更好的方法来创建中间件身份验证保护，以便在没有有效 session (或任何条件)时将用户重定向到登录页面。

Answer 1

好吧，我只需要创建这个堆栈溢出问题就可以最终自己找到答案。

创建上述重定向路径条件是为了避免在测试期间出现重定向循环。然而，它是有缺陷的，因为它将每个请求重定向到/sign-in，包括样式。

如果有人犯这个愚蠢的错误，我会保留这个。

仅重定向特定路径

如果您确实想有条件地从一个路径重定向到另一条路径而不搞砸一切，则可以按照 full example 进行操作。并包含中间件的匹配器配置。

export const config = {
    matcher: '/about/:path*',
};

但是，这将整个中间件系统的功能限制于此配置。

防止 NextJS 13 App Router 中间件在静态文件上运行

如果您只想停止中间件在静态文件(例如您的样式和字体)上运行，您可以使用以下配置:

// Stop Middleware running on static files
export const config = { matcher: '/((?!.*\\.).*)' }