• Blog
  • Documentation
  • Courses
  • Changelog
  • AI Starters
  • UI Kit
  • FAQ
  • Supamode
    New
  • Pricing

Launch your next SaaS in record time with Makerkit, a React SaaS Boilerplate for Next.js and Supabase.

Makerkit is a product of Makerkit Pte Ltd (registered in the Republic of Singapore)Company Registration No: 202407149CFor support or inquiries, please contact us

About
  • FAQ
  • Contact
  • Verify your Discord
  • Consultation
  • Open Source
  • Become an Affiliate
Product
  • Documentation
  • Blog
  • Changelog
  • UI Blocks
  • Figma UI Kit
  • AI SaaS Starters
License
  • Activate License
  • Upgrade License
  • Invite Member
Legal
  • Terms of License
    • Adding API Routes
    • Change Authentication strategy
    • Fetching the signed in User
    • Reading a Document
    • Creating a Document
    • Configuring Plans
    • Project Configuration
    • Updating the Navigation menu
    • Adding a new translation string
    • Guarding an API Route
    • Adding Pages
    • Updating the Sidebar menu
    • Require Email Verification
    • Fetching the selected Organization
    • Reading a list of Documents
    • Updating a Document
    • Running the Stripe Webhook locally
    • Branding
    • Setting a Default Language
    • Dark Theme
    • Theming
    • Calling API Routes from the client
    • Deleting a Document
    • Updating the Logo
    • Adding a new language in the Next.js Firebase SaaS Kit
    • Checking CSRF Tokens
    • Passing data from server to client
    • Updating the Fonts
    • Adding Pages
    • Guarding Pages
    • Using Lemon Squeezy instead of Stripe
    • Updating the Favicons
    • Using the Language Switcher
    • Environment variables
    • Detect current Locale
    • Setting up Emails

Using the Language Switcher | Next.js Firebase SaaS Kit

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

By default, the language switcher is not used within the Next.js Firebase 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.