# Next.js でアプリ内フィードバックフォームを作る > Next.js のアプリ内フィードバックフォーム。サーバーアクションがセッションを読み、リクエストからページを取り、ユーザー情報を付けて評価を転送します。 公開日 2026-10-25 · https://ikiform.com/ja/guides/feedback-form/nextjs フィードバックがほしい画面に 1〜5 の評価がある小さなクライアントフォームを置き、サーバーアクションに向けます。アクションはセッション Cookie からログイン中のユーザーを読み、リクエストの `Referer` からページを取り、シークレットキーを付けてすべてをフォームバックエンドに転送します。ブラウザーはユーザーが誰かを送らないので、誰もほかの人になりすましてフィードバックを送れません。 [メインガイドの Next.js タブ](https://ikiform.com/ja/guides/feedback-form.md#form)は、どの訪問者にも向けたページのフィードバックフォームです。このページは、ユーザーがログインしているアプリの内側向けです。そこでは誰が書いていて、どの画面にいるかがすでにわかっているので、フォームは 2 つだけ尋ね、残りはサーバーが埋めます。プロダクトの設定、キー、許可ドメインについては [Next.js のドキュメントガイド](https://ikiform.com/ja/docs/guides/nextjs.md)にあります。 ## ユーザーがログインしていると何が変わるか 公開のフィードバックフォームは、ブラウザーが渡すものを受け取ります。アプリ内のフォームはそうすべきではありません。ブラウザーが `user_id` を送ると、誰でも開発者ツールで書き換えて、同僚や顧客としてフィードバックを送れてしまいます。それぞれの値は、信頼できる場所から取るべきです。 | 値 | 取得元 | そこから取る理由 | | --- | --- | --- | | `rating`, `comment` | フォーム | 本人しか知らない | | `user_id`, `email` | アクションで読むセッション Cookie | ブラウザーは署名付きのセッションを偽造できない | | `page` | アクションのリクエストの `Referer` ヘッダー | サーバーアクションはそれを描画したページに送信するので、ヘッダーに完全な URL が入る | | `screen` | `projects/[id]/settings` のような、ページが渡す prop | すべてのプロジェクトの設定ページを 1 つの名前でまとめるので、平均に意味が出る | ブラウザーを通る値は `screen` だけです。これはグループ分けのためのラベルで、権限ではありません。アクションは保存する前にその形式を確認します。 図: Next.js のフィードバック回答が、サーバーでユーザーとページを取得する仕組み 1. ユーザーがスコアを選び、場合によってはコメントを書きます。フォームはそれを画面名と一緒に送ります。 2. サーバーアクションは、フォームのあるページへの POST として、セッション Cookie と Referer のページ付きで実行されます。 3. getUser() がセッション Cookie を読んで確認します。有効なセッションがなければ、何も送信されません。 4. アクションはユーザーの ID、メールアドレス、ページのアドレスを追加し、シークレットキーを付けて Ikiform に送信します。 5. Ikiform の応答がアクションの状態になります。お礼の一文か、コメントを入力したままのエラーです。 セッションを読むのはページの描画時ではなく、フォームの送信時です。フォームの周りのページは静的なままでかまいません。 ## プロジェクトの準備 ファイルは 4 つで、うち 1 つはおそらくすでにあります。App Router のレイアウトは通常どおりです。 `プロジェクトの構成`: ```text app/ (app)/ projects/[id]/settings/page.tsx feedback/ actions.ts feedback-form.tsx lib/ user.ts .env.local ``` **API keys** で `submissions:write` スコープを持つシークレットキーを作成し、`.env.local` に入れます。`NEXT_PUBLIC_` を先頭に付けてはいけません。付けると、すべてのブラウザーに送られてしまいます。 `.env.local`: ```bash IKIFORM_SECRET_KEY=ik_sk_your_secret_key SESSION_SECRET=the-secret-your-auth-already-uses ``` フォームの **Fields** タブにこの定義を貼り付けます。ユーザーに見えるのは最初の 2 つのフィールドで、残りの 4 つはサーバーが設定します。`email` フィールドがあるので、通知メールで **Reply** を押すとそのままユーザーに返信できます。 フォーム: In-app feedback - **この画面の使い心地はどうですか？** (`rating`, rating, 必須) - **どうすればもっと良くなりますか？** (`comment`, textarea) - **ページ** (`page`, url) - **画面** (`screen`, text) - **ユーザー** (`user_id`, text) - **メールアドレス** (`email`, email) スコアに `0` を入れたり、知らないフィールド名を使ったりすると、プレビューはアクションが受け取るのと同じ `422` を返します。 ## 作ってみる ### ユーザーを 1 か所で読み込む Next.js はデータアクセス層を推奨しています。セッションを読んで確認するサーバー専用の関数を 1 つ用意し、すべてのアクションで使う方法です。React の `cache` を使うと、1 つのリクエスト内で何度呼んでも Cookie の読み込みは 1 回で済みます。`decrypt` はセッションのコードにすでにあるものを使ってください。認証ライブラリを使っているなら、ここでそのユーザーを返します。 `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; }); ``` ### サーバーアクション `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, }; } ``` - セッションの確認は最初に行い、例外は投げません。コメントの途中でセッションが切れたユーザーには、エラーページではなくメッセージが表示され、コメントは残ります。 - `pageFrom` は `Referer` のオリジンとパスだけを残します。アプリのクエリ文字列には、フィードバックの受信箱に入れたくない ID やトークンがよく含まれています。 - `screen` はパスに似た短いパターンに一致する必要があります。それ以外は `unknown` として保存されるので、細工した送信で列をゴミで埋めることはできません。 - `Origin` はブラウザーのオリジンをそのまま渡します。本番では自分のドメイン、手元のマシンでは `localhost` になり、後述のとおり、これでローカルのテストが無料になります。 - `AbortSignal.timeout` で、ネットワークが遅いときにボタンが回り続けるのを防ぎます。 ### フォーム `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) => ( ))}