Localization & Translations

Prodly is built with full internationalization (i18n) support, allowing you to offer the platform in multiple languages. The interface automatically detects the user’s preferred language, and a language switcher is available for manual selection.

This guide explains how translation files are structured, how to edit existing translations, and how to add a new language to your Prodly instance.

How Localization Works

Prodly uses next-intl for internationalization. All text displayed on the frontend is stored in JSON files and loaded based on the user’s language preference.

Language detection: Automatically detects the user’s browser language and serves the corresponding translation file.
Language switcher: A dropdown menu (usually in the header or footer) allows users to manually switch between available languages.
Fallback language: If a translation key is missing for the selected language, the system falls back to English (en).

Translation Files Location

All translation files are stored in the src/messages/ directory. Each language has its own JSON file named using the ISO language code.


src/messages/
├── en.json  # English
├── ru.json  # Russian
├── de.json  # German
├── es.json  # Spanish
├── fr.json  # French
├── it.json  # Italian
└── pt.json  # Portuguese

The filenames must follow the ISO 639-1 language codes (e.g., en, ru, de). These codes are used by the language switcher and detection logic.

Translation File Structure

Each JSON file contains nested objects that group related translations. Here’s an example from en.json:


{
  "common": {
    "appName": "Prodly",
    "generate": "Generate",
    "login": "Login",
    "signUp": "Get Started",
    "signIn": "Sign in",
    "alreadyHaveAccount": "Already have an account?"
  },
  "footer": {
    "terms": "Terms",
    "privacy": "Privacy",
    "contact": "Contact",
    "madeWith": "Made with ❤️"
  }
}

Key Principles

Namespaces: Translations are grouped by namespace (e.g., common, home, footer, admin, dashboard). This keeps the files organized.

Keys: Use descriptive, camelCase keys that reflect the content (e.g., heroLine1, signUpKeep).

Placeholders: You can use placeholders like {siteName} in translations. These are replaced dynamically in the code.

Editing Existing Translations

To modify any text on the site, simply edit the corresponding JSON file.

Step-by-Step Guide

1. Locate the Text You Want to Change

Find the text on your live site and determine which page or component it belongs to (e.g., the footer, the home page hero, a button).

2. Find the Translation Key

Open the appropriate language file (e.g., en.json for English) and look for the text. Use your browser’s search function (Ctrl+F) to find the exact string or a nearby keyword.

For example, if you want to change the “Generate” button text, search for "Generate" in en.json. You’ll find it under common.generate.

3. Edit the Value

Change the value to your desired text. For example:


{
  "common": {
    "generate": "Create Description"  // Changed from "Generate"
  }
}

4. Repeat for Other Languages

If you have multiple languages enabled, update the same key in each language file (e.g., ru.json, de.json) to keep translations consistent.

5. Save and Deploy

Save the file, commit the changes to your repository, and redeploy your application (or restart the dev server). The changes will appear immediately.

Always test your changes on a staging environment first. Make sure you don’t accidentally break the JSON structure (missing commas, brackets, etc.).

Adding a New Language

To add a new language to Prodly, follow these steps:

1. Create a New JSON File

In the src/messages/ directory, create a new file named with the appropriate ISO language code. For example, to add Dutch, create nl.json.

2. Copy the Structure from English

Copy the entire contents of en.json and paste them into your new file. This ensures you have all the required keys.

3. Translate All Values

Replace the English text with translations in your target language. Leave all keys unchanged – only modify the values.

Example for nl.json:


{
  "common": {
    "appName": "Prodly",
    "generate": "Genereren",
    "login": "Inloggen",
    "signUp": "Aan de slag",
    "signIn": "Aanmelden",
    "alreadyHaveAccount": "Heb je al een account?"
  },
  "home": {
    "title": "Prodly",
    "signIn": "Aanmelden",
    "pricing": "Prijzen",
    "getStarted": "Gratis beginnen",
    "heroLine1": "Schrijf productteksten",
    "heroLine2": "in seconden, niet in uren.",
    // ... and so on for all keys
  }
}

4. Add the Language to the Language Switcher

The language switcher component automatically reads the available files in src/messages/. Once you add nl.json, it should appear in the dropdown. If not, you may need to update the language list in the component (usually located in src/components/language-switcher.tsx or similar).

5. Test the New Language

Switch to your new language using the language switcher.
Verify that all text is displayed correctly.
Check for any missing translations (the system will fall back to English for missing keys).

If you need to support right-to-left (RTL) languages like Arabic, additional CSS adjustments may be required. Contact support for guidance.

Using Translations in Code

Developers can use the useTranslations hook from next-intl to access translations in components.

Basic Usage


import { useTranslations } from 'next-intl';
 
export default function MyComponent() {
  const t = useTranslations('common');
 
  return (
    <button>
      {t('generate')}  {/* Renders: "Generate" (or translated equivalent) */}
    </button>
  );
}

With Parameters


const t = useTranslations('home');
<p>{t('heroLine1')} {t('heroLine2')}</p>

Nested Keys Use dot notation to access deeply nested keys:


const t = useTranslations('footer');
<p>{t('madeWith')}</p>  {/* Renders: "Made with ❤️" */}

Supported Languages

Prodly comes with the following languages pre-configured:

Language	Code	File
English	en	en.json
Russian	ru	ru.json
German	de	de.json
Spanish	es	es.json
French	fr	fr.json
Italian	it	it.json
Portuguese	pt	pt.json

You can add any additional language by following the steps in the previous section.

🆘 Troubleshooting Translations

Problem	Solution
New language doesn’t appear in switcher	Make sure the filename uses the correct ISO code (e.g., `nl.json`, not `dutch.json`). Check that the file is placed in the correct directory.
Some text remains in English	The key may be missing in your translation file. Copy it from `en.json` and add the translation.
JSON syntax error	Use a JSON validator to check your file. Common mistakes: trailing commas, missing quotes, or unescaped characters.
Changes not showing after deployment	Clear your browser cache and hard reload the page. If using Vercel, ensure the deployment succeeded.

Best Practices

Keep keys consistent across all language files. Never rename keys in only one file.
Use placeholders for dynamic values (e.g., Welcome, {name}!) instead of concatenating strings.
Test each language after making changes to ensure nothing is broken.
Consider cultural differences – some phrases may not translate literally; adapt them to sound natural in the target language.

Conclusion

Prodly’s localization system makes it easy to offer your platform in multiple languages. By editing the JSON files in src/messages/, you can customize every piece of text and even add entirely new languages.

For further assistance, contact support@rootly.cc.