i18n is here.

Read time: 3 minutes
Mitchell Christ
Mitchell Christ
four power rangers (red, green, blue and yellow) posing with white hearts and the logo "i18n", comical explosion in the background, technicolor 1960s film

Big news: SanityPress now supports internationalization (i18n)! This game-changing feature—long requested by our community—lets you craft and manage content in multiple languages, transforming your website into a truly global experience.

What is i18n?

It’s short for internationalization—the art of building websites that adapt seamlessly to different languages and regions. Think of it as your passport to connecting with audiences worldwide through tailored, translated content.

And yes, it’s now baked into SanityPress—but to unlock it, you’ll need SanityPress Pro. For just $10/month, you can take your site global. More on that in a bit.

How We Made It Happen

After digging into community feedback (you’re the real MVPs), we opted for a page-level localization approach powered by the official @sanity/document-internationalization plugin. Here’s what that means for you:

  • Simple translation workflows: Duplicate pages with ease and get straight to translating.
  • Clean URLs: Language prefixes like /fr/about keep things tidy and intuitive.
  • Flexible slugs: Translated pages can have unique slugs—no rigid mirroring required.
  • Streamlined management: No wrestling with field-level complexity—just straightforward content control.
  • Proper markup: Language switching is seamless, complete with accurate HTML lang attributes.

What You Get

Effortless Page Duplication

With the official @sanity/document-internationalization plugin, creating translations is as simple as clicking a button. The plugin adds a "Translation" menu in the Sanity Studio. One click and you’ve got:

  • A perfect copy of your page
  • Automatic links to the original document
  • Correct language metadata
  • Preserved references and relationships.
  • Less setup, more focus on crafting great translations.

This streamlined approach means you can focus on the actual translation work rather than technical setup.

@sanity/document-internationalization

Smart Language Switcher

We've added a sleek language switcher component in the footer, making it easy for users to toggle between available translations. It's clever enough to:

  • Highlight available translations for the current page
  • Flag missing translations
  • Remember user language preferences with cookies
Language Switcher component

SEO-Friendly URLs

Our structure is clean and search-engine approved:

  • Default language: /about
  • Translated pages: /ja/about, /fr/about
  • Blog posts? Flexible:
    • /fr/blog/post-title
    • /blog/fr/post-title

Technical Improvements

  • Added hreflang meta tags to specify language alternates and canonical URLs
  • Implemented middleware for smart redirects
  • Added lang attribute to the document <html> tag
  • Optional catch-all routing for extra flexibility

Ready to go global?

To start using i18n in your next SanityPress project, you'll need to:

1. Kick off a new template with the Sanity CLI:

  • npm create sanity@latest -- --template nuotsu/sanitypress

    2. Unlock i18n with 💎 SanityPress Pro — just $10/mo:

    Upgrade here and see how affordable global reach can be.

    2. Define your languages:

    src/lib/i18n.ts
  • export const supportedLanguages = [
      { id: 'en', title: 'English' },
      { id: 'fr', title: 'Français' },
      // { id: 'ja', title: '日本語' },
    ] as const as Language[]

    3. Start translating in your Sanity Studio!

    4. For static text, try next-intl with JSON files:

    The next-intl is a recommended 3rd party plugin we suggest installing that works well with Next.js, using JSON files:

    src/ui/modules/SearchModule/SearchForm.tsx
  • import { useTranslations } from 'next-intl'
    
    export default function SearchForm({ scope }: { scope: string }) {
      const t = useTranslations('SearchForm')
    
      return (
        <search>
          <input placeholder={t('placeholder')} />
        </search>
      )
    }
  • // en.json
    {
      "SearchForm": {
        "placeholder": "Search pages"
      }
    }
    
    // ja.json
    {
      "SearchForm": {
        "placeholder": "ページを検索"
      }
    }

    5. RTL languages? Add this CSS:

    src/styles/app.css
  •  /* change to the language code you're using */
    [lang="ar"] {
      direction: rtl;
    }

    What's next?

    This is just the beginning of our internationalization journey. We're cooking up in-depth docs and guides for advanced setups. Stay tuned.

    A nod to our heroes

    Huge thanks to our community members who provided valuable feedback and testing, especially:

    • @alioftech for sharing real-world i18n implementation experiences
    • @wild2008 for detailed feature suggestions

    The Global Stage Awaits

    With SanityPress Pro, you’re not just building websites—you’re reaching the world. For $10/month, i18n and a suite of premium tools are yours. Upgrade today and let your content speak every language.

    a green alien wearing a leather jacket with the text "SanityPress Pro" living in paradise, the signage "i18n" shop in the background, large starship spaceship in the distant background, technicolor 1960s film