javascript - Middleware is not working after custom app Next.js 13 - Stack Overflow

admin管理员组

文章数量:1333431

I am learning Next.js - version 13 and I try to customize the next.js app base on the standard document. But somehow, the middleware is not called. I assume I do something wrong here. If you have a time, please review the issue.

Here is the code change of middleware.ts:

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
import { AUTHORIZATION_TOKEN, COOKIE_TOKEN } from "@libs/constants";
import { verify } from "@libs/token";

export const config = {
  matcher: ["/admin/:path*", "/signin", "/api/:path*"],
};

export async function middleware(request: NextRequest) {
  const url = request.nextUrl.clone();
  const regex = new RegExp('\\/api\\/(category|product|cart|coupon|auth)\\/(create|update|delete)', 'i')

  let matcher: any = regex.exec(url.pathname);
  let token: any;
  let isValidToken: any;

  if (matcher && matcher[0]) {
    token = request.headers.get(AUTHORIZATION_TOKEN);
    isValidToken = await verify(token);
  } else {
    token = request.cookies.get(COOKIE_TOKEN)?.value;
    if (token) {
      isValidToken = await verify(JSON.parse(token));
    }

    if (url.pathname.startsWith("/admin")) {
      if (isValidToken) {
        return NextResponse.next();
      } else {
        url.pathname = "/signin";
        return NextResponse.redirect(url);
      }
    }
  
    if (url.pathname.startsWith("/signin") && isValidToken) {
      url.pathname = "/admin";
      return NextResponse.redirect(url);
    }
  }

  return NextResponse.next();
}

And the structure of project:

enter image description here

Does someone get any suggestions in this case? If I am wrong, please correct me. Thank you so much.

I am learning Next.js - version 13 and I try to customize the next.js app base on the standard document. But somehow, the middleware is not called. I assume I do something wrong here. If you have a time, please review the issue.

Here is the code change of middleware.ts:

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
import { AUTHORIZATION_TOKEN, COOKIE_TOKEN } from "@libs/constants";
import { verify } from "@libs/token";

export const config = {
  matcher: ["/admin/:path*", "/signin", "/api/:path*"],
};

export async function middleware(request: NextRequest) {
  const url = request.nextUrl.clone();
  const regex = new RegExp('\\/api\\/(category|product|cart|coupon|auth)\\/(create|update|delete)', 'i')

  let matcher: any = regex.exec(url.pathname);
  let token: any;
  let isValidToken: any;

  if (matcher && matcher[0]) {
    token = request.headers.get(AUTHORIZATION_TOKEN);
    isValidToken = await verify(token);
  } else {
    token = request.cookies.get(COOKIE_TOKEN)?.value;
    if (token) {
      isValidToken = await verify(JSON.parse(token));
    }

    if (url.pathname.startsWith("/admin")) {
      if (isValidToken) {
        return NextResponse.next();
      } else {
        url.pathname = "/signin";
        return NextResponse.redirect(url);
      }
    }
  
    if (url.pathname.startsWith("/signin") && isValidToken) {
      url.pathname = "/admin";
      return NextResponse.redirect(url);
    }
  }

  return NextResponse.next();
}

And the structure of project:

enter image description here

Does someone get any suggestions in this case? If I am wrong, please correct me. Thank you so much.

• javascript
• node.js
• next.js

Share Improve this question Follow edited Feb 12, 2023 at 14:14 Em Ha Tuan asked Feb 12, 2023 at 6:04 Em Ha TuanEm Ha Tuan 10333 silver badges1010 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

I had similar issue. I've moved my middleware.ts file in src folder like: /src/middleware.ts and now it's getting called. According your screenshot, it looks like your middleware.ts is out of /src folder.

Also keep in mind you can't do IO operations like calling DB in that middleware function. Still you can await promises or calling other services via fetch.

本文标签： javascriptMiddleware is not working after custom app Nextjs 13Stack Overflow