Internationalization (i18n)

Overview

c15t supports internationalization (i18n) through the translations property in the ConsentManagerOptions object and has support for both server-side and client-side rendering.

Server-side	Client-side
The best way to reduce bundle size and improve performance. We can detect the user's language based on the browser's language settings, allowing for the most accurate translations. By default, when using a consent.io hosted instance, these languages are supported.	Bundled with the application allowing for multiple languages to be supported without the need for a backend. The more translations you have, the larger the bundle size will be, which may impact the performance of your application.

c15t supports partial translations, letting you supply only the changed keys without passing the whole translations object. When a requested language isn't available, the system falls back to the configured default/base language. Client-side translations take precedence over server-side translations, so client values override server values.

Implementation

Pass the translations object in your ConsentManagerProvider options to configure the translations for your application.

app/layout.tsx

import { ConsentManagerProvider } from '@c15t/nextjs';

export default function Layout({ children }: { children: React.ReactNode }) {
	return (
		<ConsentManagerProvider options={{
      // ... rest of your config
      translations: {
        defaultLanguage: 'en',
        translations: {
          en: {
            common: {
              acceptAll: 'Accept all',
            },
            cookieBanner: {
              title: 'Cookie Banner',
              description: 'This is a cookie banner',
            },
          },
        },
      },
    }}>
			{children}
		</ConsentManagerProvider>
	);
}

Types

TranslationConfig

./translation-types.mdx

Overview

c15t supports internationalization (i18n) through the translations property in the ConsentManagerOptions object and has support for both server-side and client-side rendering.

Server-side

Client-side

The best way to reduce bundle size and improve performance. We can detect the user's language based on the browser's language settings, allowing for the most accurate translations. By default, when using a consent.io hosted instance, these languages are supported.

Bundled with the application allowing for multiple languages to be supported without the need for a backend. The more translations you have, the larger the bundle size will be, which may impact the performance of your application.

Implementation

Pass the translations object in your ConsentManagerProvider options to configure the translations for your application.

app/layout.tsx

import { ConsentManagerProvider } from '@c15t/nextjs';

export default function Layout({ children }: { children: React.ReactNode }) {
	return (
		<ConsentManagerProvider options={{
      // ... rest of your config
      translations: {
        defaultLanguage: 'en',
        translations: {
          en: {
            common: {
              acceptAll: 'Accept all',
            },
            cookieBanner: {
              title: 'Cookie Banner',
              description: 'This is a cookie banner',
            },
          },
        },
      },
    }}>
			{children}
		</ConsentManagerProvider>
	);
}