Next.js-översättningar

A common App Router setup places the locale in the URL and lets the route determine which translations should be used.

Keykit manages the translation content and key lifecycle. Your Next.js routing strategy still decides which locale is active for a request.

Static page copy, headings and other server-rendered strings should be translatable directly from the server.

The translated content is rendered on the server and does not require converting the page into an interactive client component.

import { useKeykit } from '@keykithq/sdk/react';

export default function ProjectsPage() {
  const { translate } = useKeykit();
  return (
    <main>
      <h1>{translate('projects.title', 'Projects')}</h1>
      <p>{translate('projects.description', 'Your translation projects.')}</p>
    </main>
  );
}

Interactive components can use useKeykit while referencing the same translation catalog.

'use client';
import { useKeykit } from '@keykithq/sdk/react';

export function CreateProjectButton() {
  const { translate } = useKeykit();
  return <Button>{translate('projects.actions.create', 'Create')}</Button>;
}

Next.js teams may want runtime freshness or build-time stability. Set delivery: "live" or delivery: "static".