What's the best way to structure my front-end project for localization?

There are two main approaches to structuring translations in a front-end project:

Centralized Approach #️⃣

All translations are stored in one location:

my-app/
└── src/
    └── assets/
        └── locale/
            ├── en.json
            └── es.json

Pros:

• Simple to set up
• Easy to find all translations in one place

Cons:

• Can become unwieldy in larger applications
• All translations load at once (potentially impacting performance)

Component-Based Approach #️⃣

Translations are distributed alongside their components:

my-app/
└── src/
    └── modules/
        ├── feature-a/
        │   └── locale/
        │       ├── en.json
        │       └── es.json
        └── feature-b/
            └── locale/
                ├── en.json
                └── es.json

Pros:

• Better organization in large applications
• Works well with lazy loading
• Teams can own their translations

Cons:

• More complex setup
• Requires additional configuration

For most applications, especially as they grow, the component-based approach offers better maintainability and scalability. However, for smaller applications, the centralized approach might be simpler to start with.

Localazy shows you the path to the original file, so you know what module you are translating.

Choose based on your project size and team structure, with the understanding that you can migrate between approaches as your needs evolve.