This documentation is for a legacy version of Next.js and Supabase. For the latest version, please visit the Next.js and Supabase V2 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.