samuelkraft/notion-blog-nextjs

Next.js example blog powered by Notion Public API

notion-blog-nextjs's Issues

Support nested block children (e.g. toggle)

The response does not contain nested children blocks, get those separately for all blocks containing has_children.
https://developers.notion.com/docs/working-with-page-content#reading-nested-blocks

Make lists more semantic

Thank you for a great tutorial!

Currently, lists are missing <ul> and <ol>:

notion-blog-nextjs/pages/[id].js

Lines 63 to 69 in ed24ec2

	case "bulleted_list_item":
	case "numbered_list_item":
	return (
	<li>
	<Text text={value.text} />
	</li>
	);

It would be great if you could provide a possible solution to making Notion lists more semantic.

Thank you 🙏

Does this support code blocks?

If I create a code block eg.

// js code block
console.log("hello");

Will it render in Next.js with a JS syntax highlighted code block?

please add support for table block

table block is already supported by notion api
https://developers.notion.com/reference/block#table-blocks

Support the file_block type

The Notion API now supports file blocks. To enable users to use this block without the need to download the files locally, we can use the external file path to redirect users to the site, much like notion already does so. A future feature could be to add a download button that makes a request to AWS to locally download the file from the servers.

How to create "previous" pagination feature

Currently I see the notion that the api supports pagination, but it only helps us to do the next page.

Document pagination: https://developers.notion.com/reference/pagination

I am really looking for a way to do the previous page feature, can you give me an example?

Image block not working

Hi, thanks for this repo! I noticed that the image block no longer works. I think this might be because notion changes the URL after an hour. Do you know of any workarounds?

Error in reading title

Hi,
First of all thanks for the project. I tried with my database. I got an error. Do you have an idea about this?

My object is like this :

text={value.text} or text={value.rich_text}

In the renderBlock function, you tried to get the key corresponding to the value of type.

const value = block[type]

Then you pass the text property of this value object to a <Text> component:

case "paragraph":
  return (<Text text={value.text} />

I don't know if the API has changed since you wrote this, but there is no text property directly under the value object. You have to go through the rich_text property first before you can reach the text property.

{
  "type": "paragraph",
  //...other keys excluded
  "paragraph": {
    "rich_text": [{
      "type": "text",
      "text": {
        "content": "Lacinato kale",
        "link": null
      }
    }],
    "color": "default",
    "children":[{
      "type": "paragraph"
      // ..other keys excluded
    }]
  }
}

So you'll have to do:

case "paragraph":
  return (<Text text={value.rich_text} />

Then destructure the text property in <Text> component.

const Text = ({ text }) => {
  return text.map((value, index) => {
    const { text } = value
  }))
}

Or do I miss something?

[BUG] Nextjs SSG not worked.

when I was building the project, I found that Next SSG not worked. sub pages wasn't builded success.

Route (app)                                Size     First Load JS
┌ ○ /                                      551 B          84.7 kB
└ ● /article/[slug]                        428 B          84.6 kB
+ First Load JS shared by all              78.4 kB
  ├ chunks/596-ce7e8c7c8d41c1a3.js         26 kB
  ├ chunks/fd9d1056-a99b58d3cc150217.js    50.5 kB
  ├ chunks/main-app-f318128f92979073.js    219 B
  └ chunks/webpack-6c6a017659fdd40a.js     1.7 kB

So I noticed that there was something wrong in the generateStaticParams function. when geting the sulg name, the fields was not exist.

// Return a list of `params` to populate the [slug] dynamic segment
export async function generateStaticParams() {
  const database = await getDatabase();
  return database?.map((page) => {
    const slug = page.properties.Slug?.**formula**?.string; // field error
    return ({ id: page.id, slug });
  });
}

I don't know the reason, may notion have upgrade the database definition. so I replaced it with this sentense:

const slug = page.properties.Slug?.rich_text[0].plain_text;

It seems worked.

Route (app)                                Size     First Load JS
┌ ○ /                                      551 B          84.7 kB
└ ● /article/[slug]                        428 B          84.6 kB
    ├ /article/another-blogpost
    ├ /article/hello-world-title
    └ /article/powered-by
+ First Load JS shared by all              78.4 kB
  ├ chunks/596-ce7e8c7c8d41c1a3.js         26 kB
  ├ chunks/fd9d1056-a99b58d3cc150217.js    50.5 kB
  ├ chunks/main-app-f318128f92979073.js    219 B
  └ chunks/webpack-6c6a017659fdd40a.js     1.7 kB

API token is invalid.

Hi,
First of all thanks for the project. I tried with my database.

I take the database id and write it instead. Does it mean "NOTION_TOKEN" from API tokon in this error?

If so, where exactly should I access the "NOTION_TOKEN" value? Because when I tried it with "Internal Integration Token" value, it didn't work either.

Add paragraph empty text lines

When adding an empty line in the content they don't appear in front end even though you see them as empty

tags in the console.
How do we fix this?

Blog Post uses Different ENV Variable

The blog post that goes with this repo mentions using the env variable NOTION_TABLE_ID when the code only seems to reference NOTION_DATABASE_ID. The post didn't have a comment section, so leaving this here.

Blog link: https://samuelkraft.com/blog/building-a-notion-blog-with-public-api

Thanks for the guide + source code, btw.

TypeError: Cannot read properties of undefined (reading 'title')

The title section is not reflected.
Do you know the cause?

ules/react-dom/cjs/react-dom-server.browser.development.js:5946:7) { page: '/' } 80 | <h3 className={styles.postTitle}> 81 | <Link href={/${post.id}`}>

82 |
| ^
83 |
84 |
85 |`

Example Notion Page

Hey Samuel can you give me link to your notion base ?

Trouble on Notion Hosted Image

Love the Notion API as you do! Currently discovering using the Notion API as a CMS. Love the way you process with the blocks and I might take urs as reference especially for the in-text styling/ annotation.

I have a similar approach as you do for the image. Grabbing the url of the image block (which is hosted on s3 by notion) and display it.

Problem

However, I discover that the image sometimes is not loaded on first launch of the page. A refresh is required to load the image. And after that, it is fine for a while even I close it and reopen on new tab or another device. (Like a warmup for waking the image)

I see that your example website have similar issue and I am wondering if you have any clue about it.

I am using vercel for hosting as well.

Demo

First launch of my website powered by Notion API

After a refresh
u

Render column_list and columns

I see you are rendering nested blocks but only one level deep, here in getStaticProps:

     // Retrieve block children for nested blocks (one level deep), for example toggle blocks
      // https://developers.notion.com/docs/working-with-page-content#reading-nested-blocks
      const childBlocks = await Promise.all(
        blocks
          .filter((block: any) => block.has_children)
          .map(async (block: any) => {
            return {
              id: block.id,
              children: await getBlocks(block.id),
            };
          })
      );

...but columns are two levels deep and i'm having so much trouble making this work.
A bit of help on this would be appreciated!

invalid_request_url

Hi,

Your Notion integration example looks promising. Thanks for repo!
Following the tutorial I created a token, a list page, have DB ID as well. given rights to integration.

It fails to display notion content:

NOTION_TOKEN=secret_WOruO6LgJxjahR4O0gxRWP9BR4hxVwFQPZhqI****
NOTION_DATABASE_ID=fc3b5855162b443faff8c016cf****

Node terminal
@notionhq/client warn: request fail { code: 'invalid_request_url', message: 'Invalid request URL.' }
error - APIResponseError: Invalid request URL.

Browser console error:

index.js?46cb:323
Uncaught at buildRequestError (file:///Users/nagysandorantal/Code/nextJs/solidCode-site/node_modules/@notionhq/client/build/src/errors.js:162:16)
at Client.request (file:///Users/nagysandorantal/Code/nextJs/solidCode-site/node_modules/@notionhq/client/build/src/Client.js:304:54)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async getDatabase (webpack-internal:///./lib/notion.js:14:22)
at async getStaticProps (webpack-internal:///./pages/index.js:295:22) .....

Missing Cover images for posts

(First thanks for sharing this starter kit)

Struggling to add a cover image to the blog posts, either in the index or [slug].js file.
Where would you call this from in your template? I have tried several methods but found only errors.

Appreciate any help here.

Code blocks not syntax highlighting

Is there any way to make code blocks have syntax highlighting?

Slug endpoint instead of id

Hello Samuel,

Thank you very much for this good example, I am developing a site based on your example, but I want to make the endpoints of blog posts slug instead of id, for this, when I use the slugify library and implement it as follows, APIResponseError: path failed validation: path.page_id should be a valid uuid error is coming.

index.js

[slug].js

The remaining codes are as you did. How do I get rid of this error? Since I'm just starting out, I can't make sense of it and I couldn't find almost any resources on this subject. You are my only hope. :D

Tabbed blocks don't display

Image render does not support caption

There is currently breaking code where caption is declared and fetched by the API. It appears that Notion may have discontinued support for captions under images or are yet to include it.
Notion API - Image Blocks Further down, captions are used for File Blocks and Bookmark Blocks.

I suggest commenting out/removing the use of captions within the Image block. Let me know if you would like me to contribute.

Collection of Notion Apps and Libraries

Hey Samuel,

wow. Amazing project!

i have started to create a open source project that lists open source projects around the new notion api.
https://github.com/MaaxGr/open-source-notionapi-apps

I have added your Next.JS Blog App to the integration list. Is that okay for you?

Keep going on the amazing work! :)

Kind Regards
Max

Working in local smoothly. Getting prerendering error while deploying to vercel.

info - Compiled successfully
info - Collecting page data...
info - Generating static pages (0/7)
info - Generating static pages (1/7)

Error occurred prerendering page "/05a933dc-114c-4de2-9c30-ee1bd25aca10". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read property 'plain_text' of undefined
at Post (/vercel/path0/.next/server/chunks/851.js:286:65)
at d (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:33:498)
at bb (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:16)
at a.b.render (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:42:43)
at a.b.read (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:83)
at Object.exports.renderToString (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:52:138)
at Object.renderPage (/vercel/path0/node_modules/next/dist/server/render.js:621:45)
at Object.defaultGetInitialProps (/vercel/path0/node_modules/next/dist/server/render.js:301:51)
at Function.getInitialProps (/vercel/path0/.next/server/pages/_document.js:496:20)
at Object.loadGetInitialProps (/vercel/path0/node_modules/next/dist/shared/lib/utils.js:69:29)