Integrating Next-Intl and Supabase in Your Next.js Project

In the rapidly evolving world of web development, internationalization (i18n) and database management are two pillars that significantly affect user experience and application scalability. Next.js, a leading React framework, enables developers to build server-side rendering and static web applications efficiently. By integrating next-intl for i18n and Supabase for backend services, developers can create powerful, scalable, and user-friendly applications. This post will guide you through the process of working with the next-intl library and Supabase together in a Next.js project, leveraging middleware for seamless integration.

Understanding Next-Intl and Supabase

Before diving into the integration, let’s briefly understand what next-intl and Supabase offer and why they're valuable in a Next.js project.

Next-Intl Library

The next-intl library provides a comprehensive solution for internationalizing Next.js applications. It supports features like localized messages, date and time formatting, and number formatting. With next-intl, you can easily manage your application's translations and ensure that your app can cater to a global audience by serving content in multiple languages. The library's design for simplicity and efficiency makes it a go-to choice for developers aiming to internationalize their Next.js applications.

Supabase

Supabase is an open-source Firebase alternative, providing all the backend services you need to build a product, including database management, authentication, real-time subscriptions, and storage capabilities. It allows developers to use a PostgreSQL database backend effortlessly, making it an excellent choice for projects requiring scalable database solutions with rich features.

Integration Using Next.js Middleware

Integrating next-intl and Supabase in a Next.js project involves leveraging the framework's middleware capabilities to handle i18n routing and initialize Supabase for server-side operations. Here's a step-by-step guide on achieving this:

Step 1: Setting Up Middleware

First, ensure your Next.js project is set up to use middleware by creating a middleware.ts file in your project's root directory. This middleware will handle both internationalization routing and initializing Supabase's server client.

Step 2: Configure next-intl

In your middleware file, import createIntlMiddleware from next-intl/middleware and configure it with your supported locales and default locale:

import createIntlMiddleware from 'next-intl/middleware';

const handleI18nRouting = createIntlMiddleware({
  locales: ['en', 'de'],
  defaultLocale: 'en'
});

This configuration specifies that your application supports English and German, with English set as the default language.

Step 3: Initialize Supabase

Next, import createServerClient from @supabase/ssr and initialize your Supabase client. This step requires your Supabase project's URL and ANON (public) key, which should be stored in your environment variables for security:

import {createServerClient} from '@supabase/ssr';

const supabase = createServerClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
  {
    cookies: {
      // Cookie handling logic here
    }
  }
);

Step 4: Implement Cookie Handling for Authentication

Supabase’s authentication in SSR scenarios involves cookie handling. The middleware’s job is to intercept requests, manage authentication cookies, and ensure that user authentication states are correctly managed:

cookies: {
  get(name: string) {
    return request.cookies.get(name)?.value;
  },
  set(name: string, value: string, options: CookieOptions) {
    request.cookies.set({name, value, ...options});
    response.cookies.set({name, value, ...options});
  },
  remove(name: string, options: CookieOptions) {
    request.cookies.set({name, value: '', ...options});
    response.cookies.set({name, value: '', ...options});
  }
}

Full Code Snippet

// middleware.ts
import {type NextRequest} from 'next/server';
import {createServerClient, type CookieOptions} from '@supabase/ssr';
import createIntlMiddleware from 'next-intl/middleware';
 
const handleI18nRouting = createIntlMiddleware({
  locales: ['en', 'de'],
  defaultLocale: 'en'
});
 
export async function middleware(request: NextRequest) {
  const response = handleI18nRouting(request);
 
  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        get(name: string) {
          return request.cookies.get(name)?.value;
        },
        set(name: string, value: string, options: CookieOptions) {
          request.cookies.set({name, value, ...options});
          response.cookies.set({name, value, ...options});
        },
        remove(name: string, options: CookieOptions) {
          request.cookies.set({name, value: '', ...options});
          response.cookies.set({name, value: '', ...options});
        }
      }
    }
  );
 
  await supabase.auth.getUser();
  return response;
}
 
export const config = {
  matcher: ['/', '/(de|en)/:path*']
};

Conclusion

Combining next-intl and Supabase within a Next.js project using middleware provides a robust solution for building scalable, internationalized web applications. This setup allows for the seamless integration of internationalization features and backend services, catering to a global audience while leveraging Next.js's full potential for server-side rendering and static site generation.

With next-intl, developers can efficiently manage localized content, ensuring that the application is accessible and user-friendly for audiences around the world. Meanwhile, Supabase's suite of backend services, including authentication, real-time databases, and storage, empowers developers to build feature-rich applications without managing complex backend infrastructure.

By following the steps outlined in this guide, you can integrate these powerful tools into your Next.js project, enhancing your application’s scalability, performance, and user experience. Whether you’re building a small project or a large-scale application, leveraging Next.js middleware for next-intl and Supabase integration is a strategy that can significantly benefit your development workflow and end-product quality.

DCoderAI

Thank you for reading until the end. Before you go:

• Please consider clapping and following the writer! 👏
• Follow us on Twitter(X), LinkedIn, and YouTube.
• Visit DCoder.AI to find out more about how we are democratizing free programming education around the world.

Explore Our MicroSaaS Apps!

🚀 DCodeAI 🌐: Revolutionize your business with our suite of MicroSaaS apps designed to streamline operations and boost efficiency. Learn more about how we can help at DCodeAI (https://dcoder.ai/).

SmartEReply 💬: Enhance your LinkedIn interactions with SmartEReply, the AI-powered assistant that crafts perfect responses every time. Start communicating smarter at SmartEReply (https://smartereply.com/)

OrbicAI 🤖: Discover the best AI tools with our comprehensive directory. Whether you’re looking for GPT tools or specific applications like AWS Partyrocks, OrbicAI is your go-to resource. Dive into the AI landscape at OrbicAI. (https://orbic.ai/)