Next.js-Entwickler in Zürich

#KI in einer Next.js-Anwendung: was bei Ihnen in Zürich zuerst zu klären ist

Ein Assistent im Kundenportal, eine Zusammenfassung langer Dokumente, eine Suche, die Fragen beantwortet: Solche Funktionen sind in einer Next.js-Anwendung schnell gebaut. Schwieriger ist, was um den Aufruf herum liegt. Wo liegt der Schlüssel? Wer darf den Endpunkt aufrufen, und wie oft? Welche Daten Ihrer Kundinnen und Kunden erreichen den Modellanbieter? Diese Seite beschreibt, wie ich das in Projekten für Unternehmen in Zürich und der Schweiz angehe. Ich bin ein einzelner Entwickler, arbeite aus Polen, schriftlich und ohne Termine. Layout und Grafik kommen von Ihnen, ich setze sie um.

Next.js ist laut npm-Registry am 11. November 2026 in Version 16.4.6 aktuell (veröffentlicht am 9. November). Die Beispiele unten stammen aus der Dokumentation von Next.js und des AI SDK. Dieses Toolkit von Vercel bietet laut eigener Beschreibung eine einheitliche Schnittstelle für Textgenerierung, strukturierte Ausgaben und Werkzeugaufrufe sowie Hooks für Chat-Oberflächen. Es ist eine Option, keine Pflicht: Wer direkt gegen die API eines Anbieters arbeitet, kommt mit denselben Bausteinen aus.

Foto: Roland zh, CC BY-SA 3.0, Wikimedia Commons.

#Streaming aus einem Route Handler

Die Quickstart-Seite des AI SDK für den App Router zeigt den Kern in wenigen Zeilen. Installiert werden ai und @ai-sdk/react. Der Route Handler liegt unter app/api/chat/route.ts:

import {
  streamText,
  UIMessage,
  convertToModelMessages,
  createUIMessageStreamResponse,
  toUIMessageStream,
} from 'ai';

export async function POST(req: Request) {
  const { messages }: { messages: UIMessage[] } = await req.json();

  const result = streamText({
    model: "anthropic/claude-sonnet-5.5",
    messages: await convertToModelMessages(messages),
  });

  return createUIMessageStreamResponse({
    stream: toUIMessageStream({ stream: result.stream }),
  });
}

Im Browser liest der Hook useChat aus @ai-sdk/react diesen Stream und baut die Nachrichten auf. Nutzer sehen die Antwort Wort für Wort, statt auf die fertige zu warten.

Zwei Dinge fallen beim Lesen der Quellen auf. Erstens verweist die Next.js-Seite zu Route Handlers beim Thema Streaming auf das AI SDK, ihr eigenes Beispiel nutzt aber noch StreamingTextResponse und toAIStream, die der aktuellen Quickstart-Seite des AI SDK nicht mehr vorkommen. Wer ein Beispiel kopiert, muss es gegen die installierte Version prüfen. Das AI SDK steht laut npm-Registry bei Version 7.0.170, und die Hilfsfunktionen haben sich über die Hauptversionen verändert. Zweitens sind Modellname und Anbieter in der Quickstart-Seite austauschbar. Der Anbieter ist eine Entscheidung Ihres Unternehmens, nicht der Technik, und zwar aus den Gründen im Abschnitt zum revDSG weiter unten.

#Der Schlüssel bleibt auf dem Server

Der Schlüssel zum Modellanbieter ist ein Zahlungsmittel. Wer ihn kennt, kann auf Ihre Rechnung Anfragen stellen. Die Next.js-Dokumentation zu Umgebungsvariablen sagt dazu zwei Dinge: Variablen sind standardmässig nur auf dem Server verfügbar. Mit dem Präfix NEXT_PUBLIC_ werden sie beim next build in das JavaScript für den Browser eingebettet. Ein Schlüssel mit diesem Präfix wäre damit für jeden Besucher lesbar.

Dazu kommt die Seite zur Datensicherheit. Sie rät, Module mit sensiblem Code über das Paket server-only zu markieren, damit ein versehentlicher Import in eine Client Component den Build abbricht. Und sie stellt klar: Ein exportiertes Server Action ist per direktem POST erreichbar, nicht nur über Ihre Oberfläche. Nicht verwendete Actions entfernt Next.js zwar aus dem Client-Bundle, trotzdem muss jede Action Anmeldung und Berechtigung selbst prüfen. Das gilt für einen KI-Aufruf besonders, weil jeder unberechtigte Aufruf Geld und Daten kostet.

#Verbrauch pro Anfrage als Entwurfsfrage

Ein KI-Endpunkt unterscheidet sich von einem gewöhnlichen darin, dass eine einzelne Anfrage unterschiedlich viel verbraucht: kurze Frage und kurze Antwort, oder langer Verlauf und lange Antwort. Preise nenne ich hier keine, sie stehen beim Anbieter und ändern sich. Als Entwurfsfrage gibt es fünf Stellschrauben, die ich vor dem Bau mit Ihnen schriftlich festlege:

Die ersten drei Zeilen stehen in der Referenz zu streamText beziehungsweise in der Next.js-Seite zu maxDuration. Laut Next.js nutzen Hosting-Plattformen maxDuration aus dem Build-Ergebnis, um eigene Ausführungslimits zu setzen. Was Ihr Hoster daraus macht, gehört in die Hosting-Frage vor dem Start.

Eine Begrenzung pro Benutzer hat dagegen keinen eingebauten Baustein. Ein Zähler im Arbeitsspeicher einer Serverinstanz zählt falsch, sobald mehrere Instanzen laufen. Der Zähler braucht einen gemeinsamen Speicher, und der ist eine Hosting- und Datenschutzentscheidung, weil dort Kennungen von Benutzern liegen. Ich frage zuerst, was Sie schon betreiben, und baue darauf, statt einen weiteren Dienst einzuführen.

Das AI SDK liefert zudem den Verbrauch zurück: In der Referenz stehen usage und totalUsage mit den Token-Zahlen eines Aufrufs. Wer pro Kunde abrechnen oder nur beobachten will, protokolliert sie im Handler. Ob Sie solche Werte speichern wollen, ist wieder eine Datenschutzfrage.

#Was das revDSG verlangt, wenn Eingaben zu einem Modellanbieter gehen

Sobald Nutzer in ein Eingabefeld schreiben, kann das Personendaten enthalten: einen Namen, eine Vertragsnummer, eine Gesundheitsangabe. Diese Eingabe geht an den Modellanbieter. Das revidierte Datenschutzgesetz (DSG, SR 235.1) gilt seit dem 1. September 2023. Für KI-Funktionen sind fünf Artikel wichtig.

Welche Staaten der Bundesrat als angemessen anerkannt hat, steht laut Art. 8 der Datenschutzverordnung in deren Anhang 1. Ob ein bestimmter Anbieter und ein bestimmter Standort für Ihren Fall genügen, beurteilt Ihre Rechtsberatung. Ich bin Entwickler, kein Anwalt.

Der EDÖB hat auf der Seite KI und Datenschutz (veröffentlicht am 24. September 2025) festgehalten, dass das DSG technologieneutral formuliert und auf KI-gestützte Datenbearbeitungen direkt anwendbar ist. Hersteller, Anbieter und Verwender müssen Zweck, Funktionsweise und Datenquellen transparent ausweisen. Wer mit Sprachmodellen spricht, hat das Recht zu erfahren, ob er mit einer Maschine korrespondiert und ob seine Eingaben zur Verbesserung der Programme oder zu weiteren Zwecken weiterverwendet werden. Bei hohen Risiken verlangt das DSG eine Datenschutz-Folgenabschätzung.

Was daraus technisch folgt, setze ich im Code um:

• Ein sichtbarer Hinweis in der Oberfläche, dass die Antwort von einem Sprachmodell stammt.
• Eine Inventur des Datenflusses: welche Felder im Prompt landen, welche Ausgaben gespeichert werden, welche Protokolle entstehen.
• Filter vor dem Aufruf, wenn bestimmte Angaben den Anbieter nicht erreichen sollen. Ein Beispiel ist eine Kundennummer, die der Handler vor dem Aufruf entfernt.
• Eine Liste der Empfänger und Länder für Ihre Datenschutzerklärung nach Art. 19 DSG.
• Eine schriftliche Vereinbarung mit mir als Auftragsbearbeiter, wenn ich auf Ihre Daten zugreife. Ich nenne vorab, welche Werkzeuge Zugriff erhalten.

Wie ich das Datenschutzgesetz auf Wartung und auf Astro-Websites anwende, steht auf den Seiten Wartung und Support in Zürich und Astro-Entwicklung in Zürich. Hier geht es nur um den KI-Aufruf. Das übrige Angebot rund um KI finden Sie unter KI-Implementierung.

#Wenn der Assistent mehr kann als antworten

Sobald das Modell Werkzeuge aufrufen darf, etwa eine Bestellung nachschlagen, wird aus der Antwortfunktion eine Schnittstelle mit Rechten. Dann gelten dieselben Regeln wie für jeden anderen Zugriff: Das Werkzeug prüft selbst, ob der angemeldete Benutzer diese Bestellung sehen darf, und verlässt sich nicht darauf, dass das Modell die richtige Kennung einsetzt. Die Referenz des AI SDK sieht ein Zeitlimit für einzelne Werkzeuge vor (toolMs), das einen hängenden Aufruf beendet. Schreibende Werkzeuge, die etwas löschen oder versenden, baue ich nur nach einer Bestätigung durch die Benutzerin oder den Benutzer. Im Umfang halte ich fest, welche Werkzeuge es gibt und was sie dürfen.

#Checkliste vor dem Start (auch ohne mich nutzbar)

• Schlüssel ohne NEXT_PUBLIC_-Präfix, nur im Route Handler oder Server Action gelesen
• Anmeldung und Berechtigung im Handler selbst geprüft
• Obergrenze für die Länge der Antwort und ein Abbruch bei geschlossener Verbindung gesetzt
• Zähler pro Benutzer mit gemeinsamem Speicher, falls mehrere Instanzen laufen
• Datenfluss aufgeschrieben: Welche Felder gehen an den Anbieter, in welchen Staat?
• Hinweis in der Oberfläche, dass ein Sprachmodell antwortet
• Datenschutzerklärung nennt Empfänger, Staat und Garantien (Art. 19 Abs. 4 DSG)
• Entscheidung dokumentiert, ob eine Datenschutz-Folgenabschätzung nötig ist
• Beispielcode gegen die installierte Version des AI SDK geprüft

#So läuft ein Projekt mit mir

Alles läuft schriftlich, ohne Gespräche am Telefon oder per Video.

1. Briefing. Sie schicken mir Ihre Anwendung oder Ihr Vorhaben, das Ziel der KI-Funktion und den Termin. Ich stelle meine Rückfragen schriftlich.
2. Umfang und Annahmen. Ich schreibe auf, was dazugehört, was nicht, und was ich von Ihnen voraussetze: Zugang zur Testumgebung, Entscheidung zum Anbieter, Layout und Grafik. Ich starte erst, wenn Sie den Umfang schriftlich bestätigt haben.
3. Aufbau auf einer Testumgebung. Sie sehen den Stand laufend auf einer Vorschau-Adresse. Schlüssel für die Tests stellen Sie bereit und können sie später austauschen.
4. Abnahme. Sie nehmen ab, was im schriftlichen Umfang steht. Wünsche darüber hinaus bekommen ein eigenes Angebot.
5. Start. Ich schalte um und beobachte danach die Fehlerprotokolle.
6. Wartung (optional). Abhängigkeiten und Updates pflege ich auf Wunsch. Das AI SDK und Next.js erscheinen häufig in neuen Versionen.

Wenn Ihre Anwendung auf einem anderen Frontend läuft, passt vielleicht eher Migration von Next.js zu Astro in Zürich oder Headless WordPress. Wo ein Laravel- oder Symfony-Backend die Daten liefert, finden Sie das unter PHP-Entwickler.

#Häufige Fragen

#Kann ich den API-Schlüssel des Modellanbieters im Browser verwenden?

Nein. Der Schlüssel gehört in eine Umgebungsvariable ohne das Präfix NEXT_PUBLIC_ und wird nur in einem Route Handler oder Server Action gelesen. Laut Next.js-Dokumentation sind Variablen standardmässig nur auf dem Server verfügbar, mit dem Präfix werden sie ins JavaScript des Browsers eingebettet.

#Route Handler oder Server Action für einen KI-Chat?

Für einen Chat mit Stream nutze ich einen Route Handler, weil das AI SDK dort eine Stream-Antwort zurückgibt, die der Hook im Browser liest. Ein Server Action passt besser zu einmaligen Aufrufen wie einer Zusammenfassung nach dem Absenden eines Formulars. In beiden Fällen prüfe ich Anmeldung und Berechtigung im Code selbst.

#Gehen Personendaten an den Modellanbieter ins Ausland?

Wenn der Anbieter Server ausserhalb der Schweiz betreibt, ja. Dann greift Art. 16 DSG. Ob ein Staat angemessenen Schutz bietet, steht in Anhang 1 der Datenschutzverordnung. Welche Lösung für Ihren Fall passt, klärt Ihre Rechtsberatung. Ich liefere die Liste, welche Daten wohin fliessen.

#Muss ich Besucher darüber informieren, dass sie mit einer Maschine sprechen?

Der EDÖB schreibt, wer mit Sprachmodellen kommuniziert, habe das Recht zu erfahren, ob er mit einer Maschine korrespondiert und ob seine Eingaben weiterverwendet werden. Ich baue einen sichtbaren Hinweis in die Oberfläche und liefere die Angaben für Ihre Datenschutzerklärung.

#Wie begrenze ich, was ein KI-Endpunkt verbrauchen kann?

Über mehrere Stellen zugleich: eine Obergrenze für die Länge der Antwort pro Aufruf, ein Abbruch bei geschlossener Verbindung, eine Begrenzung pro Benutzer und eine Anmeldung vor dem Aufruf. Wo der Zähler liegt, ist eine Architekturfrage, weil mehrere Serverinstanzen einen gemeinsamen Speicher brauchen.

#Wie arbeiten wir zusammen, wenn Sie aus Polen arbeiten?

Schriftlich. Briefing, Rückfragen, Umfang mit Annahmen, Testumgebung zur Abnahme. Keine Termine, keine Anrufe. Gestaltung und Layout bringen Sie mit, ich setze sie technisch um. Mein erster schriftlicher Vorschlag kostet nichts.

#Schreiben Sie mir

Schicken Sie mir über das Kontaktformular Ihr Vorhaben: die Adresse Ihrer Anwendung oder eine Beschreibung, was die KI-Funktion tun soll, welche Daten Nutzer eingeben, bis wann Sie fertig sein wollen und mit welchem Stack Sie arbeiten. Ich lese Ihre Angaben und frage schriftlich nach, was fehlt. Dann erhalten Sie von mir einen Vorschlag mit Umfang und Annahmen. Für diese Einschätzung zahlen Sie nichts. Wenn eine KI-Funktion bei Ihnen mehr Risiko als Nutzen bringt, sage ich es Ihnen.