Multi-language SaaS apps: implementing i18n with Next.js App Router

Why internationalization matters for SaaS

Supporting multiple languages isn't just about translating text—it's about creating a truly global product that serves users worldwide. With proper i18n implementation, you can:

• Reach a global audience and expand your market
• Improve SEO rankings in multiple countries
• Provide a better user experience for non-English speakers
• Comply with localization requirements in different regions

What you get with Fastack

Fastack includes a complete @saas/i18n package that provides:

Locale-based routing

Fastack implements automatic locale detection and routing using Next.js App Router and next-intl middleware:

• Automatic Locale Detection - Detects user's preferred language from browser settings
• URL-Based Locales - Clean URLs like /en/dashboard or /fr/dashboard
• Default Locale Optimization - Default locale (English) doesn't require a prefix for cleaner URLs
• Type-Safe Navigation - TypeScript ensures locale-aware routing throughout your app

import { defineRouting } from 'next-intl/routing';
import { createNavigation } from 'next-intl/navigation';

export const locales = ['en', 'fr', 'es', 'de', 'it', 'pt', 'nl', 'pl', 'ru', 'ja'] as const;
export type Locale = (typeof locales)[number];
export const defaultLocale: Locale = 'en';

export const routing = defineRouting({
  locales,
  defaultLocale,
  localePrefix: 'as-needed', // Default locale has no prefix
  pathnames: {},
});

// Type-safe navigation helpers
export const { Link, redirect, usePathname, useRouter } = createNavigation(routing);

Type-safe translation management

Fastack provides type-safe translation functions for both server and client components:

• Server Components - Use getServerTranslations() in Server Components and API routes
• Client Components - Use useClientTranslations() hook in Client Components
• Namespace Organization - Organize translations by feature (auth, dashboard, settings, etc.)
• Type Safety - TypeScript ensures translation keys exist and are used correctly

// Server Component
import { getServerTranslations } from '@/i18n/server';

export default async function Page() {
  const t = await getServerTranslations('common');
  
  return <h1>{t('welcome')}</h1>;
}

// Client Component
'use client';
import { useClientTranslations } from '@/i18n/client';

export function MyComponent() {
  const t = useClientTranslations('auth');
  
  return <button>{t('signin.button')}</button>;
}

SEO optimization for multiple languages

Fastack includes comprehensive SEO utilities for multi-language sites:

• Hreflang Tags - Automatic generation of hreflang links for all language versions
• Canonical URLs - Prevents duplicate content issues across locales
• Locale-Specific Metadata - Each language version has optimized meta tags
• Open Graph Localization - Proper OG tags for social media sharing in each language

import { generateLocaleMetadata, getCanonicalUrl } from '@saas/i18n';
import { routing } from '@/i18n/routing';

export async function generateMetadata({ params }) {
  const locale = params.locale;
  const baseUrl = process.env.NEXT_PUBLIC_APP_URL;
  
  return generateLocaleMetadata(
    '/dashboard',
    baseUrl,
    locale,
    routing,
    localeMetadata,
    {
      title: 'Dashboard',
      description: 'Your dashboard',
      alternates: {
        canonical: getCanonicalUrl('/dashboard', baseUrl, routing, locale),
      },
    }
  );
}

This automatically generates all necessary SEO tags, including hreflang alternates for search engines to understand your multi-language content structure.

Translation file organization

Fastack organizes translations in a clean, maintainable structure:

src/i18n/locales/
├── en/
│   └── index.ts          # English translations
├── fr/
│   └── index.ts          # French translations
├── es/
│   └── index.ts          # Spanish translations
└── ...

// Example translation structure
export default {
  common: {
    welcome: 'Welcome',
    loading: 'Loading...',
  },
  auth: {
    signin: {
      title: 'Sign In',
      button: 'Sign In',
    },
  },
  dashboard: {
    title: 'Dashboard',
    overview: 'Overview',
  },
};

Each locale has its own directory with organized namespaces, making it easy to manage translations and add new languages.

Language switcher component

Fastack includes a pre-built, accessible language switcher component that displays country flags and handles locale switching:

import { LanguageSwitcher } from '@saas/i18n/components';
import { usePathname, useRouter } from '@/i18n/routing';
import { locales, localeNames } from '@/i18n/routing';

export function Header() {
  const pathname = usePathname();
  const router = useRouter();
  
  return (
    <header>
      <LanguageSwitcher
        locales={locales}
        localeNames={localeNames}
        pathname={pathname}
        router={router}
      />
    </header>
  );
}

The language switcher automatically updates the URL and maintains the current page context when switching languages, providing a seamless user experience.

Middleware integration

Fastack's middleware automatically handles locale detection and routing:

import createIntlMiddleware from 'next-intl/middleware';
import { routing } from '@/i18n/routing';

const intlMiddleware = createIntlMiddleware(routing);

export default function middleware(request: NextRequest) {
  // Handle i18n routing
  const response = intlMiddleware(request);
  
  // Your other middleware logic (auth, etc.)
  // ...
  
  return response;
}

export const config = {
  matcher: [
    // Skip API routes and static files
    '/((?!api|_next|_vercel|.*\..*).*)',
  ],
};

The middleware automatically redirects users to the appropriate locale based on their browser preferences or URL, ensuring a smooth internationalization experience.

Time saved: 25+ hours

Implementing internationalization from scratch typically requires:

• Setting up next-intl configuration (2-3 hours)
• Implementing locale-based routing (4-6 hours)
• Building middleware for locale detection (2-3 hours)
• Creating translation file structure (1-2 hours)
• Building language switcher component (3-4 hours)
• Implementing SEO utilities (hreflang, canonical URLs) (3-4 hours)
• Setting up type-safe translation functions (2-3 hours)
• Testing across multiple locales (3-4 hours)
• Handling edge cases and error states (2-3 hours)

Total: 23-32 hours of development time that you save with Fastack.

Best practices included

Fastack follows internationalization best practices:

• Locale Persistence - User's language preference is remembered
• Fallback Handling - Graceful fallback to default locale if translation is missing
• Date and Number Formatting - Locale-aware formatting for dates, numbers, and currencies
• RTL Support Ready - Architecture supports right-to-left languages
• Performance Optimized - Translations are loaded efficiently, only when needed

Conclusion

Internationalization is essential for building global SaaS applications. Fastack provides a complete, production-ready i18n system that saves you weeks of development time while ensuring proper SEO, type safety, and a great user experience across all languages.

With Fastack, you get:

• Complete locale-based routing with Next.js App Router
• Type-safe translation functions for server and client components
• SEO optimization with hreflang tags and canonical URLs
• Pre-built language switcher component with country flags
• Support for 10 languages out of the box
• Organized translation file structure
• Middleware integration for automatic locale detection