NextJS中间件似乎没有被触发

Question

我在/myproject/pages/middleware.js:中有middleware.js文件

export function middleware(request) {
console.log(1);
return NextResponse.redirect(new URL('/', request.url));
}
// See "Matching Paths" below to learn more
export const config = {
matcher: ['/test'],
};

现在我期望的是，当我转到页面/test时，它应该将我重定向到/。然而，什么都没发生，我看到了我的标准404页面。

有什么想法吗？

NextJs版本：12.2.2

Answer 1

NextJS的最新版本要求用户拥有与pages文件夹位于同一级别的单个中间件文件。

请尝试使用{root}/middleware.js而不是{root}/pages/middleware.js
，如果您有src文件夹，请尝试{root}/src/middleware.js。

Answer 2

对于下一个13.0.2/13.0.1，如果您使用的是appDir:true(实验)

如果你想使用中间件：

1. 将middleware.ts放入根项目：(与"应用程序"文件夹的层次结构相同，不在应用程序文件夹内…)

2. 确保tsconfig包含：[…，"middleware.ts"]

3. 使空"；页面"；文件夹(基于问题)

4. 将满足每个请求：

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
export function middleware(request: NextRequest ) {
console.log('lol!!!')
}
export const config = {
matcher: '/',
}

Answer 3

https://github.com/vercel/next.js/discussions/38546#discussioncomment-3127906

这最终成为了我的解决方案。我用的是下一个13.1。如果您使用src文件夹，则需要在{root}/src/middleware.ts中使用中间件

Answer 4

在我的情况下，它没有被调用，因为我在next.config.js文件中像这样使用pageExtensions。

const nextConfig = {
reactStrictMode: true,
pageExtensions: ["page.tsx", "api.ts"],
};

因此，在我的情况下，应该调用中间件，middleware.page.ts或middleware.api.ts。我花了一段时间才弄明白。

Answer 5

如果您的页面和中间件不在同一级别，那么它将无法工作。下面是一个使用Cookie的中间件示例。

import { NextResponse } from "next/server";
export default function middleware(req){
let verify = req.cookies.get("loggedin");
let url = req.url
if(!verify && url.includes('/dashboard')){
return NextResponse.redirect("http://localhost:3000/");
}
if (verify && url === "http://localhost:3000/") {
return NextResponse.redirect("http://localhost:3000/dashboard");
}

}

Answer 6

如果您使用的NextJS版本低于12.2.2，则需要：

• 用_middleware.ts或_middlware.js命名文件
• 将其放置在pages目录中

https://nextjs.org/docs/messages/middleware-upgrade-guide

Answer 7

一切都很简单(Next.js 13 app_dir)：

• 检查路径：src/middleware.ts
• 注意，如果您将TS扩展用于中间件，请不要忘记TS扩展
• pageExtensions: ['ts', 'tsx'](next.config.js)

完成。

Answer 8

只是插话，我的错误是我调用了我的文件"middelware.ts"；而不是"；中间件.ts"；，错误地切换"；l〃；以及"；e"；。。。