logo
Get in touch

Languages and Text

Configure all texts and translations for the Sifo template using the messages JSON files.

All visible text on the site is stored in two JSON files:

  • config/messages/en.json — English
  • config/messages/es.json — Spanish

Each file contains sections such as "Header", "Hero", "Features", "Careers", "Hardware", "Contact", "Faq", "Knowledgebase", and "Metadata".

You do not need to edit the React components to change page copy.
Instead, you adjust the values in these JSON files.

How translation keys work

Components use the next-intl library. For example, a component will call:

const t = useTranslations("Hero");
 
return <h1>{t("title")}</h1>;

This means:

  • It looks inside the "Hero" section of the messages file.
  • It reads the "title" key and shows that text.

In config/messages/en.json:

"Hero": {
  "title": "Best Premium Gaming Server Hosting",
  "description": "Lag-free, high-performance servers...",
  "ctaButtonLabel": "Get Started"
}

To change the hero title for English:

  1. Open config/messages/en.json.
  2. Edit "Hero" → "title" to your desired text.
  3. Save the file and refresh the page.

To change it for Spanish, edit the same key in config/messages/es.json.

Special formatting

Some texts use / to highlight words:

"title": "Reliable Server Hosting for all of your /Favorite games/"

The words between slashes (/Favorite games/) are styled differently in the UI (for example, highlighted). You can:

  • Move the slashes around different words.
  • Remove them entirely if you prefer regular text.

Do not remove the surrounding quotes or commas in the JSON.

Page sections and namespaces

Here are some important sections and what they control:

  • "Header" — logo alt text, menu labels, login buttons.
  • "Hero" — home hero title, description, and main button.
  • "Features" — home features section.
  • "PanelFeatures" — control panel section.
  • "Games" — games section title and description.
  • "Locations" — home locations section.
  • "Testimonials" — home testimonials section title/description.
  • "Footer" — footer column titles and link labels.
  • "About" — About page hero, sections, stats, and testimonials title/description.
  • "Careers" — careers page hero text, features titles, and open positions labels (including button texts).
  • "Hardware" — hardware page titles, filter labels, and specs labels.
  • "Contact" — contact page title, description, and card labels.
  • "Faq" — FAQ title, description, and all question/answer pairs.
  • "Knowledgebase" — knowledgebase titles and messages.
  • "Metadata" — site name, title template, per-page titles, descriptions, and keywords for SEO and social previews. See the SEO page for config/seo.ts and how dynamic routes get their metadata.

You can safely edit any of these values to match your brand.

Adding or removing translation keys

When config files reference translation keys (for example titleKey: "feature1Title"), those keys must exist in both:

  • config/messages/en.json
  • config/messages/es.json

Step‑by‑step: add a new key

  1. Add the key in English:
"Features": {
  "title": "Your new title",
  "feature4Title": "New feature",
  "feature4Description": "Description of the new feature"
}
  1. Add the same keys in Spanish:
"Features": {
  "title": "Tu nuevo título",
  "feature4Title": "Nueva característica",
  "feature4Description": "Descripción de la nueva característica"
}
  1. Reference the keys from a config file (for example, in features.ts).

If a key is missing in one of the languages, the page may show an error or fallback text.

Changing the default language

The routing and default locale are configured under app/i18n (for example app/i18n/routing.ts and app/i18n/navigation.ts).
By default, English (en) is used as the primary language.

For most users, you do not need to change these files.
You can simply:

  • Keep English and Spanish as provided, or
  • Edit the texts inside en.json and es.json to match your tone.

If you later want to add a new language, you would:

  1. Create a new JSON file similar to en.json.
  2. Register the new language code in the routing config.
  3. Provide translations for all sections.

This is an advanced step and is usually not required for basic customization.