samuelkraft / notion-blog-nextjs Goto Github PK
View Code? Open in Web Editor NEWNext.js example blog powered by Notion Public API
Home Page: https://notion-blog-nextjs-coral.vercel.app
License: MIT License
Next.js example blog powered by Notion Public API
Home Page: https://notion-blog-nextjs-coral.vercel.app
License: MIT License
Is there any way to make code blocks have syntax highlighting?
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
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.
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
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?
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 |`
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?
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)
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) .....
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.
table block is already supported by notion api
https://developers.notion.com/reference/block#table-blocks
(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.
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.
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
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.
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.
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?
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.
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?
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.
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?
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
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!
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
It would be great if you could provide a possible solution to making Notion lists more semantic.
Thank you 🙏
Hey Samuel can you give me link to your notion base ?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.