This project is a starter to create a web application using Next.js and Notion as a database. The connexion to Notion is made with Notion API.

Setup

1. You need a Notion account, if you don't have one, create yours on https://www.notion.so/login

2. Create an integration. We'll name it YOUR_INTEGRATION for the example, and copy the secret that will be YOUR_NOTION_KEY

3. In notion, create a database (we'll name YOUR_FIRST_DATABASE) with the following fields (if you want to match the actual code for the api/form/query.ts and api/form/update.ts):

• email with email type,
• telephone with phone_number type,
• favorite_number with number type,
• weather with select type
• commentaires with text type

---

3. bis (optional) In notion, create another database (we'll name YOUR_SECOND_DATABASE) with the following fields (if you want to match the actual code for the api/form/updateWed.ts):

• email with email type,
• telephone with phone_number type,
• nb_personnes with number type,
• mairie with select type
• reception with checkbox type
• brunch with checkbox type
• omnivore with number type
• vegetarien with number type
• pesco-vegetarien with number type
• vegetalien with number type
• navette with select type
• allergies with text type
• commentaires with text type
• invité with text type
• +1 with text type
• +2 with text type
• +3 with text type
• +4 with text type
• +5 with text type

---

4. In the settings of this database, go to add connections and select YOUR_INTEGRATION.

5. Create an .env.local or .env file at the root of this projet with:

NOTION_KEY="YOUR_NOTION_KEY"
NOTION_DATABASE_ID="YOUR_NOTION_DATABASE_ID"
NOTION_DATABASE_WED_ID="YOUR_NOTION_OTHER_DATABASE_ID"

• YOUR_NOTION_KEY: you can find it in https://www.notion.so/my-integrations, go check YOUR_INTEGRATION and its secret

• YOUR_NOTION_DATABASE_ID: get the link of your database and copy the id https://www.notion.so/[NOTION_DATABASE_ID]?v=xxxxx

• YOUR_NOTION_OTHER_DATABASE_ID: get the link of your other database and copy the id

Your database is now connected with your integration. You will be able to interract with this database using the Notion API.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

• http://localhost:3000 is an example to query YOUR_FIRST_DATABASE database
• http://localhost:3000/form is an example to update YOUR_FIRST_DATABASE database
• http://localhost:3000/formWed is an example to update YOUR_SECOND_DATABASE database

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Troubleshooting

When you move pages folder to src/ folder, you will need to delete the .next folder and restart the app to remove the cache.