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.