search
HomeWeb Front-endJS TutorialCreating dynamic routes to internationalization (i) with Astro Build

Criando rotas dinâmicas para internacionalização (i) com Astro Build

If you want to read this article in English go here

I recently started learning Astro to create a dashboard-style project.

I really want to implement internationalization (i18n) in this project—the goal is that anyone can use it, regardless of language.

Problem

i18n support in Astro is very good. It works similar to Next.js or any other framework with routing based on file/folder structure.

So, if we want to have a page in English and the same page in Portuguese, we can organize our files like this:

.
└── src/
    └── pages/
        ├── en/
        │   ├── login.astro
        │   └── dashboard.astro
        └── pt-br/
            ├── login.astro
            └── dashboard.astro

And each page has its own i18n strings—cool!

But this is where my problem starts: I don't want to clone all my pages; I just want to change the strings on those pages.

I need something like /[any-language-flag]/all-my-routes.

You may ask, "Why not use something like react-intl?" My answer is that I want to take full advantage of the Astro engine, especially for SSG/SSR, and avoid any client-side components. Generally, these frameworks use React Context, which is rendered only on the client side.

Attempts and Failures

First of all, I read Astro's recipe about i18n and checked out some community libraries to solve this problem.

The first library I tried was astro-i18next, and it looked like exactly what I needed!

Based on an array in the configuration file, astro-i18next generates my i18n pages at build time, so I only need to code once and not worry about cloning pages.

The problem is that astro-i18next appears to be archived or no longer maintained. There are a lot of problems and the last commit was over a year ago.

Solution

After trying other libraries (honorable mention for astro-i18n), I found Paraglide, and it was a game changer for my project.

I chose Paraglide because:

  • It's type-safe, so I can use it with TypeScript and take advantage of autocomplete.
  • It converts i18n strings to functions, so if a string key changes, my build will fail, catching errors early.
  • Using i18n functions allows for better tree shaking, removing unused functions.
  • There is a VS Code extension that improves the development experience.

Note: You can use Paraglide in a JS project too, and it also supports Next.js.

After installation and configuration, I used my messages like this:

---
import * as m from "../paraglide/messages.js";
---

<h1 id="m-hello-name-Alan">{m.hello({ name: "Alan" })}</h1>

However, this didn't solve my routing problem—I was still cloning my pages for each language I wanted to add.

To resolve this, I changed my project to use dynamic routes in the root route, so all my routes now start with the language flag.

My folder structure looked like this:

.
└── src/
    └── pages/
        └── [lang]/
            ├── login.astro
            └── dashboard.astro

After this change, Paraglide can automatically get the language of the route parameter:

  • http://localhost:4321/en/login
  • http://localhost:4321/pt-br/login

Now I can add a new language just by configuring it in astro.config.ts and translating my string file.

But I still have two problems to solve:

  1. When the user accesses http://localhost:4321/ for the first time without a language flag.
  2. If the user changes language on a specific route, I need to keep it on the same route (e.g. /en/create-account should redirect to /pt-br/create-account or /pt-br/criar- account).

Middleware for Language Redirection

To solve the first language redirection problem, I used Astro middleware.

In src/middleware/index.ts, I added this code:

import { defineMiddleware } from 'astro:middleware';
import {
  languageTag,
  setLanguageTag,
  type AvailableLanguageTag,
} from '../paraglide/runtime';

export const onRequest = defineMiddleware((context, next) => {
  // Obter o idioma do parâmetro da URL
  const lang = context.params.lang;

  // Se mudou
  if (lang !== languageTag()) {
    setLanguageTag(lang as AvailableLanguageTag);
    // Redirecionar para o idioma alterado ou padrão (en)
    return context.redirect(`/${lang ?? 'en'}`);
  }

  return next();
});

Language Selector with Current Route

To keep the user on the same route when changing languages, I added this component:

---
import { languageTag } from '../paraglide/runtime';

const pathName = Astro.url.pathname.replace(`/${languageTag()}/`, '');
---

Additionally, we can translate these messages too, using the second parameter in Paraglide's messages function:







Considerations

I don't consider my solution to be the best, especially since I'm still learning Astro, so there may be other solutions. If you know of any, please comment, and I'll try :)

Thank you for reading this article! If you have any questions, comment, I'll be happy to answer.

The above is the detailed content of Creating dynamic routes to internationalization (i) with Astro Build. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Is JavaScript Written in C? Examining the EvidenceIs JavaScript Written in C? Examining the EvidenceApr 25, 2025 am 12:15 AM

Yes, the engine core of JavaScript is written in C. 1) The C language provides efficient performance and underlying control, which is suitable for the development of JavaScript engine. 2) Taking the V8 engine as an example, its core is written in C, combining the efficiency and object-oriented characteristics of C. 3) The working principle of the JavaScript engine includes parsing, compiling and execution, and the C language plays a key role in these processes.

JavaScript's Role: Making the Web Interactive and DynamicJavaScript's Role: Making the Web Interactive and DynamicApr 24, 2025 am 12:12 AM

JavaScript is at the heart of modern websites because it enhances the interactivity and dynamicity of web pages. 1) It allows to change content without refreshing the page, 2) manipulate web pages through DOMAPI, 3) support complex interactive effects such as animation and drag-and-drop, 4) optimize performance and best practices to improve user experience.

C   and JavaScript: The Connection ExplainedC and JavaScript: The Connection ExplainedApr 23, 2025 am 12:07 AM

C and JavaScript achieve interoperability through WebAssembly. 1) C code is compiled into WebAssembly module and introduced into JavaScript environment to enhance computing power. 2) In game development, C handles physics engines and graphics rendering, and JavaScript is responsible for game logic and user interface.

From Websites to Apps: The Diverse Applications of JavaScriptFrom Websites to Apps: The Diverse Applications of JavaScriptApr 22, 2025 am 12:02 AM

JavaScript is widely used in websites, mobile applications, desktop applications and server-side programming. 1) In website development, JavaScript operates DOM together with HTML and CSS to achieve dynamic effects and supports frameworks such as jQuery and React. 2) Through ReactNative and Ionic, JavaScript is used to develop cross-platform mobile applications. 3) The Electron framework enables JavaScript to build desktop applications. 4) Node.js allows JavaScript to run on the server side and supports high concurrent requests.

Python vs. JavaScript: Use Cases and Applications ComparedPython vs. JavaScript: Use Cases and Applications ComparedApr 21, 2025 am 12:01 AM

Python is more suitable for data science and automation, while JavaScript is more suitable for front-end and full-stack development. 1. Python performs well in data science and machine learning, using libraries such as NumPy and Pandas for data processing and modeling. 2. Python is concise and efficient in automation and scripting. 3. JavaScript is indispensable in front-end development and is used to build dynamic web pages and single-page applications. 4. JavaScript plays a role in back-end development through Node.js and supports full-stack development.

The Role of C/C   in JavaScript Interpreters and CompilersThe Role of C/C in JavaScript Interpreters and CompilersApr 20, 2025 am 12:01 AM

C and C play a vital role in the JavaScript engine, mainly used to implement interpreters and JIT compilers. 1) C is used to parse JavaScript source code and generate an abstract syntax tree. 2) C is responsible for generating and executing bytecode. 3) C implements the JIT compiler, optimizes and compiles hot-spot code at runtime, and significantly improves the execution efficiency of JavaScript.

JavaScript in Action: Real-World Examples and ProjectsJavaScript in Action: Real-World Examples and ProjectsApr 19, 2025 am 12:13 AM

JavaScript's application in the real world includes front-end and back-end development. 1) Display front-end applications by building a TODO list application, involving DOM operations and event processing. 2) Build RESTfulAPI through Node.js and Express to demonstrate back-end applications.

JavaScript and the Web: Core Functionality and Use CasesJavaScript and the Web: Core Functionality and Use CasesApr 18, 2025 am 12:19 AM

The main uses of JavaScript in web development include client interaction, form verification and asynchronous communication. 1) Dynamic content update and user interaction through DOM operations; 2) Client verification is carried out before the user submits data to improve the user experience; 3) Refreshless communication with the server is achieved through AJAX technology.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

SecLists

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)