---
title: "How to add form submission data to Notion with Next.js"
description: "Learn how to use Netlify forms to add your form submission data to Notion without a server using Next.js."
source: "https://www.netlify.com/blog/form-handling-nextjs-notion/"
last_updated: "2026-07-09T03:49:39.000Z"
---
[Netlify forms](https://www.netlify.com/products/forms/) are a great way to quickly and easily capture submissions to a form, and in this guide you’ll learn how to automatically add your form submissions to a Notion database in a Next.js app.
This guide assumes you already have a basic Next.js site set up, if you don’t, you can read more about this in the [Next.js documentation](https://nextjs.org/docs/getting-started).
## Getting set up with Notion
The first step is getting everything you need to connect to your Notion database. To do this, you need to do to the [Notion integrations page](https://www.notion.com/my-integrations) and create a new integration. Set up an **internal integration** as you don’t want it available to other Notion users. This will give you an Internal Integration Token, which you’ll use for submissions to the API.
Next up is sharing your desired database with the integration as when set up the integration doesn’t have access to any of your databases. To do this, go to the database you want the form submissions to go into and click the share menu in the top right corner, then click the text box and choose your integration from the list.
While you’re here, make a note of the random string of characters in your address bar that comes after the workspace name but before the question mark, this is your database ID.
```
https://www.notion.so/workspacename/dd010e0a312d481e94dbf93d9d81094d?v=... |--------- Database ID --------|
```
## Setting up the form
To start with, set up a normal HTML form as shown below.
```
```
Only two adjustments are needed to get this set up with Netlify
1. Add another property to the `form` element with `data-netlify="true"`
2. Add a hidden input to your form that has `value` the same as `name` on the `form`, like this:
```
```
## Sending the data to Notion
In its current state, the form will work and will send data to Netlify, and you’ll be able to see it in the Dashboard of your project, but for this you’ll go a step further and add it to Notion too.
To do this, in the root level of your project create a folder named `netlify`, inside that one called `functions` and in there, put a file named `submission-created.js`. This is a special name that tells Netlify that this function should run when a submission is created.
The basic structure of a serverless function is like this
```
exports.handler = async function (event) { return { statusCode: 200 }}
```
This will just respond with the OK status code, but you can expand this for your functionality.
To get this all working, you need to install the package `@notionhq/client`, this is a library by Notion that makes working with their API easier. To install it, run:
```
npm install @notionhq/client
```
Now you can import this in `submission-created.js` like this:
```
const {Client} = require("@notionhq/client")
```
Then inside the function, declare a new client with the API token you got before:
```
const notion = new Client({ auth: process.env.NOTION_TOKEN });
```
Now you can use the `event` passed into the function to access the data submitted in the form.
```
const form = JSON.parse(event.body).payload.data
```
This will be an object with keys for each of the inputs you’ve described, so for example `form.name` will be whatever name has been submitted.
Next up is constructing the request to send to Notion, the first thing to do is tell Notion where to put the new record, and this is done with a `parent` key, with database ID inside:
```
const new_row = { parent: { database_id: process.env.DATABASE_ID, }}
```
Then you can add whatever properties you have set up in the database, I’ve set the title column to “Name” and the email column to “Email”, but you can swap these out based on your preference
```
const new_row = { // Parent information properties: { Name: { title: [ { text: { content: form.name, }, }, ], }, Email: { email: form.email, }, },}
```
Each column type has a different way of specifying the data to be inserted, which you can find out on the [Notion documentation](https://developers.notion.com/reference/page#property-value-object). Here the title has the `title` type and email, the `email` type.
Then to create the page, you can use the Notion client you declared before and add pass it this object `new_row`
```
await notion.pages.create(new_row);
```
## Local development
This bit isn’t essential, so skip on to the next section if you don’t want to develop locally.
First up, you need to install the Netlify CLI which allows for running forms, to do this run:
```
npm install netlify-cli -g
```
Then run `netlify login` to authenticate with Netlify and `netlify init` to initialize your project as a Netlify project.
Now, you can run the following command to set up the environment variables:
```
netlify env:set NOTION_TOKEN "yourNotionToken"netlify env:set DATABASE_ID "yourDatabaseID"
```
Finally, running `netlify dev` will run your `dev` command set in `package.json`, but with the addition of all the Netlify features like environment variables and forms.
And doing this has also set you up with deployment, so you don’t need to worry about the next step!
## Deployment
The final step is deploying your project, to do this [sign up for a Netlify account](https://www.netlify.com/) if you don’t have one already, and link the Git repository you’re storing your project in. You’ll need to set two environment variables
- `NOTION_TOKEN` - The internal integration token you got when setting up your Notion integration
- `DATABASE_ID` - The ID of the database you want to insert your data in
Now you can go to the deployed website and fill out the form, you’ll be directed to a page telling you the form was submitted and if you go to your Notion database, you’ll see it in there too!
If you want to see the completed application, you can check out [this GitHub repository](https://github.com/samrobbins85/netlify-next-notion).
### Share
- [X (fka Twitter)](https://twitter.com/intent/tweet?text=Adding form submissions to Notion using Next.js and Netlify&url=https://www.netlify.com/blog/form-handling-nextjs-notion/)
- [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2Fform-handling-nextjs-notion%2F)
- [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/form-handling-nextjs-notion/)
- [Bluesky](https://bsky.app/intent/compose?text=Adding form submissions to Notion using Next.js and Netlify+https://www.netlify.com/blog/form-handling-nextjs-notion/)
* * *
### Tags
- [form handling](/blog/tags/form-handling/)
- [Netlify forms](/blog/tags/netlify-forms/)
- [Next.js](/blog/tags/next.js/)
- [Next.js](/blog/tags/nextjs/)
- [Databases](/blog/tags/databases/)
## Keep reading
Guides & Tutorials December 16, 2021
[
### Accepting form submissions without a server
](/blog/2021/12/16/accepting-form-submissions-without-a-server/)
- 
Phil Hawksworth
News & Announcements August 4, 2016
[
### New backend-less form submissions tab in Netlify
](/blog/2016/08/04/new-backend-less-form-submissions-tab-in-netlify/)
- 
David Calavera
## Recent posts
News & Announcements June 25, 2026
[
### Netlify Functions, designed for Agent Experience
](/blog/netlify-functions-designed-for-agent-experience)
- 
Eduardo Bouças
News & Announcements June 24, 2026
[
### How we measure Netlify’s Agent Experience
](/blog/how-we-measure-netlify-agent-experience)
- 
Sean Roberts
Guides & Tutorials May 15, 2026
[
### How to build a real-time AI chatbot in minutes with Netlify Agent Runners (no backend)
](/blog/how-to-build-a-real-time-ai-chatbot-in-minutes-with-netlify-agent-runners-no-backend)
- 
Nahrin Jalal
### How do the best dev and marketing teams work together?
[Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)