npm install featurely-i18n

import { FeaturelyI18n } from 'featurely-i18n';

const i18n = new FeaturelyI18n({
  apiKey: process.env.NEXT_PUBLIC_FEATURELY_API_KEY!,
  projectId: process.env.NEXT_PUBLIC_FEATURELY_PROJECT_ID!,
  locale: 'en',
  fallbackLocale: 'en',
});

await i18n.init();

// Simple key lookup
console.log(i18n.t('nav.home')); // "Home"

// Fallback when key is missing (second argument)
console.log(i18n.t('missing.key', 'Default text')); // "Default text"

// Interpolation (third argument)
console.log(i18n.t('greeting', undefined, { name: 'World' })); // "Hello, World!"

// Pluralization via ICU format (store in dashboard: "You have {count, plural, one {# item} other {# items}}")
console.log(i18n.t('cart.items', undefined, { count: 3 })); // "You have 3 items"

t(key: string, fallbackText?: string, vars?: Record<string, string | number>): string

// Preload translations before switching to avoid any flash
await i18n.preload('no');
await i18n.setLocale('no');

// Listen for locale/translation changes (callback receives no arguments)
const unsubscribe = i18n.onChange(() => {
  console.log('Locale is now:', i18n.getLocale());
});

// Stop listening
unsubscribe();

const i18n = new FeaturelyI18n({
  apiKey: 'ft_live_your_api_key_here',
  projectId: 'your-project-id',
  locale: 'en',
  namespace: 'common', // load only "common" namespace on init
});

await i18n.init();

// Load another namespace on demand (e.g. when user navigates to admin area)
await i18n.loadNamespace('admin');
console.log(i18n.t('admin.title'));

'use client';

import { createContext, useContext, useEffect, useState } from 'react';
import { FeaturelyI18n } from 'featurely-i18n';

const I18nContext = createContext<FeaturelyI18n | null>(null);

export function I18nProvider({ children }: { children: React.ReactNode }) {
  const [, forceUpdate] = useState(0);
  const [i18n] = useState(() => new FeaturelyI18n({
    apiKey: process.env.NEXT_PUBLIC_FEATURELY_API_KEY!,
    projectId: process.env.NEXT_PUBLIC_FEATURELY_PROJECT_ID!,
    locale: 'en',
  }));

  useEffect(() => {
    i18n.init();
    // Re-render when translations change (e.g. after locale switch)
    return i18n.onChange(() => forceUpdate((n) => n + 1));
  }, [i18n]);

  return <I18nContext.Provider value={i18n}>{children}</I18nContext.Provider>;
}

export function useTranslation() {
  const i18n = useContext(I18nContext);
  if (!i18n) throw new Error('useTranslation must be used inside I18nProvider');
  return {
    t: i18n.t.bind(i18n),
    setLocale: i18n.setLocale.bind(i18n),
    locale: i18n.getLocale(),
  };
}

// app/page.tsx — Server Component
import { createServerI18n } from 'featurely-i18n';

export default async function Page() {
  const i18n = await createServerI18n({
    apiKey: process.env.FEATURELY_API_KEY!,
    projectId: process.env.NEXT_PUBLIC_FEATURELY_PROJECT_ID!,
    locale: 'en',
    namespace: 'common',
  });

  return (
    <>
      {/* Render directly in the Server Component */}
      <h1>{i18n.t('hero.title')}</h1>

      {/* Pass translations to a Client Component — no second network call */}
      <ClientNav initialData={i18n.translations} />
    </>
  );
}

// components/ClientNav.tsx — Client Component
'use client';
import { FeaturelyI18n } from 'featurely-i18n';

export function ClientNav({ initialData }: { initialData: Record<string, string> }) {
  // initialData pre-populates the SDK — init() is instant, no network call
  const i18n = new FeaturelyI18n({
    apiKey: process.env.NEXT_PUBLIC_FEATURELY_API_KEY!,
    projectId: process.env.NEXT_PUBLIC_FEATURELY_PROJECT_ID!,
    locale: 'en',
    initialData,
  });
  await i18n.init(); // no-op when initialData is provided
  return <nav>{i18n.t('nav.home')}</nav>;
}