如何在nextJs项目中设置中间件文件

Question

我目前正在使用 Next.js 开发一个项目。总的来说，事情进展顺利，但我的 middleware.ts 文件遇到了问题。尽管努力遵循 Middleware 文档 ，但中间件似乎并未按预期触发。以下是我的

middleware.ts

文件的内容：

import { NextRequest, NextResponse } from 'next/server'
 
// This function can be marked `async` if using `await` inside
export function middleware(request: NextRequest) {
      console.log("it ran")
      
    return NextResponse.json({"hello":"middleware"})

 
}
 

奇怪的是，响应和console.log语句都没有被执行。为了提供更多背景信息，这是我的项目的结构：

如果您能提供有关解决此问题的任何见解或指导，我将不胜感激。

Answer 1

首先，

middleware != api

您的中间件文件不应该返回JSON或

NextResponse.next()

以外的任何内容。您必须返回

NextResponse.next()

才能让您的应用程序到达它应该去的地方。如果你不返回

NextResponse.next()

，那么你的请求就会卡在中间件中。

将您的代码修改为此将使其正常工作。

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

// This function can be marked `async` if using `await` inside
export function middleware(request: NextRequest) {
  console.log("it ran");
  
  // here, you can do other works like, check if the user is logged in
  // or if the user's ip is in the blocked list etc.

  return NextResponse.next();
}