Save Next.js form submissions to Google Sheets
Use a Server Action so your access key stays on the server and never reaches the browser.
- 1
Get your sheet and access key ready
Create a Google Sheet (headers are optional: we'll add a column for each field) and share it with this address as an Editor:
sheetcapture@appspot.gserviceaccount.comCopy the sheet ID from its URL (the part between
/d/and/edit), and your access key from your account page. No account yet? Start free. - 2
Add your key and sheet ID as environment variables
In .env.local (and in your hosting provider's settings):
SHEETCAPTURE_KEY=YOUR_ACCESS_KEY GOOGLE_SHEET_ID=YOUR_SHEET_ID - 3
Create a Server Action
It runs on your server, so the key is never sent to visitors.
// app/actions.js "use server"; export async function subscribe(formData) { const response = await fetch("https://www.sheetcapture.com/add-row", { method: "POST", headers: { Authorization: `Bearer ${process.env.SHEETCAPTURE_KEY}`, "Content-Type": "application/json", }, body: JSON.stringify({ GoogleSheetID: process.env.GOOGLE_SHEET_ID, data: { Name: formData.get("name"), Email: formData.get("email"), }, }), }); if (!response.ok) { const { error } = await response.json(); throw new Error(error); } } - 4
Use it in a form
No client-side JavaScript is needed for the submission itself.
// app/page.js import { subscribe } from "./actions"; export default function Page() { return ( <form action={subscribe}> <input name="name" placeholder="Your name" required /> <input type="email" name="email" placeholder="you@example.com" required /> <button type="submit">Subscribe</button> </form> ); }
This is the most secure way to use SheetCapture on a website: visitors can't see or reuse your key.
Want every option?
The API docs cover responses, limits and error codes.