Building a personal blog with Next.js and Notion

#notion #nextjs #cms #seo

In this article, we will together build the fastest blog for yourself with Next.js and Notion.

I. Prerequisites

Notion is certainly no stranger to everyone. It is an AI-powered workspace that helps users easily plan, take notes, and integrate with many other applications, making it very convenient.

In terms of the idea, we will use Notion as a CMS to manage post information, and Next.js to display that information for users while leveraging SSR to improve SEO and security.

Knowledge of Next.js
Personal Notion account

II. Create a database and access token in Notion

Select a page in Notion to store the database.
Add a new element and choose Database - Full page:
Create the following fields for the database, specifying their type and purpose as follows (these fields are for demo purposes, you can modify them later):
- Title: Already created as Name, change it to Title
- Tags (Multi-select): Topic tags
- Description (Text): Brief description of the post
- PresentativeMedia (Files & media): To store the featured image for the post
- Slug (Text): Used as the post's URL
- Status (Status): Post status, including Draft, Published
Next, you can access notion-integration to generate a secret token linked to your personal Notion account, which will be used to create the above database. Remember to select only the Read permission: Read content, as shown in the image below:
After creating the notion-integration, the next step is to allow this integration to access the database. In the Connect to section, choose the integration you just created (I just created for-show-sample), as shown in the image below:

III. Create sample records in database

Based on the created database structure, we will create some sample records as follows. Note that the status of the posts should be changed to Published.

IV. Using notion-nextjs-mini-kit

You can follow the instructions to clone and run the NextJs source code on your machine here.
As per the installation instructions, you will need to replace 2 environment variables.
NOTION_TOKEN= NOTION_DATABASE_ID=
With:
- The Notion token is the token generated from Step II.
- To get the database ID from the database we created, simply open the database page in the browser and copy the string as shown in the image.
Run the NextJs application above and you will see the results as follows

V. Create content for the page

Create content for the pages based on the data created in the previous database.
Publish the posts (select share -> publish)
Return to our website, click on one of the previous posts to see the results 🎉

VI. Conclusion

References

notion-nextjs-mini-kit: https://github.com/khaaleoo/notion-nextjs-mini-kit

On this guide, I have shown you how to quickly create a personal blog using NextJs and Notion as a database. If you have any questions or contributions, please leave a comment below. Thank you everyone.

Happy coding! 🙌🏻