Translate static frontend copy automatically

Write normal static copy in Server Components. Altified detects safe text during the Next.js build and resolves it for the locale selected by the proxy.

src/app/page.jsx

export default function WelcomePage() {
  return (
    <main>
      <Hero
        eyebrow="New deals"
        title="Welcome to our website"
        description="Browse our latest products"
      />
      <input placeholder="Search all deals..." aria-label="Search deals" />
      <img src="/logo.png" alt="Altified logo" />
    </main>
  );
}

No translation import is required for ordinary static copy in Server Components. Altified registers the copy, resolves it for the current locale, and falls back to the original text if a translation or the service is unavailable.

Literal JSX text translates in any tag, including headings, paragraphs, buttons, and spans.
Common copy props on custom components translate, including title, description, label, eyebrow, subtitle, caption, placeholder, and aria-label.
Safe DOM attributes translate in Server Components: alt, title, aria-label, and placeholder.
Static metadata and browser titles are handled by the metadata integration in the SEO step.
Visit each configured locale route to register and resolve newly discovered copy.

Altified deliberately avoids values that can break an app if translated: href, src, id, className, data-*, route params, slugs, and runtime expressions such as {product.name}.

Client Components

Files with "use client" are automatically rewritten too, using the browser-safe @altified/next/auto entry point. You can still use AltifiedClientProvider to preload translations from the server when headers, navs, or menus must stay client-side.