Next.js middleware.ts 导出的函数未触发

Question

下面的代码（StackBlitz版本可以在这里找到），为什么当我访问https://[domain]/dashboard/profile时没有触发Next.js middleware.ts文件导出的函数？

/app/middleware.ts：

import { NextResponse, NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
   console.log('--> middleware.tsx');
   return NextResponse.redirect(new URL('/home', request.url));
}

/app/dashboard/profile/page.tsx：

export default async function Profile() {
   console.log('--> page.tsx');
   let v = (
      await (
         await fetch(
           'https://webcodingcenter1gkq8ip-biih--3000--810981ba.local-credentialless.webcontainer.io/dashboard'
         )
      ).json()
   ).visits;
  return <h1>{v}</h1>;
}

/app/dashboard/route.tsx：

import { NextResponse } from 'next/server';
var visits = 1;
export async function GET(request: Request) {
   console.log('--> route.tsx');
   visits++;
   return NextResponse.json({ visits });
}

Answer 1

因为您要将

middleware.ts

放入

app

文件夹中，所以它必须位于根目录中，或者如果您使用

src

文件夹，则可以将其放入其中。

来自Next.js官方文档：

使用项目根目录中的文件 middleware.ts（或 .js）来 定义中间件。例如，与页面或应用程序处于同一级别，或者 如果适用，在 src 内。

检查更新的 stackblitz 片段