test | Astro Lounge | Page 1

#

Hi @grim hound. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

To implement localization with dynamic routes and localized SEO meta tags for a simple one-page website in Astro using English and French, follow these steps:

Configure Astro for i18n:

Create an astro.config.mjs file in your project root with the following content:

import { defineConfig } from "astro/config";

export default defineConfig({
  i18n: {
    locales: ["en", "fr"],
    defaultLocale: "en",
    routing: {
      prefixDefaultLocale: false
    }
  }
});

This configuration sets up English as the default language without a prefix, and French with a prefix.

Set up the file structure:

src/
├── pages/
│   ├── index.astro
│   └── [lang]/
│       └── index.astro
├── layouts/
│   └── Layout.astro
└── i18n/
    ├── ui.ts
    └── utils.ts

Create a base layout with SEO meta tags:

In src/layouts/Layout.astro:

---
import { getLangFromUrl } from '../i18n/utils';
import { ui } from '../i18n/ui';

const { title } = Astro.props;
const lang = getLangFromUrl(Astro.url);
---

<html lang={lang}>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{ui[lang].seo.title}</title>
    <meta name="description" content={ui[lang].seo.description} />
  </head>
  <body>
    <slot />
  </body>
</html>

Set up translation utilities:

In src/i18n/ui.ts:

export const ui = {
  en: {
    'nav.home': 'Home',
    'welcome': 'Welcome to my website',
    seo: {
      title: 'My Website',
      description: 'Welcome to my multilingual website'
    }
  },
  fr: {
    'nav.home': 'Accueil',
    'welcome': 'Bienvenue sur mon site web',
    seo: {
      title: 'Mon site web',
      description: 'Bienvenue sur mon site web multilingue'
    }
  }
} as const;

export const defaultLang = 'en';

In src/i18n/utils.ts:

#

import { ui, defaultLang } from './ui';

export function getLangFromUrl(url: URL) {
  const [, lang] = url.pathname.split('/');
  if (lang in ui) return lang as keyof typeof ui;
  return defaultLang;
}

export function useTranslations(lang: keyof typeof ui) {
  return function t(key: keyof typeof ui[typeof defaultLang]) {
    return ui[lang][key] || ui[defaultLang][key];
  }
}

Create the default home page:

In src/pages/index.astro:

---
import Layout from '../layouts/Layout.astro';
import { getLangFromUrl, useTranslations } from '../i18n/utils';

const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
---

<Layout>
  <h1>{t('welcome')}</h1>
  <a href="/fr/">{t('nav.home')} (FR)</a>
</Layout>

Create the dynamic language route:

In src/pages/[lang]/index.astro:

---
import Layout from '../../layouts/Layout.astro';
import { getLangFromUrl, useTranslations } from '../../i18n/utils';

export function getStaticPaths() {
  return [
    { params: { lang: 'fr' } }
  ];
}

const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
---

<Layout>
  <h1>{t('welcome')}</h1>
  <a href="/">{t('nav.home')} (EN)</a>
</Layout>

This setup creates a simple one-page website with localization for English (default) and French. The SEO meta tags are localized in the Layout component, and the content is translated using the utilities in the i18n folder.

The English version will be available at the root URL (/), while the French version will be at /fr/. The dynamic [lang] route ensures that the French page is generated with the correct translations.

#

For more detailed information on Astro's i18n features, you can refer to the Internationalization Guide.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@grim hound Kapa.ai is still learning and improving, please let me know how I did by reacting below.

#test

For more detailed information on Astro's i18n features, you can refer to the Internationalization Guide.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: