autorenew

Astro i18n Starter

Adding Pages

There are several ways to create multilingual pages with Astro i18n Starter.

If you want to separate files by language

Create folders for each language under pages and add files in Astro or Markdown format.

src/pages
├── en/
│   ├── page-1.astro
│   └── page-2.mdx
└── ja/
  ├── page-1.astro
  └── page-2.mdx

The following pages will be generated:

If you want to manage in a single file

If the amount of text on the page is not too large, you can use Astro’s dynamic routing feature to dynamically generate pages for each language from a single file.

src/pages
└── [lang]/
    ├── page-1.astro
    └── page-2.astro

Import the LOCALES object in the file and generate dynamic routes using Astro’s getStaticPaths() function.

---
import { LOCALES } from "@/i18n";

export const getStaticPaths = () =>
  Object.keys(LOCALES).map((lang) => ({
    params: { lang },
  }));
---

The following pages will be generated:

If you want to use Content Collection

If you want to manage pages such as blogs or news in Markdown files, you can use Astro’s content collection feature.

Directory

src/
├── content.config.ts
├── blog/
│   ├── en/
│   │   ├── first-post.md
│   │   └── second-post.md
│   └── ja/
│        ├── first-post.md
│        └── second-post.md
└── pages/[lang]/blog/
  ├── index.astro
  └── [...id].astro

pages/[lang]/blog/[…id].astro

---
import { getCollection } from "astro:content";

export async function getStaticPaths() {
  const posts = await getCollection("blog");

  return posts.map((post) => {
    const [lang, ...id] = post.id.split("/");
    return { params: { lang, id: id.join("/") || undefined }, props: post };
  });
}
---

For more details, please check Astro’s documentation.

Content Collections | Docs