#I18 and static routes

20 messages · Page 1 of 1 (latest)

thorn mason
#

Whats the good practice regarding creating static paths and internationalization in this matter:

  1. I have this file structure:
pages
|-> products
    |-> product
        |-> index.astro
    [page].astro
|-> pl
    |-> produkty
        |-> produkt
            |-> index.astro
        [page].astro

Now should I rewrite the get static paths function for each language (so it returns 'product' in one language and 'produkt' in the other one?

granite egretBOT
#

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

#

The best practice for handling static paths and internationalization in Astro is to generate the correct localized paths for each language in your getStaticPaths() function, matching your folder and URL structure.

Given your file structure:

pages/
|-> products/
|   |-> product/
|   |   |-> index.astro
|   [page].astro
|-> pl/
|   |-> produkty/
|   |   |-> produkt/
|   |   |   |-> index.astro
|   [page].astro

You should generate static paths that correspond to the localized routes. For example:

  • For English: /products/product/[page]
  • For Polish: /pl/produkty/produkt/[page]

This means you will need to return different values from getStaticPaths() for each language, so that the generated URLs match your folder structure and desired routes.

How to implement:

  • In each [page].astro file (one in products/product/ and one in pl/produkty/produkt/), implement a getStaticPaths() that returns the correct slugs for that language.
  • For English, return slugs like { params: { page: 'some-product' } } for /products/product/[page].
  • For Polish, return slugs like { params: { page: 'jakis-produkt' } } for /pl/produkty/produkt/[page].

You do not need to combine both languages in a single getStaticPaths(); each localized route should have its own function, returning only the slugs relevant to that language and path. This matches Astro's file-based routing and i18n best practices, where each language's content lives in its own folder and is generated independently see example.

If you use content collections, you can filter or map your content by language and generate the appropriate paths for each [page].astro file see content collections example.

#

Summary:
Yes, you should write a separate getStaticPaths() for each language-specific [page].astro file, returning the correct localized slugs for that language. This keeps your routes and content organized and matches Astro's recommended i18n practices.

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

#

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

thorn mason
#

@granite egret And what about getStaticPaths in index.astro filex from above schema?

granite egretBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

For your index.astro files in the structure you provided, you typically do not need a getStaticPaths() function. The index.astro files represent static routes (e.g., /products/product/ and /pl/produkty/produkt/), not dynamic ones. In Astro, getStaticPaths() is only required for dynamic routes—those with parameters in their filenames, such as [page].astro see reference.

So, unless you want to generate multiple versions of the same index page dynamically (which is uncommon for index pages), you can simply use a regular index.astro file without exporting getStaticPaths(). Astro will generate the static page at the corresponding route automatically.

Summary:

  • index.astro files do not require getStaticPaths().
  • Only dynamic route files (e.g., [page].astro) need getStaticPaths() to generate multiple pages see example.

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

#

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

thorn mason
#

@granite egret Even if the index.astro file is INSIDE [product] dir?

granite egretBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

Yes, even if the index.astro file is inside the product directory (e.g., pages/products/product/index.astro or pages/pl/produkty/produkt/index.astro), you do not need a getStaticPaths() function for it, as long as the file itself does not have any dynamic parameters in its filename.

Astro only requires getStaticPaths() for files with dynamic route parameters in their names, such as [page].astro. Static files like index.astro automatically generate a single static page at their corresponding route (e.g., /products/product/ or /pl/produkty/produkt/) without needing getStaticPaths() see reference.

So, you can safely omit getStaticPaths() in your index.astro files, regardless of their directory location, unless you specifically want to generate multiple pages from that file using dynamic parameters (which would require renaming the file to include a parameter, like [something].astrosee reference.

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

#

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

thorn mason
#

@granite egret But note that I don't have "product" directory, but "[product]" (with brackets), so it is dynamic routing

granite egretBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

Thank you for clarifying that your directory is named [product] (with brackets), making it a dynamic route.

In Astro, if you have a directory like pages/products/[product]/index.astro, then [product] is a dynamic parameter. In this case, you must provide a getStaticPaths() function in your index.astro file. This is because Astro needs to know at build time which values for [product] should be generated as static pages. Without getStaticPaths(), you will get a build error stating that it is required for dynamic routes see reference.

Example:

---
// pages/products/[product]/index.astro
export async function getStaticPaths() {
  return [
    { params: { product: 'product-a' } },
    { params: { product: 'product-b' } },
    // ...other products
  ];
}
const { product } = Astro.params;
---
<h1>Product: {product}</h1>

This will generate /products/product-a/, /products/product-b/, etc.

Summary:
If your index.astro is inside a [product] directory, you must export a getStaticPaths() function to define which product pages should be built see reference.

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

#

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

thorn mason
#

@granite egret now that you've got my case, please answer the original question.

granite egretBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

Given your structure with dynamic directories ([product] and [page]), the best practice in Astro is to implement a separate getStaticPaths() for each language-specific dynamic route file. Each function should return the slugs relevant to its language and folder structure.

For example, for:

pages/
|-> products/
|   |-> [product]/
|       |-> index.astro
|   [page].astro
|-> pl/
|   |-> produkty/
|       |-> [produkt]/
|           |-> index.astro
|       [page].astro

You should:

  • In pages/products/[product]/index.astro, export a getStaticPaths() that returns English product slugs (e.g., { params: { product: 'product-a' } }).
  • In pages/pl/produkty/[produkt]/index.astro, export a getStaticPaths() that returns Polish product slugs (e.g., { params: { produkt: 'produkt-a' } }).

This approach matches Astro’s file-based routing and i18n best practices: each language’s dynamic route file is responsible for generating its own localized paths, and you do not combine slugs for multiple languages in a single getStaticPaths() function. This is supported by the documentation, which shows that each dynamic route file should generate paths for its own context and language see example.

Summary:
Yes, you should write a separate getStaticPaths() for each language-specific dynamic route file, returning the correct localized slugs for that language. This keeps your routes and content organized and matches Astro's recommended i18n practices see reference.

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