Middleware does not work

Support
,
1

With middleware, you can “500 - Internal Server Error.” error and will not display.I’m utilizing the next@13.4.12 app directory. Here’s the structure of src/middleware.ts.

import { MiddlewareRequest, MiddlewareResponse, type NextRequest as NetlifyNextRequest } from "@netlify/next";
import { createMiddlewareClient } from "@supabase/auth-helpers-nextjs";
import { NextResponse } from "next/server";

import { Database } from "./types/supabase";

import type { NextRequest } from "next/server";

export async function middleware(nextRequest: NextRequest) {
  const req = new MiddlewareRequest(nextRequest as NetlifyNextRequest);
  const nextResponse = NextResponse.next();
  const res = await req.next()
  
  const supabase = createMiddlewareClient<Database>({ req: nextRequest, res: nextResponse });

  const {
    data: { session },
  } = await supabase.auth.getSession();
  const user = session?.user;

  const isSubscriptions = await supabase
    .from("profiles")
    .select("is_subscription")
    .eq("id", user?.id);

  const isSubscription = isSubscriptions.data?.[0]?.is_subscription;

  if (!user && req.nextUrl.pathname !== "/sign-in") {
    return MiddlewareResponse.redirect(new URL("/sign-in", req.url));
  }

  if (!isSubscription && req.nextUrl.pathname !== "/account" && req.nextUrl.pathname !== "/sign-in") {
    return MiddlewareResponse.redirect(new URL("/account", req.url));
  }

  return res;
}

export const config = {
  matcher: ["/", "/sign-in", "/videos", "/account"],
};

Do I need to set up other files, etc.?

I’d greatly appreciate guidance on resolving this issue. Thank you.

2

The following is the code that works correctly when checked locally using ‘next dev’.

import { createMiddlewareClient } from "@supabase/auth-helpers-nextjs";
import { NextResponse } from "next/server";

import { Database } from "./types/supabase";

import type { NextRequest } from "next/server";

export async function middleware(req: NextRequest) {
  const res = NextResponse.next();
  const supabase = createMiddlewareClient<Database>({ req, res });

  const {
    data: { session },
  } = await supabase.auth.getSession();
  const user = session?.user;

  const isSubscriptions = await supabase
    .from("profiles")
    .select("is_subscription")
    .eq("id", user?.id);

  const isSubscription = isSubscriptions.data?.[0]?.is_subscription;

  if (!user && req.nextUrl.pathname !== "/sign-in") {
    return NextResponse.redirect(new URL("/sign-in", req.url));
  }

  if (!isSubscription && req.nextUrl.pathname !== "/account" && req.nextUrl.pathname !== "/sign-in") {
    return NextResponse.redirect(new URL("/account", req.url));
  }

  return res;
}

export const config = {
  matcher: ["/", "/sign-in", "/videos", "/account"],
};

How do I get it to work with Netlify?

Also using @netlify/next’s middlewareReqest it works fine for both ‘ntl dev’ and ‘next dev’.
‘Error: MiddlewareRequest only works in a Netlify Edge Function environment’.
Error: MiddlewareRequest only works in a Netlify Edge Function environment

Is the Next13 app directory affected?

3

What site is this about? If you’re getting HTTP 500, maybe it’s related to: Server.edge not defined Error on nextJS SSR functions cause site to return 500 Errors