Overview

Intlayer Astro Usage teaches how to integrate Intlayer internationalization into Astro projects. It enables server-side content retrieval with getIntlayer in Astro components to render localized strings. Use this skill when setting up Astro i18n or managing server-side content in Astro.

How This Skill Works

Import getIntlayer from astro-intlayer and call it in an Astro component's frontmatter, e.g., const content = await getIntlayer('my-dictionary-key'). This runs on the server and returns localized content that you can render, such as content.title.

When to Use It

• When asked to 'setup Astro i18n' or configure internationalization in Astro
• When using getIntlayer in Astro components to fetch translations
• When you need server-side content rendering in Astro
• When rendering localized titles and strings in Astro pages
• When exploring Intlayer and Astro integration docs or references

Quick Start

1. Step 1: Install astro-intlayer and import { getIntlayer } from 'astro-intlayer'
2. Step 2: In the Astro component frontmatter, fetch: const content = await getIntlayer('my-dictionary-key')
3. Step 3: Render in the template, e.g., <h1>{content.title}</h1>

Best Practices

• Use consistent dictionary keys (e.g., my-dictionary-key) across components
• Prefer server-side rendering for translations to minimize client payloads
• Provide fallbacks for missing translations to avoid blank content
• Test translations across locales and routes in your Astro project
• Document the translation keys used in components for maintainability

Example Use Cases

• Fetch a dictionary item in Astro frontmatter and render content.title
• Populate an <h1> with the localized title using content.title
• Render localized strings in server-rendered components
• Switch locales via route parameters and fetch corresponding content
• Refer to Intlayer docs to explore dictionary exports in Astro

Frequently Asked Questions