# Buat formulir feedback dalam aplikasi di Next.js > Formulir feedback dalam aplikasi Next.js: server action yang membaca sesi, mengambil halaman dari request, dan meneruskan rating beserta penggunanya. Terbit 2026-10-25 ยท https://ikiform.com/id/guides/feedback-form/nextjs Taruh formulir klien kecil dengan rating 1 sampai 5 di layar yang ingin Anda mintai feedback, dan arahkan ke server action. Action membaca pengguna yang login dari cookie sesi, mengambil halaman dari `Referer` request, dan meneruskan semuanya ke backend formulir Anda dengan secret key. Browser tidak pernah mengirim siapa penggunanya, sehingga tidak ada yang bisa mengirim feedback atas nama orang lain. [Tab Next.js di panduan utama](https://ikiform.com/id/guides/feedback-form.md#form) adalah formulir feedback halaman untuk pengunjung mana pun. Halaman ini untuk bagian dalam aplikasi Anda, tempat orang sudah login. Di sana Anda sudah tahu siapa yang menulis dan di layar mana mereka berada, jadi formulir mengajukan dua pertanyaan dan server mengisi sisanya. Penyiapan produk, key, dan allowed domains ada di [panduan dokumentasi Next.js](https://ikiform.com/id/docs/guides/nextjs.md). ## Apa yang berubah saat pengguna sudah login Formulir feedback publik menerima apa yang diberikan browser. Formulir di dalam aplikasi seharusnya tidak. Jika browser mengirim `user_id`, siapa pun bisa mengubahnya di dev tools dan mengirim feedback sebagai rekan kerja atau pelanggan. Setiap nilai sebaiknya berasal dari tempat yang bisa dipercaya untuknya: | Nilai | Berasal dari | Mengapa di sana | | --- | --- | --- | | `rating`, `comment` | Formulirnya | Hanya pengguna yang mengetahuinya | | `user_id`, `email` | Cookie sesi, dibaca di action | Browser tidak bisa memalsukan sesi yang ditandatangani | | `page` | Header `Referer` dari request action | Server action mengirim ke halaman yang merendernya, jadi header berisi URL lengkap | | `screen` | Prop yang diteruskan halaman, seperti `projects/[id]/settings` | Mengelompokkan halaman pengaturan setiap proyek di bawah satu nama, sehingga rata-ratanya bermakna | `screen` adalah satu-satunya nilai yang melewati browser. Nilai ini adalah label untuk pengelompokan, bukan izin, dan action memeriksa bentuknya sebelum disimpan. Diagram: Bagaimana jawaban feedback Next.js mendapatkan pengguna dan halaman di server 1. Pengguna memilih skor dan mungkin menulis komentar. Formulir mengirimnya bersama nama layar. 2. Server action berjalan sebagai POST ke halaman tempat formulir berada, dengan cookie sesi dan halaman di Referer. 3. getUser() membaca dan memeriksa cookie sesi. Tanpa sesi yang valid, tidak ada yang dikirim. 4. Action menambahkan ID pengguna, email, dan alamat halaman, lalu mengirim ke Ikiform dengan secret key. 5. Jawaban Ikiform menjadi state action: baris terima kasih, atau error dengan komentar yang masih tertulis. Sesi dibaca saat formulir dikirim, bukan saat halaman dirender. Halaman di sekitar formulir bisa tetap statis. ## Setup proyek Empat file, salah satunya mungkin sudah Anda punya. Layout App Router-nya yang biasa: `Struktur proyek`: ```text app/ (app)/ projects/[id]/settings/page.tsx feedback/ actions.ts feedback-form.tsx lib/ user.ts .env.local ``` Buat secret key di **API keys** dengan scope `submissions:write` dan taruh di `.env.local`. Jangan pernah memberinya awalan `NEXT_PUBLIC_`, yang akan mengirimkannya ke setiap browser. `.env.local`: ```bash IKIFORM_SECRET_KEY=ik_sk_your_secret_key SESSION_SECRET=the-secret-your-auth-already-uses ``` Di tab **Fields** formulir, tempel definisi ini. Pengguna melihat dua field pertama; server Anda mengatur empat lainnya. Karena ada field `email`, **Reply** di notifikasi langsung menuju ke pengguna. Formulir: In-app feedback - **Bagaimana layar ini bekerja untuk Anda?** (`rating`, rating, wajib) - **Apa yang bisa membuatnya lebih baik?** (`comment`, textarea) - **Halaman** (`page`, url) - **Layar** (`screen`, text) - **Pengguna** (`user_id`, text) - **Email** (`email`, email) Coba skor `0` atau nama field yang tidak dikenal, dan preview menjawab dengan `422` yang sama dengan yang diterima action Anda. ## Bangun ### Baca pengguna di satu tempat Next.js menyarankan data access layer: satu fungsi khusus server yang membaca dan memeriksa sesi, dipakai oleh setiap action. `cache` dari React membuat panggilan berulang dalam satu request hanya membaca cookie sekali. `decrypt` adalah apa pun yang sudah dimiliki kode sesi Anda; dengan library auth, kembalikan user dari library itu di sini. `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; }); ``` ### 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, }; } ``` - Pemeriksaan sesi dilakukan paling awal dan tidak melempar exception. Pengguna yang sesinya kedaluwarsa di tengah menulis komentar mendapat pesan dan tetap memegang komentarnya, bukan halaman error. - `pageFrom` hanya menyimpan origin dan path dari `Referer`. Query string di aplikasi sering berisi ID dan token yang tidak Anda inginkan di inbox feedback. - `screen` harus cocok dengan pola pendek mirip path. Selain itu disimpan sebagai `unknown`, sehingga kiriman rekayasa tidak bisa mengisi kolom dengan sampah. - `Origin` meneruskan origin browser. Di produksi nilainya domain Anda; di komputer Anda nilainya `localhost`, yang membuat uji lokal gratis, seperti dijelaskan di bawah. - `AbortSignal.timeout` mencegah tombol berputar selamanya saat jaringan lambat. ### Formulirnya `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) => ( ))}