• SajanTech's
  • Posts
  • Unlocking Multi-Language Magic in Astro

Unlocking Multi-Language Magic in Astro

Your Guide to Global Web Experiences

Author

Sajankumar Vijayan
October 20, 2024

Introduction

The importance of catering to a global audience cannot be overstated in today's interconnected world. For developers and businesses looking to expand their reach beyond borders, internationalization (i18n) is a key consideration.

Let’s see how we can achieve this using the Astro build framework.

Astro Build, a modern static site generator, provides developers with the tools to streamline this process and create websites that can seamlessly cater to users around the globe.

Prerequisites

This blog assumes that readers are fully aware of page routing in Astro Build.

I18n Routing

Astro’s i18n routing simplifies the integration of multilingual content by supporting default language configuration, computing relative page URLs, and recognizing visitors’ preferred languages from their browsers. Additionally, you can set fallback languages on a per-language basis, ensuring seamless redirection to existing content on your site.

Enable I18n Routing

In Astro, it is really simple to configure i18n routing. Firstly, We have to follow 3 major steps in our configuration

  • Enable i18n routing by adding an i18n object to our Astro configuration

  • Configure your desired URL path for your default locales.

  • Organizing your contents folder with the localizations. Your folder names must match your locales exactly also, your folder organization must match the URL paths.

Ok, let’s configure the above 3 points. Open your astro.config.mjs file and add the following lines of code. 

import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({
    i18n: {
        locales: ['en', 'fr', 'nl'],
        defaultLocale: 'en',
    }
});

Configure the route path for your default locale. In Astro object, there is a property called prefixDefaultLocale it is boolean by default it is set to false this means the default locale won’t have a prefix for example: / All other locales will /nl , /fr etc

If we set to prefixDefaultLocale:true then all URLs, including the default language will have a prefix /en

import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({
    i18n: {
        locales: ['en', 'fr', 'nl'],
        defaultLocale: 'en',
        routing: {
           prefixDefaultLocale: true
        }
    }
});

Finally, let's organize our content folders. First, let's create 2 folders called nl fr inside the pages folder. And, each folder has its own filename.astro for this example I have a layout.astro defined in the codebase so I am resuing it in all other pages.

pages/nl/index.astro

---
import Layout from "../../layout/layout.astro";
---

<Layout language="nl" title="Welkom bij Astro">
    <h1>Welkom op de demowebsite</h1>
</Layout>

pages/fr/index.astro

---
import Layout from "../../layout/layout.astro";
---

<Layout language="fr" title="Bienvenue sur Astro">
    <h1>Bienvenue sur le site de démonstration</h1>
</Layout>

layout/layout.astro

---
import {  getRelativeLocaleUrlList } from 'astro:i18n';

const {language, title} = Astro.props;
const localeUrls = getRelativeLocaleUrlList();

---
<html lang={language}>
<head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{title}</title>
</head>
<body>
    <nav>
        {localeUrls.map(s => <a href={s} class="link">{s}</a>)}
    </nav>
    <slot />
</body>
</html>
<style>
    .link {
        display: inline-block;
        padding: 1rem;
    }
</style>

Tip: The localized folders do not need to be at the root of the /pages/ folder. You can have an individual /locale/ folders anywhere within src/pages

Finally, we can just use the helpers from astro:i18 the module this will always provide the correct localized route. In our example, I have used getRelativeLocalUrlList() it so I can display all the localized routes in the layout.astro

Demo

Conclusion

In the era of digital globalization, Astro Build stands out as a powerful tool for developers aiming to create websites with a global footprint. Its internationalization features not only simplify the process of adapting content for different audiences but also contribute to a better user experience. By incorporating internationalization best practices, developers can leverage Astro Build to unlock the full potential of their web projects and reach users around the world.

🌍 Stay Ahead with Global Web Experiences!

Are you ready to take your web development skills to the next level? Subscribe to our exclusive newsletter and discover the secrets to building multi-language, globally optimized websites with Astro. Whether you're a developer aiming to reach a global audience or just curious about how to implement seamless language support, this newsletter is for you!

Here's why you should subscribe:

  • 🛠 Expert Tips & Tutorials: Learn how to integrate multi-language support in Astro with step-by-step guides and best practices.

  • 🌐 Global Trends & Insights: Stay informed on the latest trends in web development and global accessibility.

  • 🚀 Exclusive Astro Updates: Be the first to know about new features, tools, and updates in the Astro ecosystem.

  • 💡 Real-World Case Studies: See how businesses and developers are using multi-language support to grow their global presence.

Don’t miss out! Whether you're a seasoned pro or just getting started, our newsletter is packed with valuable insights to help you master multi-language support and take your web development projects worldwide.

🔔 Subscribe now and start building the future of the web today!

Reply

or to participate.