# Feedback-Formular in der App mit Next.js bauen > Ein Feedback-Formular in einer Next.js-App: eine Server Action, die die Session liest, die Seite aus dem Request nimmt und eine Bewertung mit dem Nutzer weiterleitet. Veröffentlicht am 2026-10-25 · https://ikiform.com/de/guides/feedback-form/nextjs Setze ein kleines Client-Formular mit einer Bewertung von 1 bis 5 auf die Ansichten, zu denen du Feedback willst, und richte es auf eine Server Action aus. Die Action liest den angemeldeten Nutzer aus deinem Session-Cookie, nimmt die Seite aus dem `Referer` des Requests und leitet alles mit einem Secret Key an dein Formular-Backend weiter. Der Browser sendet nie, wer der Nutzer ist, also kann niemand Feedback im Namen eines anderen abgeben. Der [Next.js-Tab der Hauptanleitung](https://ikiform.com/de/guides/feedback-form.md#form) ist ein Seiten-Feedback-Formular für jeden Besucher. Diese Seite ist für das Innere deiner App, wo Leute angemeldet sind. Dort weißt du schon, wer schreibt und auf welcher Ansicht, also stellt das Formular zwei Fragen, und der Server ergänzt den Rest. Projekt-Setup, Keys und erlaubte Domains stehen in der [Next.js-Anleitung der Doku](https://ikiform.com/de/docs/guides/nextjs.md). ## Was sich ändert, wenn der Nutzer angemeldet ist Ein öffentliches Feedback-Formular nimmt, was der Browser ihm gibt. Ein Formular in der App sollte das nicht. Sendet der Browser `user_id`, kann jeder sie in den Entwicklertools ändern und Feedback als Kollege oder Kunde senden. Jeder Wert sollte von der Stelle kommen, der man ihn anvertrauen kann: | Wert | Stammt von | Warum dort | | --- | --- | --- | | `rating`, `comment` | Das Formular | Nur der Nutzer kennt sie | | `user_id`, `email` | Das Session-Cookie, in der Action gelesen | Der Browser kann keine signierte Session fälschen | | `page` | Der `Referer`-Header des Requests der Action | Eine Server Action sendet an die Seite, die sie rendert, also enthält der Header die vollständige URL | | `screen` | Eine Prop, die die Seite übergibt, etwa `projects/[id]/settings` | Fasst die Einstellungsseite jedes Projekts unter einem Namen zusammen, damit Durchschnitte etwas aussagen | `screen` ist der einzige Wert, der durch den Browser geht. Er ist ein Label zum Gruppieren, keine Berechtigung, und die Action prüft seine Form, bevor er gespeichert wird. Diagramm: Wie eine Feedback-Antwort in Next.js auf dem Server Nutzer und Seite erhält 1. Der Nutzer wählt eine Bewertung und schreibt vielleicht einen Kommentar. Das Formular sendet beides mit dem Namen der Ansicht. 2. Die Server Action läuft als POST an die Seite, auf der das Formular steht, mit dem Session-Cookie und der Seite im Referer. 3. getUser() liest und prüft das Session-Cookie. Ohne gültige Session wird nichts gesendet. 4. Die Action ergänzt ID und E-Mail des Nutzers sowie die Seitenadresse und sendet mit dem Secret Key an Ikiform. 5. Die Antwort von Ikiform wird zum State der Action: die Dankeszeile oder der Fehler, mit dem Kommentar noch im Feld. Die Session wird beim Absenden des Formulars gelesen, nicht beim Rendern der Seite. Die Seite um das Formular kann statisch bleiben. ## Projekt-Setup Vier Dateien, von denen du eine wahrscheinlich schon hast. Das Layout des App Routers ist das übliche: `Projektstruktur`: ```text app/ (app)/ projects/[id]/settings/page.tsx feedback/ actions.ts feedback-form.tsx lib/ user.ts .env.local ``` Erstelle unter **API keys** einen Secret Key mit dem Scope `submissions:write` und leg ihn in `.env.local` ab. Gib ihm nie das Präfix `NEXT_PUBLIC_`, das ihn an jeden Browser ausliefern würde. `.env.local`: ```bash IKIFORM_SECRET_KEY=ik_sk_your_secret_key SESSION_SECRET=the-secret-your-auth-already-uses ``` Füge diese Definition im Tab **Fields** des Formulars ein. Nutzer sehen die ersten zwei Felder; dein Server setzt die anderen vier. Weil es ein `email`-Feld gibt, geht **Reply** in der Benachrichtigung direkt an den Nutzer. Formular: In-app feedback - **Wie funktioniert diese Ansicht für dich?** (`rating`, rating, Pflichtfeld) - **Was würde sie besser machen?** (`comment`, textarea) - **Seite** (`page`, url) - **Ansicht** (`screen`, text) - **Nutzer** (`user_id`, text) - **E-Mail** (`email`, email) Probier eine Bewertung von `0` oder einen unbekannten Feldnamen, und die Vorschau antwortet mit demselben `422`, den deine Action zurückbekommt. ## Bauen ### Den Nutzer an einer Stelle lesen Next.js empfiehlt eine Data Access Layer: eine reine Server-Funktion, die die Session liest und prüft und von jeder Action genutzt wird. Reacts `cache` sorgt dafür, dass wiederholte Aufrufe in einem Request das Cookie nur einmal lesen. `decrypt` ist, was dein Session-Code schon mitbringt; mit einer Auth-Bibliothek gibst du hier stattdessen deren Nutzer zurück. `lib/user.ts`: ```ts import "server-only"; import { cookies } from "next/headers"; import { cache } from "react"; import { decrypt } from "@/lib/session"; export interface User { id: string; email: string; } export const getUser = cache(async (): Promise => { const token = (await cookies()).get("session")?.value; if (!token) return null; const session = await decrypt(token); return session?.userId ? { id: session.userId, email: session.email } : null; }); ``` ### Die Server Action `app/feedback/actions.ts`: ```ts "use server"; import { headers } from "next/headers"; import { getUser } from "@/lib/user"; export interface FeedbackState { status: "idle" | "sent" | "error"; message: string; comment?: string; } const SCREEN = /^[a-z0-9/[\]._-]{1,120}$/; function pageFrom(referer: string | null) { try { const url = new URL(referer ?? ""); return url.origin + url.pathname; } catch { return ""; } } export async function sendFeedback(_previous: FeedbackState, formData: FormData): Promise { const comment = String(formData.get("comment") ?? "").trim().slice(0, 4000); const user = await getUser(); if (!user) return { status: "error", message: "Your session ended. Sign in again, then send it.", comment }; const rating = Number(formData.get("rating")); if (!Number.isInteger(rating) || rating < 1 || rating > 5) { return { status: "error", message: "Pick a score from 1 to 5.", comment }; } const request = await headers(); const screen = String(formData.get("screen") ?? ""); let response: Response; try { response = await fetch("https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx", { method: "POST", headers: { Accept: "application/json", "Content-Type": "application/json", Authorization: `Bearer ${process.env.IKIFORM_SECRET_KEY}`, Origin: request.get("origin") ?? "", }, body: JSON.stringify({ rating, comment, page: pageFrom(request.get("referer")), screen: SCREEN.test(screen) ? screen : "unknown", user_id: user.id, email: user.email, _gotcha: String(formData.get("_gotcha") ?? ""), }), signal: AbortSignal.timeout(8000), }); } catch { return { status: "error", message: "We couldn't send it. Try again in a moment.", comment }; } const result = await response.json().catch(() => null); if (result?.ok) return { status: "sent", message: "Thanks. We read every one." }; return { status: "error", message: result?.error?.fields?.comment?.[0] ?? result?.error?.message ?? "We couldn't send it. Try again.", comment, }; } ``` - Die Session-Prüfung kommt zuerst und wirft keine Exception. Ein Nutzer, dessen Session mitten im Kommentar abgelaufen ist, bekommt eine Meldung und behält seinen Kommentar, statt einer Fehlerseite. - `pageFrom` behält vom `Referer` nur Origin und Pfad. Query-Strings enthalten in einer App oft IDs und Tokens, die du nicht in einem Feedback-Posteingang haben willst. - `screen` muss einem kurzen, pfadartigen Pattern entsprechen. Alles andere wird als `unknown` gespeichert, damit ein manipulierter Post die Spalte nicht mit Müll füllen kann. - `Origin` reicht den Origin des Browsers weiter. In Produktion ist das deine Domain; auf deinem Rechner ist es `localhost`, was lokale Tests kostenlos macht, wie unten erklärt. - `AbortSignal.timeout` verhindert, dass der Button bei langsamem Netz ewig lädt. ### Das Formular `app/feedback/feedback-form.tsx`: ```tsx "use client"; import { useActionState } from "react"; import { type FeedbackState, sendFeedback } from "./actions"; const initial: FeedbackState = { status: "idle", message: "" }; const SCORES = ["Broken", "Frustrating", "Fine", "Good", "Great"]; export function FeedbackForm({ screen }: { screen: string }) { const [state, action, pending] = useActionState(sendFeedback, initial); if (state.status === "sent") return

{state.message}

; return (
How is this screen working for you? {SCORES.map((label, index) => ( ))}