# Créer un formulaire de feedback dans l'application avec Next.js > Un formulaire de feedback dans une application Next.js : une server action qui lit la session, tire la page de la requête et transmet une note avec l'utilisateur joint. Publié le 2026-10-25 · https://ikiform.com/fr/guides/feedback-form/nextjs Placez un petit formulaire client avec une note de 1 à 5 sur les écrans où vous voulez du feedback, et reliez-le à une server action. L'action lit l'utilisateur connecté dans votre cookie de session, prend la page dans l'en-tête `Referer` de la requête et transmet le tout à votre backend de formulaires avec une clé secrète. Le navigateur n'envoie jamais l'identité de l'utilisateur : personne ne peut donc envoyer un feedback au nom de quelqu'un d'autre. L'[onglet Next.js du guide principal](https://ikiform.com/fr/guides/feedback-form.md#form) est un formulaire de feedback de page pour tout visiteur. Cette page concerne l'intérieur de votre application, là où les gens sont connectés. Vous savez déjà qui écrit et sur quel écran : le formulaire pose donc deux questions et le serveur complète le reste. La configuration du produit, les clés et les domaines autorisés sont dans le [guide Next.js de la documentation](https://ikiform.com/fr/docs/guides/nextjs.md). ## Ce qui change quand l'utilisateur est connecté Un formulaire de feedback public prend ce que le navigateur lui donne. Un formulaire dans l'application ne devrait pas. Si le navigateur envoie `user_id`, n'importe qui peut le changer dans les outils de développement et envoyer un feedback au nom d'un collègue ou d'un client. Chaque valeur doit venir de la source qui mérite confiance pour elle : | Valeur | Provient de | Pourquoi là | | --- | --- | --- | | `rating`, `comment` | Le formulaire | Seul l'utilisateur les connaît | | `user_id`, `email` | Le cookie de session, lu dans l'action | Le navigateur ne peut pas falsifier une session signée | | `page` | L'en-tête `Referer` de la requête de l'action | Une server action envoie à la page qui l'affiche, donc l'en-tête contient l'URL complète | | `screen` | Une prop transmise par la page, comme `projects/[id]/settings` | Regroupe la page de réglages de chaque projet sous un même nom, pour que les moyennes aient du sens | `screen` est la seule valeur qui passe par le navigateur. C'est une étiquette de regroupement, pas une permission, et l'action vérifie sa forme avant qu'elle ne soit stockée. Schéma : Comment une réponse de feedback Next.js récupère l'utilisateur et la page côté serveur 1. L'utilisateur choisit une note et écrit éventuellement un commentaire. Le formulaire les envoie avec le nom de l'écran. 2. La server action s'exécute comme un POST vers la page du formulaire, avec le cookie de session et la page dans Referer. 3. getUser() lit et vérifie le cookie de session. Sans session valide, rien n'est envoyé. 4. L'action ajoute l'id et l'e-mail de l'utilisateur ainsi que l'adresse de la page, et envoie à Ikiform avec la clé secrète. 5. La réponse d'Ikiform devient l'état de l'action : la ligne de remerciement, ou l'erreur avec le commentaire toujours saisi. La session est lue à l'envoi du formulaire, pas au rendu de la page. La page autour du formulaire peut rester statique. ## Mise en place du projet Quatre fichiers, dont un que vous avez probablement déjà. Le layout de l'App Router est le layout habituel : `Arborescence du projet`: ```text app/ (app)/ projects/[id]/settings/page.tsx feedback/ actions.ts feedback-form.tsx lib/ user.ts .env.local ``` Créez une clé secrète sous **API keys** avec le scope `submissions:write` et placez-la dans `.env.local`. Ne lui donnez jamais de préfixe `NEXT_PUBLIC_`, qui l'enverrait à tous les navigateurs. `.env.local`: ```bash IKIFORM_SECRET_KEY=ik_sk_your_secret_key SESSION_SECRET=the-secret-your-auth-already-uses ``` Dans l'onglet **Fields** du formulaire, collez cette définition. Les utilisateurs voient les deux premiers champs ; votre serveur renseigne les quatre autres. Comme il y a un champ `email`, **Reply** sur la notification écrit directement à l'utilisateur. Formulaire : In-app feedback - **Comment cet écran fonctionne-t-il pour vous ?** (`rating`, rating, obligatoire) - **Qu'est-ce qui l'améliorerait ?** (`comment`, textarea) - **Page** (`page`, url) - **Écran** (`screen`, text) - **Utilisateur** (`user_id`, text) - **E-mail** (`email`, email) Essayez une note de `0` ou un nom de champ inconnu : l'aperçu répond avec le même `422` que reçoit votre action. ## La construire ### Lire l'utilisateur à un seul endroit Next.js recommande une couche d'accès aux données : une seule fonction réservée au serveur qui lit et vérifie la session, utilisée par chaque action. Le `cache` de React fait qu'au sein d'une même requête, les appels répétés ne lisent le cookie qu'une fois. `decrypt` est ce que votre code de session a déjà ; avec une bibliothèque d'authentification, renvoyez plutôt son utilisateur ici. `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; }); ``` ### La 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, }; } ``` - La vérification de session passe en premier et ne lève pas d'exception. Un utilisateur dont la session a expiré en plein commentaire reçoit un message et garde son commentaire, pas une page d'erreur. - `pageFrom` ne garde que l'origine et le chemin de `Referer`. Dans une application, les paramètres d'URL contiennent souvent des id et des tokens que vous ne voulez pas dans une boîte de feedback. - `screen` doit correspondre à un court motif en forme de chemin. Tout le reste est stocké comme `unknown`, pour qu'un envoi forgé ne puisse pas remplir la colonne de déchets. - `Origin` transmet l'origine du navigateur. En production, c'est votre domaine ; sur votre machine, c'est `localhost`, ce qui rend les tests locaux gratuits, comme expliqué plus bas. - `AbortSignal.timeout` évite que le bouton tourne indéfiniment quand le réseau est lent. ### Le formulaire `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) => ( ))}