Skip to main content

Best Boilerplate for i18n: Makerkit vs Supastarter vs SaaSrock

·StarterPick Team
i18ninternationalizationlocalizationsaas boilerplatecomparison

Your Users Don't All Speak English

English-only SaaS products leave money on the table. The global SaaS market includes millions of users who prefer their native language — and many who require it. Internationalization (i18n) isn't just translation; it's date formatting, number formatting, currency display, RTL layouts, and content adaptation.

Adding i18n to an existing SaaS is one of the most painful retrofits. Every string needs extraction. Every date needs formatting. Every layout needs RTL consideration. Starting with i18n-ready architecture saves weeks of painful refactoring later.

Three boilerplates take i18n seriously: Makerkit, Supastarter, and SaaSrock. Each approaches the problem differently.

TL;DR

Supastarter has the most comprehensive i18n — type-safe translations with next-intl or nuxt-i18n, locale-based routing, RTL support, and translated email templates. Makerkit provides clean i18n via plugin with namespace-based translations. SaaSrock includes multi-language support throughout its 40+ modules. Choose Supastarter for the most complete i18n. Choose Makerkit for clean, modular i18n. Choose SaaSrock for Remix i18n with maximum features.

Key Takeaways

  • All three support multiple languages — the differences are in depth, tooling, and developer experience.
  • Supastarter's i18n is the most comprehensive — locale routing, type-safe translations, RTL support, and translated emails.
  • Makerkit's i18n is the cleanest architecture — isolated in a plugin, namespace-based translations, easy to add/remove.
  • SaaSrock includes translations for all 40+ modules — if you use its built-in features, they're pre-translated.
  • Type-safe translations are a game-changer — typos in translation keys caught at build time, not in production.
  • RTL support is rare — only Supastarter provides meaningful RTL layout support. Adding RTL later is extremely painful.

i18n Feature Comparison

FeatureMakerkitSupastarterSaaSrock
Translation librarynext-intl (plugin)next-intl / nuxt-i18nremix-i18next
Type-safe keys⚠️ Basic
Locale routing✅ /en/... /fr/...✅ /en/... /fr/...✅ /en/... /fr/...
Default locale (no prefix)✅ Configurable✅ Configurable✅ Configurable
Browser detection
User preference storage✅ Cookie + DB✅ Cookie + DB✅ Cookie
Locale switcher UI
Pluralization✅ ICU format✅ ICU format✅ ICU format
Date/time formatting✅ Intl API✅ Intl API✅ Intl API
Number formatting✅ Intl API✅ Intl API✅ Intl API
Currency formatting
RTL layout support
Translated emails⚠️ Basic
Translated metadata/SEO
hreflang tags⚠️ Manual
Translation namespaces
Lazy loading translations⚠️ Manual
Included languagesenen, de, fr, es, pt, ja, ko, zhen, es
Translation file formatJSONJSONJSON

Translation Architecture

Makerkit uses namespace-based translations isolated in its i18n plugin:

packages/i18n/
├── src/
│   ├── translations/
│   │   ├── en/
│   │   │   ├── common.json
│   │   │   ├── auth.json
│   │   │   ├── billing.json
│   │   │   └── dashboard.json
│   │   ├── fr/
│   │   │   ├── common.json
│   │   │   └── ...
│   │   └── de/
│   └── config.ts

Supastarter includes translations directly in the app with support for both Next.js and Nuxt:

locales/
├── en.json          # or split into namespaces
├── de.json
├── fr.json
├── es.json
├── pt.json
├── ja.json
├── ko.json
└── zh.json

Supastarter ships with 8+ languages pre-translated (at least for the UI shell). Your custom content needs translation, but the framework strings (buttons, labels, error messages) are ready.

SaaSrock includes translations for all its modules:

app/
├── i18n/
│   ├── en.json      # Covers all 40+ modules
│   └── es.json      # Spanish translations

SaaSrock's 40+ modules mean more strings to translate, but the built-in modules come pre-translated in English and Spanish.

Using Translations in Code

Makerkit / Supastarter (next-intl):

import { useTranslations } from 'next-intl';

export function DashboardHeader() {
  const t = useTranslations('dashboard');

  return (
    <div>
      <h1>{t('title')}</h1>
      <p>{t('welcome', { name: user.name })}</p>
      <p>{t('memberCount', { count: members.length })}</p>
    </div>
  );
}
{
  "dashboard": {
    "title": "Dashboard",
    "welcome": "Welcome back, {name}!",
    "memberCount": "{count, plural, =0 {No members} one {1 member} other {# members}}"
  }
}

Type-safe: if you reference t('dashboard.typo'), TypeScript flags it at build time.

SaaSrock (remix-i18next):

import { useTranslation } from 'react-i18next';

export function DashboardHeader() {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('dashboard.title')}</h1>
      <p>{t('dashboard.welcome', { name: user.name })}</p>
    </div>
  );
}

Similar API but with weaker type safety — typos in translation keys are caught at runtime, not build time.


RTL Support

Right-to-left (RTL) languages (Arabic, Hebrew, Persian, Urdu) require layout mirroring — sidebars on the right, text aligned right, directional icons flipped.

RTL FeatureMakerkitSupastarterSaaSrock
dir="rtl" attribute✅ Automatic
CSS logical properties⚠️ Partial✅ Full
Layout mirroring
Icon direction flipping
Arabic/Hebrew included✅ Arabic

RTL is hard to add later. It requires replacing margin-left with margin-inline-start, padding-right with padding-inline-end, and flipping every directional layout assumption. Supastarter using CSS logical properties from the start means RTL works without CSS changes.

If you have any chance of supporting Arabic, Hebrew, or Urdu markets — start with Supastarter.


SEO for Multi-Language Sites

FeatureMakerkitSupastarterSaaSrock
Locale-prefixed URLs✅ /en/blog, /fr/blog✅ /en/blog, /fr/blog✅ /en/blog, /es/blog
hreflang tags✅ Automatic⚠️ Manual
Translated meta tags
Translated sitemap✅ Per-locale⚠️ Manual
Translated OG images⚠️ Manual
Canonical URLs⚠️ Manual

For multilingual SEO, hreflang tags tell search engines which version of a page to show for each language. Missing hreflang tags can cause duplicate content penalties or wrong-language results. Supastarter and Makerkit handle this automatically.


Translation Workflow

Adding a New Language

Makerkit:

  1. Create new JSON files in packages/i18n/translations/[locale]/
  2. Add locale to config
  3. Deploy

Supastarter:

  1. Create new JSON file in locales/[locale].json
  2. Add locale to next-intl config
  3. Deploy

SaaSrock:

  1. Create new JSON file in app/i18n/[locale].json
  2. Add locale to i18n config
  3. Deploy

All three follow the same pattern. The difference is in how many strings you need to translate — SaaSrock's 40+ modules mean significantly more strings.

Translation Management at Scale

For SaaS products with 10+ languages, managing JSON files manually becomes painful. Consider integrating:

ToolPurposeMakerkitSupastarterSaaSrock
CrowdinTranslation management✅ Compatible✅ Compatible✅ Compatible
LokaliseTranslation management✅ Compatible✅ Compatible✅ Compatible
i18n Ally (VS Code)In-editor translations✅ Compatible✅ Compatible✅ Compatible
AI translationGPT/Claude for drafts✅ JSON format✅ JSON format✅ JSON format

All three use JSON translation files, which are compatible with every translation management platform.


When to Choose Each

Choose Supastarter If:

  • RTL support is needed — Arabic, Hebrew, or Persian markets
  • You want pre-translated UI — 8+ languages included for the framework shell
  • Comprehensive i18n matters — locale routing, translated emails, hreflang, everything handled
  • Type-safe translations — typos caught at build time
  • International markets from day one — not retrofitting later

Choose Makerkit If:

  • Clean architecture is priority — i18n isolated in a plugin, easy to add or remove
  • You want modular translations — namespace-based, load only what's needed per page
  • Type-safe keys — TypeScript catches translation key typos
  • You don't need RTL — LTR languages only
  • You'll manage translations yourself — clean JSON files per language per namespace

Choose SaaSrock If:

  • You're using Remix — SaaSrock is the most i18n-capable Remix boilerplate
  • You need all modules translated — SaaSrock's 40+ modules include translation strings
  • Spanish is a priority market — English + Spanish included by default
  • Feature-rich B2B SaaS with CRM, help desk, etc. — all translatable

Compare i18n features across 50+ boilerplates on StarterPick — filter by language support and localization features.

Check out this boilerplate

View Supastarter on StarterPick →

Comments