Combining Next-Intl and Supabase Middleware in Next JS Router

Question

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*']
};

Felix G · Accepted Answer · 2024-07-19 18:48:24Z

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?

David Henry · Accepted Answer · 2024-07-23 16:44:52Z

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)$).*)",
  ],
};

Collectives™ on Stack Overflow

Combining Next-Intl and Supabase Middleware in Next JS Router

2 Answers 2

Comments

utiles/supabase/middleware.ts

/middleware.ts

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

utiles/supabase/middleware.ts

/middleware.ts

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related