# Build an in-app feedback form in Next.js > An in-app Next.js feedback form: a server action that reads the session, takes the page from the request and forwards a rating with the user attached. Published 2026-10-25 ยท https://ikiform.com/guides/feedback-form/nextjs Put a small client form with a 1 to 5 rating on the screens you want feedback on, and point it at a server action. The action reads the signed-in user from your session cookie, takes the page from the request's `Referer`, and forwards everything to your form backend with a secret key. The browser never sends who the user is, so nobody can file feedback as someone else. The [main guide's Next.js tab](https://ikiform.com/guides/feedback-form.md#form) is a page feedback form for any visitor. This page is for the inside of your app, where people are signed in. There you already know who is writing and which screen they're on, so the form asks two questions and the server fills in the rest. Product setup, keys and allowed domains are in the [Next.js docs guide](https://ikiform.com/docs/guides/nextjs.md). ## What changes when the user is signed in A public feedback form takes what the browser gives it. An in-app form shouldn't. If the browser sends `user_id`, anyone can change it in the dev tools and send feedback as a colleague or a customer. Each value should come from the place that can be trusted with it: | Value | Comes from | Why there | | --- | --- | --- | | `rating`, `comment` | The form | Only the user knows them | | `user_id`, `email` | The session cookie, read in the action | The browser can't forge a signed session | | `page` | The `Referer` header of the action's request | A server action posts to the page that renders it, so the header holds the full URL | | `screen` | A prop the page passes in, such as `projects/[id]/settings` | Groups every project's settings page under one name, so averages mean something | `screen` is the one value that passes through the browser. It's a label for grouping, not a permission, and the action checks its shape before it's stored. Diagram: How a Next.js feedback answer picks up the user and the page on the server 1. The user picks a score and maybe writes a comment. The form sends them with the screen name. 2. The server action runs as a POST to the page the form is on, with the session cookie and the page in Referer. 3. getUser() reads and checks the session cookie. With no valid session, nothing is posted. 4. The action adds the user's id, email and the page address, and posts to Ikiform with the secret key. 5. Ikiform's answer becomes the action state: the thank-you line, or the error with the comment still typed in. The session is read when the form is sent, not when the page renders. The page around the form can stay static. ## Project setup Four files, one of which you probably have already. The App Router layout is the usual one: `Project tree`: ```text app/ (app)/ projects/[id]/settings/page.tsx feedback/ actions.ts feedback-form.tsx lib/ user.ts .env.local ``` Create a secret key under **API keys** with the `submissions:write` scope and put it in `.env.local`. Never give it a `NEXT_PUBLIC_` prefix, which would ship it to every browser. `.env.local`: ```bash IKIFORM_SECRET_KEY=ik_sk_your_secret_key SESSION_SECRET=the-secret-your-auth-already-uses ``` On the form's **Fields** tab, paste this definition. Users see the first two fields; your server sets the other four. Because there's an `email` field, **Reply** on the notification goes straight to the user. Form: In-app feedback - **How is this screen working for you?** (`rating`, rating, required) - **What would make it better?** (`comment`, textarea) - **Page** (`page`, url) - **Screen** (`screen`, text) - **User** (`user_id`, text) - **Email** (`email`, email) Try a score of `0` or an unknown field name and the preview answers with the same `422` your action gets back. ## Build it ### Read the user in one place Next.js recommends a data access layer: one server-only function that reads and checks the session, used by every action. React's `cache` makes repeated calls in one request read the cookie once. `decrypt` is whatever your session code already has; with an auth library, return its user here instead. `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; }); ``` ### The 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, }; } ``` - The session check comes first and doesn't throw. A user whose session expired mid-comment gets a message and keeps the comment, not an error page. - `pageFrom` keeps only the origin and path of `Referer`. Query strings in an app often hold ids and tokens you don't want in a feedback inbox. - `screen` must match a short path-like pattern. Anything else is stored as `unknown`, so a crafted post can't fill the column with junk. - `Origin` passes the browser's origin on. In production it's your domain; on your machine it's `localhost`, which is what makes local tests free, as explained below. - `AbortSignal.timeout` keeps the button from spinning forever when the network is slow. ### The form `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) => ( ))}