i18n Structure

Frontend Internationalization

Implement multilingual frontend sites that consume localized content from Stelo CMS.

Next.js i18n Configuration

next.config.js

const nextConfig = {
  i18n: {
    locales: ['en', 'fr', 'es'],
    defaultLocale: 'en',
    localeDetection: true
  }
};

Middleware Setup

middleware.ts

import createMiddleware from 'next-intl/middleware';

export default createMiddleware({
  locales: ['en', 'fr', 'es'],
  defaultLocale: 'en'
});

Dynamic Routing

pages/[locale]/[slug].tsx

export async function getStaticPaths() {
  const pages = await trpc.pages.getAll.query();
  const paths = [];

  for (const page of pages) {
    for (const locale of supportedLocales) {
      if (page.title[locale]) {
        paths.push({
          params: {
            locale,
            slug: page.slug[locale]
          }
        });
      }
    }
  }

  return { paths, fallback: false };
}

Content Fetching

export async function getStaticProps({ params }) {
  const page = await trpc.pages.getBySlug.query({
    slug: params.slug,
    locale: params.locale
  });

  return {
    props: { page },
    revalidate: 3600
  };
}

This section will be expanded with detailed i18n implementation.