NextJS中间件似乎没有被触发

Question

我的middleware.js文件位于/myproject/pages/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的最新版本要求用户拥有与页面文件夹同一级别的单个中间件文件。

相反{root}/pages/middleware.js，请尝试{root}/middleware.js
，如果您有src文件夹，请尝试{root}/src/middleware.js。

Answer 2

对于下一个13.0.2 / 13.0.1 如果您使用的是appDir: true（实验性）

如果你想使用中间件：

1. 将 middleware.ts 放在根项目中：（与“app”文件夹具有相同的层次结构，而不是在 app 文件夹中...）

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

3. 创建空的“pages”文件夹。（基于问题）

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

就我而言，它没有被调用，因为我pageExtensions在文件中这样使用next.config.js。

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

因此，就我而言，应该调用中间件，或者middleware.page.ts或middleware.api.ts。我花了一段时间才弄清楚。

Answer 4

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

这最终成为我的解决方案。我用的是next 13.1。如果您使用 src 文件夹，则需要将中间件放在{root}/src/middleware.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

一切都很简单（Next.js 13 app_dir）：

• 检查路径：src/middleware.ts
• 注意，如果你使用 TS 扩展作为中间件，不要忘记TS扩展。
• pageExtensions: ['ts', 'tsx']（下一个.config.js）

完毕。