Connect with Next.js App Router
Keep a scoped API token in a server-only Next.js route.
Before you begin
In Panther Hook, open Forms → your form → Setup & delivery → Form setup. Copy its public form key or internal form ID, depending on your integration mode.
Create app/api/contact/route.ts in the App Router and set PANTHER_HOOK_TOKEN as a server-side environment variable.
Start with the setup checklistStep-by-step integration
Step 1: Configure the form
Create a workspace-scoped API token with submissions:create permission. Save it in a server-only secret store and copy the real form ID.
Step 2: Add the integration
Replace the example request body with validated form fields read from the incoming request. Only the server route sends Authorization: Bearer to the management API.
Step 3: Send a safe test
Use test: true on the protected submission request, or use Send test submission from the dashboard before allowing production data.
Step 4: Verify and go live
Open the form’s Submissions tab and select Test data. Confirm received fields, then configure any delivery destinations and verify attempts in Deliveries.
Use the production endpoint only after testing. A successfully stored lead and a successful outbound delivery are two separate states.
Example code
The example below comes from the same Next.js generator used by Form Setup. Replace placeholder IDs and configure required fields for your form.
// app/api/contact/route.ts — server only
export async function POST() {
const body = { email: 'test@example.com', message: 'Hello from Panther Hook' };
const response = await fetch('https://pantherhook.com/api/v1/forms/YOUR_FORM_ID/submissions', {
method: 'POST',
headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${process.env.PANTHER_HOOK_TOKEN}` },
body: JSON.stringify(body),
});
return Response.json(await response.json(), { status: response.status });
}Troubleshooting and security
- A 400 or 422 response can indicate missing or invalid fields. Compare payload keys and form validation rules.
- A 403 response may indicate a missing scope, blocked origin, or authorization rule. Do not bypass restrictions by exposing a private token.
- A 429 response means you reached a request rate limit. Use a bounded backoff rather than retrying continuously.
- A request can be accepted even if an outbound integration is failing; inspect the destination separately in Deliveries.