Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Combining Next-Intl and Supabase Middleware in Next JS Router

I have a NExt JS project using the app router with Supabase.

I have a ROOT middleware.js file that contains some supabase code. I also need to integrate Next-Intl middleware into this too and i’m not sure how to go about it.

Here is my ROOT middleware.js code;

export async function middleware(request: NextRequest) {
  return await updateSession(request);
}

export const config = {
  matcher: [
    "/((?!_next/static|_next/image|favicon.ico|.*\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
  ],
};

From what I understand (limited) I need to use the following somewhere;

import createMiddleware from 'next-intl/middleware';
 
export default createMiddleware({
  // A list of all locales that are supported
  locales: ['en', 'de'],
 
  // Used when no locale matches
  defaultLocale: 'en'
});
 
export const config = {
  // Match only internationalized pathnames
  matcher: ['/', '/(de|en)/:path*']
};
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Due to supabase changing their docs for Next JS here is the correct code;

    utiles/supabase/middleware.ts

    import { createServerClient } from "@supabase/ssr";
import { NextResponse, type NextRequest } from "next/server";

import createMiddleware from "next-intl/middleware";

const intlMiddleware = createMiddleware({
  locales: ["ka", "en"],
  defaultLocale: "en",
});

export async function updateSession(request: NextRequest) {
  let intlResponse = intlMiddleware(request);

  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return request.cookies.getAll();
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value, options }) => request.cookies.set(name, value));
          intlResponse = NextResponse.next({
            request,
          });
          cookiesToSet.forEach(({ name, value, options }) =>
            intlResponse.cookies.set(name, value, options)
          );
        },
      },
    }
  );

  const {
    data: { user },
  } = await supabase.auth.getUser();

  if (!user && request.nextUrl.pathname.includes("/account")) {
    const url = request.nextUrl.clone();
    url.pathname = "/sign-in";
    return NextResponse.redirect(url);
  }

  return intlResponse;
}

    /middleware.ts

    import { type NextRequest } from "next/server";
import { updateSession } from "@/utils/supabase/middleware";

export async function middleware(request: NextRequest) {
  return await updateSession(request);
}

export const config = {
  matcher: [
    "/",
    "/(ka|en)/:path*",
    "/((?!_next/static|_next/image|favicon.ico|.*\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
  ],
};

  2. 0

    You can call intlMiddleware inside your middleware function. This function is the primary middleware run on every request.

    const intlMiddleware = createMiddleware({
  // A list of all locales that are supported
  locales: ['en', 'de'],
  
  // Used when no locale matches
  defaultLocale: 'en'
});

export async function middleware(request: NextRequest) {

  const intlResponse = intlMiddleware(request);
  if (intlResponse) {
    return intlResponse;
  }

  return await updateSession(request);
}

    And you can adjust your config by merging both these:

    export const config = {
  matcher: [
    '/', 
    '/(de|en)/:path*',
    '/((?!_next/static|_next/image|favicon.ico|.*\.(?:svg|png|jpg|jpeg|gif|webp)$).*)'
  ],
};

    If you only want to apply certain middleware functions for certain paths, check out these resources:

    https://nextjs.org/docs/messages/nested-middleware
    How to use multiple middlewares in Next.js using the middleware.ts file?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search