This documentation is for a legacy version of Next.js Supabase. For the latest version, please visit the Next.js Supabase Turbo documentation

Using the Language Switcher

Import and use the LanguageSwitcher component in your Next.js Supabase application.

By default, the language switcher is not used within the Next.js Supabase starter. To use it, you will need to import it into your application and add it to your layout.

To do so, import the LanguageSwitcher component from the components directory and add it to any component you want to display it in.

import { LanguageSwitcher } from '~/components/LanguageSwitcher'; export const YourComponent = ({ children }) => { return ( <div> <LanguageSwitcher /> {children} </div> ); };

The language switcher will automatically display the current language and a list of available languages. When a user clicks on a language, the language will be updated in the user's profile and the page will be reloaded.


Subscribe to our Newsletter
Get the latest updates about React, Remix, Next.js, Firebase, Supabase and Tailwind CSS