GET /v1/langs — Sprachen der Website

Der kleinste Endpoint der API und genau der, auf den dein Sprachumschalter gewartet hat. Er beantwortet eine einzige Frage — „welche Sprachen spricht diese Site gerade?“ — und zwar in exakt der Reihenfolge, die deine Redaktion im CRM festgelegt hat.

Greif zu ihm, wenn du:

• einen Sprachumschalter im Header rendern willst, ohne en und de an fünf Stellen hart zu codieren;
• prüfen willst, ob die Sprache aus der URL (/de/pricing) überhaupt existiert, bevor du sie an ?lang übergibst;
• lokalisierte Routen, hreflang-Tags oder eine Sitemap pro Sprache generieren willst.

#Aktive Sprachen auflisten

#Parameter

Hier gibt's nichts einzustellen: keine Pfad-Parameter, keine Query-Parameter. Nur den Key.

#Beispiel-Request

curl https://back.sitecog.com/content/v1/langs \
  -H "x-crm-key: pk_3f9c2a7e1b4d4c0e8a6f5b2d9c1e7a40"

const res = await fetch('https://back.sitecog.com/content/v1/langs', {
  headers: { 'x-crm-key': 'pk_3f9c2a7e1b4d4c0e8a6f5b2d9c1e7a40' },
});

if (!res.ok) throw new Error(`Content API: ${res.status}`);
const langs = await res.json();

console.log(langs.map((l) => l.key)); // ["en", "de"]

// lib/langs.ts — serverseitiger Helper, eine Minute gecacht
export type Lang = { key: string; title: string; index: number };

export async function getLangs(): Promise<Lang[]> {
  const res = await fetch('https://back.sitecog.com/content/v1/langs', {
    headers: { 'x-crm-key': process.env.CRM_KEY! },
    next: { revalidate: 60 },
  });
  if (!res.ok) throw new Error(`Content API: ${res.status}`);
  return res.json();
}

#Beispiel-Response

[
  { "key": "en", "title": "English", "index": 0 },
  { "key": "de", "title": "German", "index": 1 }
]

#Felder der Response

Ein Array aus Objekten, eins pro aktiver Sprache. Je drei Felder — wir hatten ja versprochen, dass er klein ist.

#Einen Sprachumschalter in React bauen

Das übliche Setup: Die Sprache steckt in der URL (/en/…, /de/…), der Umschalter wird aus /v1/langs gebaut, und jeder Content-Request schickt denselben Code in ?lang. Hier ein Umschalter, der keine einzige Sprache konkret kennt — leg morgen Italienisch im CRM an, und es taucht einfach auf.

type Lang = { key: string; title: string; index: number };

export function LangSwitcher({ langs, current, path }: {
  langs: Lang[];      // direkt aus GET /v1/langs
  current: string;    // die Sprache der angezeigten Seite
  path: string;       // der Rest der URL, z. B. "/pricing"
}) {
  return (
    <nav aria-label="Sprache">
      {langs.map((lang) => (
        <a
          key={lang.key}
          href={`/${lang.key}${path}`}
          hrefLang={lang.key}
          aria-current={lang.key === current ? 'true' : undefined}
        >
          {lang.title}
        </a>
      ))}
    </nav>
  );
}

#Zusammenspiel mit ?lang

Der Key, den du hier bekommst, ist der Key, den du überall sonst schickst. Prüf den Code aus der URL vorher gegen die Liste: Ein unbekannter Code in ?lang ergibt 400 unknown_lang, und niemand will eine Fehlerseite, nur weil jemand /fr/ von Hand eingetippt hat.

import { notFound } from 'next/navigation';
import { getLangs } from '@/lib/langs';
import { LangSwitcher } from '@/components/LangSwitcher';

export default async function Home({ params }: { params: Promise<{ lang: string }> }) {
  const { lang } = await params;
  const langs = await getLangs();

  // Unbekannte Sprache in der URL → ein normales 404 statt eines 400 von der API
  if (!langs.some((l) => l.key === lang)) notFound();

  const res = await fetch(`https://back.sitecog.com/content/v1/pages/home?lang=${lang}`, {
    headers: { 'x-crm-key': process.env.CRM_KEY! },
    next: { revalidate: 60 },
  });
  const page = await res.json();

  return (
    <>
      <LangSwitcher langs={langs} current={lang} path="" />
      <h1>{page.content.hero.content.hero_title.content[lang]}</h1>
    </>
  );
}

Du brauchst einen Default für Besucher, die auf / landen? Deine Entscheidung — viele Sites nehmen einfach die erste Sprache der Liste. Die API selbst wählt nie eine Sprache für dich aus und ersetzt nie eine fehlende Übersetzung; wie du Lücken elegant behandelst, steht unter Sprachen & Fallbacks.

#Fehler

Die vollständige Liste mit Lösungen findest du auf der Seite Fehler.

#Tipps aus der Praxis