autorenew

Astro i18n Starter

Adding Pages

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

Separating 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:

Managing in a Single File

If the amount of page content is not too large, you can use Astro’s dynamic routing feature to generate pages for each language dynamically 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:

Using Content Collection

If you want to manage pages like blogs or news using Markdown files, you can use Astro’s Content Collection feature.

Directory

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

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

---
import Layout from "@/layouts/Article.astro";
import { getCollection } from "astro:content";

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

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

Please refer to the Astro documentation for more details.

Content Collections | Docs