How to connect a notion database to a next.js project

How To Do It

Connecting a Notion database to a Next.js project can be a great way to add powerful data management capabilities to your project. With the ability to store, organize, and retrieve data, a Notion database can be a valuable tool for any project. In this article, we will walk through the steps to connect a Notion database to a Next.js project.

First, let's talk about what a Notion database is and why you might want to use one in your Next.js project. Notion is a powerful online productivity tool that lets you create and organize your content in a flexible, customizable way. You can use Notion to create databases, which are essentially tables that allow you to store and manage your data in a structured format.

To connect your Notion database to your Next.js project, you'll need to do the following:

1. Create an account if you don't already have one.

2. Create a new database and add some data to it.

3. Install the notionhq/client npm package in your Next.js project. This package provides a simple JavaScript API that allows you to interact with your Notion database from your Next.js app. I wrote this guide for version 0.4.9 of the notion client. So if not everything works for you, make sure to check the changes for newer versions or use the older version. For most use cases that should be perfectly fine.

    npm install @notionhq/client

4. Next you need to get your Notion API key by going to your account settings and clicking on the "Integrations" tab.

5. Import the notion-client package into your Next.js app and initialize it with your Notion API key. I like to store my API keys in a .env file and use it in my API route like so:

   // pages/api/createRecord
   import { Client } from "@notionhq/client";
   const notion = new Client({ auth: process.env.NOTION_SECRET });

6. Use the notion-client API to query your Notion database and retrieve the data you need. To do so you need the database id for your next database. The easiest way to find your database id if from the URL of your database. To do so, open the database in full page mode and analyze the URL like so:

   You need everything between`.so`and`?v=`
   https://www.notion.so/c81f3684c2df407d9b96740d57ab09fb?v=a7659a10ba2849688a5bcfcb95e71c41
   
   so in this case: `c81f3684c2df407d9b96740d57ab09fb`

7. Once those steps are completed, you can use the notion.pages.create method from the notionhq/client library to insert data into the database. Here is an example of how the code might look:

   // pages/api/createRecord
   import { Client } from "@notionhq/client";
   const notion = new Client({ auth: process.env.NOTION_SECRET });
   
   // add data to notion database on form submit
   export default async (req, res) => {
   	const data = JSON.parse(req.body);
   	// add data to notion database
   	const { name, age } = data;
   
   	try {
   		const response = await notion.pages.create({
   			icon: {
   				type: "emoji",
   				emoji: "🥬",
   			},
   			parent: {
   				type: "database_id",
   				database_id: process.env.NOTION_DATABASE_ID,
   			},
   			properties: {
   				Name: {
   					title: [
   						{
   							text: {
   								content: name,
   							},
   						},
   					],
   				},
   				Age: {
   					number: age,
   				},
   			},
   		});
   		// return success
   		res.status(200).json({ success: true });
   	} catch (error) {
   		console.error(error.body);
   		res.status(500).json({ success: false });
   	}
   };

Why It Makes Sense

It makes sense to use Notion databases in Next.js projects because the databases can be easily integrated into your projects, allowing you to access and display the data collected with your Next.js application. Additionally, they offer a range of useful features, such as the ability to filter and sort data, add rich media, and collaborate with others. This can help you build more functional and user-friendly applications and have a highly accessible low-cost database for your project.

I hope this helps! Let me know if you have any other questions.