Skip to Content
Build with FinquStorefrontNexus ThemeMulti-Locale Support

Multi-Locale Support

The theme supports multiple locales with automatic detection and URL-based switching.

Locale Detection

The middleware detects locale from the URL and passes it to the app via headers:

  • Default locale has no URL prefix: /products
  • Non-default locales have prefix: /sv/produkter, /en/products

Using Locale in Components

Server Components

import { getLocale } from '@/lib/locale';
 
export default async function ServerComponent() {
  const locale = await getLocale();
  // Use locale for fetching, caching, etc.
}

Client Components

'use client';
 
import { useLocale } from '@/lib/context-providers/locale-context';
 
export function ClientComponent() {
  const { locale } = useLocale();
  // Use locale for client-side logic
}

Locale Switcher

The LocaleSwitcher component allows users to change languages:

// components/layout/locale-switcher.tsx
import { LocaleSwitcher } from '@/components/layout/locale-switcher';
 
export function Header() {
  return (
    <header>
      <LocaleSwitcher />
    </header>
  );
}

Locale Configuration

Configure available locales in your locale configuration:

// lib/locale.ts
export const locales = ['en', 'sv', 'fi'];
export const defaultLocale = 'en';

URL Structure

The theme uses URL prefixes for non-default locales:

  • English (default): /products
  • Swedish: /sv/produkter
  • Finnish: /fi/tuotteet

The middleware automatically:

  1. Detects the locale from the URL
  2. Strips the locale prefix before routing
  3. Passes the locale to components via headers/context

Data Fetching with Locale

Always pass the locale when fetching data:

import { getLocale } from '@/lib/locale';
import { storefrontClient, withLocale, cachePresets } from '@/lib/storefront';
 
export default async function ServerComponent() {
  const locale = await getLocale();
  
  const result = await storefrontClient.query(
    PRODUCTS_QUERY,
    {},
    withLocale(locale, cachePresets.products)
  );
  
  return <div>{/* ... */}</div>;
}

Locale-Aware Components

Components can access locale information:

'use client';
 
import { useLocale } from '@/lib/context-providers/locale-context';
 
export function ProductPrice({ amount, currency }) {
  const { locale } = useLocale();
  
  return (
    <div>
      {new Intl.NumberFormat(locale, {
        style: 'currency',
        currency: currency,
      }).format(amount)}
    </div>
  );
}

Best Practices

  1. Always use locale - Pass locale to all API calls
  2. Cache per locale - Use locale-aware caching
  3. Test all locales - Verify behavior in each locale
  4. Handle missing translations - Provide fallbacks
  5. Use locale in formatting - Dates, numbers, currencies

Next Steps