Linktree clone using Notion API and Next js

Hello friends,
In this small series, we will be building something similar to linktree. Using Notion API to fetch the data out of a Notion page and displaying it on Next Js.
By using notion page as the data source, user(you) can leverage the features that notion app provides, such as - Easily adding, removing and updating content, and even re-ordering the links(blocks). In the end, we will be deploying it on Vercel.

Pretty exciting, right?

This is a written tutorial for the Notion API with NextJS. Linktree Clone youtube series

By the end, you will learn how to consume data out of a notion page and use it anyway, for this tutorial we will be using next js.
I prefer keeping things short and simple, so it is assumed that you know what Notion is and have a very basic level understanding of Next js.

Step 1: Creating a Notion Page

The first thing we need is a notion page, which will be used as the data source.
In order for you to easily get started, you can duplicate this template
Or use the button on the left to create a new page.

!! While replacing or adding the image block(first block), make sure to use the 'embed' image option, instead of upload, as Notion provides access for only 60min for uploaded images, so it's better to use an external one, more on this later.

Step 2: Creating a new notion integration

In order for you to interact with this page using the Notion api, you need to have an Integration, which has access to this specific page.

1) Goto notion app
2) Click on 'Settings and Members' button on the left
3) Click on 'Integrations' (last button on the opened modal)
4) Click on 'Develop your own integrations'
5) Click on 'New Integration' and give it any name
6) After submitting keep the secret key at some place, as we will later set it as an environment variable in our next js project.
7) After creating the integration, now we just need to share the access of our page to this specific integration. So on the notion page, on right side top, click on 'share' button and 'invite' the new integration(it should be visible as an option). After which you are done!

If you duplicated the template, you're good to go, otherwise you'll need to add some links and image manually(again, make sure that the image is an embedded one and not uploaded)

Step 3: Creating Next js project

Now we need to create a next project.

npx create-next-app linktree-notion

In order to use the Notion API, we are going to use the Js SDK

npm i @notionhq/client

The next thing that we need to do is to add 2 environment variables to our project
1) Notion Secret (Step 2, point 6)
2) Page ID

We need the id of the page which we want to use the data source, it's pretty simple, just open that page on browser, and the last segment of the url is the page id

Create an .env file in the root of your project and add these two.
It should look something like this

After you've all this setup, now we just to make the request and fetch the data.
So, within the index.js (pages folder)

we will be making the requests within the getStaticProps function
We first need to create a new instance of the Notion Client

const notion = new Client({
  auth: process.env.NOTION_SECRET,
});

After this, we just need to fetch the actual data, which includes the Page title and the blocks(image + links)
We cannot fetch both in a single request, so we'll have to make do different calls

const page = await notion.pages.retrieve({
  page_id: process.env.LINKS_PAGE_ID,
});


const blocks = await notion.blocks.children.list({
  block_id: process.env.LINKS_PAGE_ID,
});

So the 'page' contains all the information about the page, within which we'll also be getting the page title
and the 'blocks' will contain all the different blocks on the page.

Make sure that there are no blank blocks, which means there is no empty text block or anything like that.
The one below, is a blank block. Make sure that there are none, in starting and the ending.

So now just need to transform the data, as these two(page and blocks) will have a nested structure.

const title = page.properties.title.title[0].plain_text;const  links = [];
let image = "";

blocks.results.forEach((block) => {
  if (block.type === "image") image =  block.image.external.url;

    if (block.type === "paragraph")
        links.push({
            name: block.paragraph.text[0].plain_text,
            url: block.paragraph.text[0].href,
        });
    });

For more info, you can watch this part of the series in order to better understand the above code.

now we just pass down these three things to our page.

return {
  props: {
     title,
     links,
     image,
    },
  revalidate: 10,
}; 

We will be setting the revalidate to 10 seconds, so that our project can update itself after deployment.
In case, you're wondering why we're not using 'getServerSideProps' instead. Well, we can. However, there is a limitation on Notion API's end. which is

The rate limit for incoming requests is an average of 3 requests per
second.
Notion Docs

So, as we are already making 2 requests (one for the page and one for blocks), it is better to have some throttle in between.

Now, you just need to display the content on your page in any way that you like, or you can watch the last part of the series, it's pretty small plus we will also deploy this project on Vercel.

In case, you want to compare your code with the final one Here is the link

I hope this was helpful,
I would really appreciate if you subscribe to the YT Channel and like and comment on the videos of this series

Connect with me
IG: https://www.instagram.com/desi.codes/
Twitter: https://twitter.com/Desi_codes