# Crea un formulario de feedback in-app en Next.js > Un formulario de feedback in-app en Next.js: una server action que lee la sesión, toma la página de la petición y reenvía la nota con el usuario incluido. Publicado el 2026-10-25 · https://ikiform.com/es/guides/feedback-form/nextjs Pon un pequeño formulario de cliente con una nota del 1 al 5 en las pantallas sobre las que quieras feedback, y apúntalo a una server action. La action lee el usuario que ha iniciado sesión desde tu cookie de sesión, toma la página del `Referer` de la petición y lo reenvía todo a tu backend de formularios con una clave secreta. El navegador nunca envía quién es el usuario, así que nadie puede mandar feedback haciéndose pasar por otra persona. La [pestaña de Next.js de la guía principal](https://ikiform.com/es/guides/feedback-form.md#form) es un formulario de feedback de página para cualquier visitante. Esta página es para el interior de tu app, donde la gente ha iniciado sesión. Ahí ya sabes quién escribe y en qué pantalla está, así que el formulario hace dos preguntas y el servidor rellena el resto. La configuración del producto, las claves y los dominios permitidos están en la [guía de Next.js de la documentación](https://ikiform.com/es/docs/guides/nextjs.md). ## Qué cambia cuando el usuario ha iniciado sesión Un formulario de feedback público acepta lo que le da el navegador. Un formulario in-app no debería. Si el navegador envía `user_id`, cualquiera puede cambiarlo en las herramientas de desarrollo y mandar feedback como un compañero o un cliente. Cada valor debe venir del sitio en el que se puede confiar para él: | Valor | Viene de | Por qué ahí | | --- | --- | --- | | `rating`, `comment` | El formulario | Solo el usuario los conoce | | `user_id`, `email` | La cookie de sesión, leída en la action | El navegador no puede falsificar una sesión firmada | | `page` | La cabecera `Referer` de la petición de la action | Una server action hace POST a la página que la renderiza, así que la cabecera contiene la URL completa | | `screen` | Una prop que pasa la página, como `projects/[id]/settings` | Agrupa la página de ajustes de cada proyecto bajo un mismo nombre, para que las medias tengan sentido | `screen` es el único valor que pasa por el navegador. Es una etiqueta para agrupar, no un permiso, y la action comprueba su forma antes de guardarlo. Diagrama: Cómo una respuesta de feedback en Next.js obtiene el usuario y la página en el servidor 1. El usuario elige una nota y quizá escribe un comentario. El formulario los envía con el nombre de la pantalla. 2. La server action se ejecuta como un POST a la página donde está el formulario, con la cookie de sesión y la página en Referer. 3. getUser() lee y comprueba la cookie de sesión. Sin una sesión válida, no se envía nada. 4. La action añade el id del usuario, su email y la dirección de la página, y envía a Ikiform con la clave secreta. 5. La respuesta de Ikiform se convierte en el estado de la action: la línea de agradecimiento, o el error con el comentario aún escrito. La sesión se lee al enviar el formulario, no al renderizar la página. La página que rodea al formulario puede seguir siendo estática. ## Configuración del proyecto Cuatro archivos, uno de los cuales probablemente ya tienes. El layout del App Router es el habitual: `Árbol del proyecto`: ```text app/ (app)/ projects/[id]/settings/page.tsx feedback/ actions.ts feedback-form.tsx lib/ user.ts .env.local ``` Crea una clave secreta en **API keys** con el scope `submissions:write` y ponla en `.env.local`. Nunca le pongas el prefijo `NEXT_PUBLIC_`, que la enviaría a todos los navegadores. `.env.local`: ```bash IKIFORM_SECRET_KEY=ik_sk_your_secret_key SESSION_SECRET=the-secret-your-auth-already-uses ``` En la pestaña **Fields** del formulario, pega esta definición. Los usuarios ven los dos primeros campos; tu servidor pone los otros cuatro. Como hay un campo `email`, **Reply** en la notificación va directo al usuario. Formulario: In-app feedback - **¿Qué tal te funciona esta pantalla?** (`rating`, rating, obligatorio) - **¿Qué la haría mejor?** (`comment`, textarea) - **Página** (`page`, url) - **Pantalla** (`screen`, text) - **Usuario** (`user_id`, text) - **Email** (`email`, email) Prueba una nota de `0` o un nombre de campo desconocido y la vista previa responde con el mismo `422` que recibe tu action. ## Constrúyelo ### Lee el usuario en un solo sitio Next.js recomienda una capa de acceso a datos: una única función solo de servidor que lee y comprueba la sesión, usada por todas las actions. El `cache` de React hace que las llamadas repetidas en una misma petición lean la cookie una sola vez. `decrypt` es lo que ya tenga tu código de sesión; con una librería de auth, devuelve aquí su usuario. `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 comprobación de sesión va primero y no lanza errores. Un usuario cuya sesión caducó a mitad de comentario recibe un mensaje y conserva el comentario, no una página de error. - `pageFrom` conserva solo el origen y la ruta del `Referer`. Las query strings de una app suelen llevar ids y tokens que no quieres en una bandeja de feedback. - `screen` debe cumplir un patrón corto con forma de ruta. Cualquier otra cosa se guarda como `unknown`, así que un envío manipulado no puede llenar la columna de basura. - `Origin` reenvía el origen del navegador. En producción es tu dominio; en tu máquina es `localhost`, que es lo que hace gratuitas las pruebas locales, como se explica más abajo. - `AbortSignal.timeout` evita que el botón se quede girando para siempre cuando la red va lenta. ### El formulario `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) => ( ))}