{"id":28429,"date":"2022-07-21T11:26:13","date_gmt":"2022-07-21T11:26:13","guid":{"rendered":"http:\/\/how-to-build-a-static-page-media-site-with-the-notion-api"},"modified":"2022-07-21T11:26:13","modified_gmt":"2022-07-21T11:26:13","slug":"how-to-build-a-static-page-media-site-with-the-notion-api","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-build-a-static-page-media-site-with-the-notion-api\/","title":{"rendered":"Build a Static Page Media Site with the Notion API"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Building a static media site filled with gallery images from Notion is a way to present to users dynamically generated images from the stored data in Notion and serve the data to the client-side of a Next.js application.<\/p>\n<p><strong>What is Notion?<\/strong><\/p>\n<p>Notion is a note taking application that empowers users to be productive in their workflow.<\/p>\n<p><strong>What is Next.js?<\/strong><\/p>\n<p>Next.js is a React framework that gives you the flexibility of building scalable applications by allowing you render content on the server.<\/p>\n<p>In this article, you will learn how to use the Notion application programming interface (API) to pre-render a static page with the data from Notion by querying the database. For each new data entered in Notion the client-side is updated.<\/p>\n<p>The completed project demo is in a <a href=\"https:\/\/codesandbox.io\/s\/fragrant-field-0rgy57?file=\/pages\/index.js\">CodeSandbox<\/a>. Fork and run the code to get started.<\/p>\n<\/div>\n  \n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/fragrant-field-0rgy57?theme=dark&amp;codemirror=1&amp;highlights=&amp;editorsize=50&amp;fontsize=14&amp;expanddevtools=0&amp;hidedevtools=0&amp;eslint=0&amp;forcerefresh=0&amp;hidenavigation=0&amp;initialpath=%2F&amp;module=&amp;moduleview=0&amp;previewwindow=&amp;view=&amp;runonclick=1\"\n      height=\"500\"\n      style=\"width: 100%;\"\n      title=\"fragrant field\"\n      loading=\"lazy\"\n      allow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\"\n      sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n    ><\/iframe>\n  <\/div>\n\n  <div class=\"wp-block-cloudinary-markdown \"><p>You can check out the <a href=\"https:\/\/3dmlux.sse.codesandbox.io\/\">live demo<\/a><\/p>\n<h2>Prerequisites<\/h2>\n<p>The following are required to complete this tutorial:<\/p>\n<ul>\n<li>Understanding of React and knowing Next.js is necessary<\/li>\n<li>Node.js installed on your local machine. It is required for dependency installation using <code>npm<\/code>\n<\/li>\n<li>Having an account on Notion. <a href=\"https:\/\/www.notion.so\/signup\">Sign up<\/a> is free<\/li>\n<\/ul>\n<h2>Getting Started<\/h2>\n<p>To scaffold a new project with all the files and folders, run the command in your terminal:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">npx create-next-app notion-media-site\n<\/code><\/span><\/pre>\n<p>After the installation, navigate to the created project directory and run the command below to start the development server on port 3000. Open <code>http:\/\/localhost:3000<\/code> in your browser to check this out.<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">cd notion-media-site\n    \nnpm run dev\n<\/code><\/span><\/pre>\n<p>Next, let\u2019s install the Notion SDK for JavaScript by running this command:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">npm<\/span> <span class=\"hljs-selector-tag\">install<\/span> <span class=\"hljs-keyword\">@notionhq<\/span>\/client\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p><code>@notionhq\/client<\/code>: A simple and easy to use client for the Notion API<\/p>\n<h2>Creating the Notion Page<\/h2>\n<p>Before getting started with using the package, let\u2019s create the page for the image gallery on Notion. Open a new browser tab and enter <a href=\"https:\/\/notion.so\">notion.so<\/a> to begin.<\/p>\n<p>Now, you\u2019ll create a table with the following steps in your Notion dashboard.<\/p>\n<ul>\n<li>Click the \u201c+ New page\u201d button<\/li>\n<li>Give your page a name. The name here is not important as it can be called anything<\/li>\n<li>Under the database options, select \u201cTable\u201d<\/li>\n<li>Once it is opened, select the \u201cNew database\u201d button<\/li>\n<li>Rename the column tags and click it to change it \u201cEdit property\u201d type to \u201cFiles &amp; media\u201d<\/li>\n<li>For the <code>Name<\/code> column, give each row a value for the corresponding image<\/li>\n<li>For the <code>img<\/code> column, choose an image file on your local machine<\/li>\n<\/ul>\n<p>If everything was done correctly, your \u201cTable\u201d database should look like this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_23B025A31FC988559C90450200BC9A91280DE91AB821F0EAB9C945F641294D5F_1653495239600_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1036\" height=\"448\"\/><\/p>\n<h2>Creating an Integration<\/h2>\n<p>With the database created in Notion, it is time to create an integration that will enable the Next.js application have access to all the data from Notion by creating an integration.<\/p>\n<p>The steps are outlined as follows:<\/p>\n<ol>\n<li>To develop a new integration, click the \u201cSettings &amp; members\u201d button<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_23B025A31FC988559C90450200BC9A91280DE91AB821F0EAB9C945F641294D5F_1653497010538_settings+and+members.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1274\" height=\"308\"\/><\/p>\n<ol start=\"2\">\n<li>Next, click the links \u201cIntegrations\u201d and \u201cDevelop your own integrations\u201d<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_23B025A31FC988559C90450200BC9A91280DE91AB821F0EAB9C945F641294D5F_1653497837294_integrations.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1122\" height=\"502\"\/><\/p>\n<ol start=\"3\">\n<li>Give your integration a name by clicking the \u201cNew integration\u201d button<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_23B025A31FC988559C90450200BC9A91280DE91AB821F0EAB9C945F641294D5F_1653498963398_Screen+Shot+2022-05-25+at+18.15.34.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1229\" height=\"656\"\/><\/p>\n<ol start=\"4\">\n<li>Once everything has been done correctly with the selected workspace you want to install your integration and its capabilities, click \u201cSubmit\u201d to create the integration<\/li>\n<li>Copy the \u201cInternal Integration Token\u201d which will be used later in development<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_23B025A31FC988559C90450200BC9A91280DE91AB821F0EAB9C945F641294D5F_1653499328858_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"984\" height=\"514\"\/><\/p>\n<ol start=\"6\">\n<li>Let\u2019s get the other environment variable, the Database ID which is 32 characters long from the URL of the page.<\/li>\n<\/ol>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">https:<span class=\"hljs-comment\">\/\/www.notion.so\/myworkspace\/a8aec43384f447ed84390e8e42c2e089?v=...<\/span>\n                                      |--------- Database ID --------|\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<ol start=\"7\">\n<li>The last thing to do here is to share the data from the created Notion page above with the new integration. Click the \u201cShare\u201d button and then invite the integration with the name of the integration and afterwards click the \u201cInvite\u201d button<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_23B025A31FC988559C90450200BC9A91280DE91AB821F0EAB9C945F641294D5F_1653500035463_Screen+Shot+2022-05-25+at+18.32.34.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1271\" height=\"413\"\/><\/p>\n<p>PS: The whole setup is complete, now our app will be able to make requests for any data on the Notion page.<\/p>\n<h2>Creating the Image Gallery<\/h2>\n<p>Back in our project, let\u2019s create an <code>.env<\/code> file for the secret token and database ID. Create the file in the root directory and copy the following code:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">    \/\/ .env\n    \n    NOTION_DATABASE_ID=<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">YOUR<\/span> <span class=\"hljs-attr\">DATABASE<\/span> <span class=\"hljs-attr\">ID<\/span>&gt;<\/span>\n    NOTION_SECRET=<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Internal<\/span> <span class=\"hljs-attr\">Integration<\/span> <span class=\"hljs-attr\">Token<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Next, in the index.js file under the pages folder, copy and paste the following code:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ pages\/index.js<\/span>\n    \n<span class=\"hljs-keyword\">import<\/span> React <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { Client } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@notionhq\/client\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> styles <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/styles\/Home.module.css\"<\/span>;\n\n<span class=\"hljs-keyword\">const<\/span> IndexPage = <span class=\"hljs-function\">(<span class=\"hljs-params\">{ items }<\/span>) =&gt;<\/span> {\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.container}<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">main<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.main}<\/span>&gt;<\/span>\n        {React.Children.toArray(\n          items.map((item) =&gt; (\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.card}<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span>\n                <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">{item.img}<\/span>\n                <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"notion props img\"<\/span>\n                <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.img}<\/span>\n              \/&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.title}<\/span>&gt;<\/span>{item.title}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          ))\n        )}\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">main<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  );\n};\n    \n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> getStaticProps = <span class=\"hljs-keyword\">async<\/span> () =&gt; {\n  <span class=\"hljs-keyword\">const<\/span> notion = <span class=\"hljs-keyword\">new<\/span> Client({\n    <span class=\"hljs-attr\">auth<\/span>: process.env.NOTION_SECRET\n  });\n  \n  <span class=\"hljs-keyword\">const<\/span> data = <span class=\"hljs-keyword\">await<\/span> notion.databases.query({\n    <span class=\"hljs-attr\">database_id<\/span>: process.env.NOTION_DATABASE_ID\n  });\n  <span class=\"hljs-keyword\">const<\/span> images = &#91;];\n  data.results.forEach(<span class=\"hljs-function\">(<span class=\"hljs-params\">result<\/span>) =&gt;<\/span> {\n    images.push({\n      <span class=\"hljs-attr\">img<\/span>: result.properties.img.files&#91;<span class=\"hljs-number\">0<\/span>].file.url,\n      <span class=\"hljs-attr\">title<\/span>: result.properties.Name.title&#91;<span class=\"hljs-number\">0<\/span>].text.content\n    });\n  });\n  <span class=\"hljs-keyword\">return<\/span> {\n    <span class=\"hljs-attr\">props<\/span>: {\n      <span class=\"hljs-attr\">items<\/span>: images\n    }\n  };\n};\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> IndexPage;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>In the code snippet above, the following takes place:<\/p>\n<ul>\n<li>The use of the <code>getStaticProps<\/code> function which allows the pre-rendering of the page at build time using the props returned<\/li>\n<li>A new Notion client created with the auth object passed set to <code>process.env.NOTION_SECRET<\/code>\n<\/li>\n<li>Pass the next configuration object using <code>process.env.NOTION_DATABASE_ID<\/code> and query the items that exist on our page using <code>notion.databases.query<\/code>\n<\/li>\n<li>With an empty array of images, pass the <code>data.results<\/code> array from the data variable and iterate over each item for the <code>img<\/code>, and <code>title<\/code> in the collection<\/li>\n<li>Thereafter, push the new img and title into the images array. The results from this is the passed in props <code>items<\/code> that takes the img and title and render the data on the client-side<\/li>\n<\/ul>\n<p>For the styling of the page, create a folder called <code>styles<\/code> in the root directory. In there, create two files, a <code>globals.css<\/code> and <code>Home.module.css<\/code><\/p>\n<p>Copy and paste the following code from these gist below into the respective files.<\/p>\n<p><code>Global.css<\/code>: <a href=\"https:\/\/gist.github.com\/Terieyenike\/67722f0a174825afb337ccd6fb0e6f99\">https:\/\/gist.github.com\/Terieyenike\/67722f0a174825afb337ccd6fb0e6f99<\/a><\/p>\n<p><code>Home.module.css<\/code>: <a href=\"https:\/\/gist.github.com\/Terieyenike\/2c5c0ce4ecfeda6e45ebbae75841d230\">https:\/\/gist.github.com\/Terieyenike\/2c5c0ce4ecfeda6e45ebbae75841d230<\/a><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_23B025A31FC988559C90450200BC9A91280DE91AB821F0EAB9C945F641294D5F_1653503493741_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1215\" height=\"663\"\/><\/p>\n<h2>Conclusion<\/h2>\n<p>This article discussed the use of the Notion API in creating a static page and how it can be used as a content management tool (CMS) for your frontend applications.<\/p>\n<h2>Learn More<\/h2>\n<ul>\n<li>\n<a href=\"https:\/\/developers.notion.com\/docs\/getting-started\">Getting Started with Notion API<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/developers.notion.com\/reference\/post-database-query\">Query a database<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28430,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[332,134,370,177,212,371],"class_list":["post-28429","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-api","tag-guest-post","tag-image","tag-javascript","tag-next-js","tag-under-review"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Build a Static Page Media Site with the Notion API<\/title>\n<meta name=\"description\" content=\"Building a static media site filled with gallery images from Notion is a way to present to users dynamically generated images from the stored data in Notion and serve the data to the client-side of a Next.js application\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-build-a-static-page-media-site-with-the-notion-api\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build a Static Page Media Site with the Notion API\" \/>\n<meta property=\"og:description\" content=\"Building a static media site filled with gallery images from Notion is a way to present to users dynamically generated images from the stored data in Notion and serve the data to the client-side of a Next.js application\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-build-a-static-page-media-site-with-the-notion-api\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-21T11:26:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924208\/Web_Assets\/blog\/dccfee4a705d09af297b64da1fc1933de3599b66-1215x663-1_2843032b5a\/dccfee4a705d09af297b64da1fc1933de3599b66-1215x663-1_2843032b5a.png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1215\" \/>\n\t<meta property=\"og:image:height\" content=\"663\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-build-a-static-page-media-site-with-the-notion-api\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-build-a-static-page-media-site-with-the-notion-api\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Build a Static Page Media Site with the Notion API\",\"datePublished\":\"2022-07-21T11:26:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-build-a-static-page-media-site-with-the-notion-api\/\"},\"wordCount\":10,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-build-a-static-page-media-site-with-the-notion-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924208\/Web_Assets\/blog\/dccfee4a705d09af297b64da1fc1933de3599b66-1215x663-1_2843032b5a\/dccfee4a705d09af297b64da1fc1933de3599b66-1215x663-1_2843032b5a.png?_i=AA\",\"keywords\":[\"API\",\"Guest Post\",\"Image\",\"Javascript\",\"Next.js\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-build-a-static-page-media-site-with-the-notion-api\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-build-a-static-page-media-site-with-the-notion-api\/\",\"name\":\"Build a Static Page Media Site with the Notion API\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-build-a-static-page-media-site-with-the-notion-api\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-build-a-static-page-media-site-with-the-notion-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924208\/Web_Assets\/blog\/dccfee4a705d09af297b64da1fc1933de3599b66-1215x663-1_2843032b5a\/dccfee4a705d09af297b64da1fc1933de3599b66-1215x663-1_2843032b5a.png?_i=AA\",\"datePublished\":\"2022-07-21T11:26:13+00:00\",\"description\":\"Building a static media site filled with gallery images from Notion is a way to present to users dynamically generated images from the stored data in Notion and serve the data to the client-side of a Next.js application\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-build-a-static-page-media-site-with-the-notion-api\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-build-a-static-page-media-site-with-the-notion-api\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-build-a-static-page-media-site-with-the-notion-api\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924208\/Web_Assets\/blog\/dccfee4a705d09af297b64da1fc1933de3599b66-1215x663-1_2843032b5a\/dccfee4a705d09af297b64da1fc1933de3599b66-1215x663-1_2843032b5a.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924208\/Web_Assets\/blog\/dccfee4a705d09af297b64da1fc1933de3599b66-1215x663-1_2843032b5a\/dccfee4a705d09af297b64da1fc1933de3599b66-1215x663-1_2843032b5a.png?_i=AA\",\"width\":1215,\"height\":663},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-build-a-static-page-media-site-with-the-notion-api\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build a Static Page Media Site with the Notion API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Build a Static Page Media Site with the Notion API","description":"Building a static media site filled with gallery images from Notion is a way to present to users dynamically generated images from the stored data in Notion and serve the data to the client-side of a Next.js application","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-build-a-static-page-media-site-with-the-notion-api\/","og_locale":"en_US","og_type":"article","og_title":"Build a Static Page Media Site with the Notion API","og_description":"Building a static media site filled with gallery images from Notion is a way to present to users dynamically generated images from the stored data in Notion and serve the data to the client-side of a Next.js application","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-build-a-static-page-media-site-with-the-notion-api\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-07-21T11:26:13+00:00","og_image":[{"width":1215,"height":663,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924208\/Web_Assets\/blog\/dccfee4a705d09af297b64da1fc1933de3599b66-1215x663-1_2843032b5a\/dccfee4a705d09af297b64da1fc1933de3599b66-1215x663-1_2843032b5a.png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-build-a-static-page-media-site-with-the-notion-api\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-build-a-static-page-media-site-with-the-notion-api\/"},"author":{"name":"","@id":""},"headline":"Build a Static Page Media Site with the Notion API","datePublished":"2022-07-21T11:26:13+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-build-a-static-page-media-site-with-the-notion-api\/"},"wordCount":10,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-build-a-static-page-media-site-with-the-notion-api\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924208\/Web_Assets\/blog\/dccfee4a705d09af297b64da1fc1933de3599b66-1215x663-1_2843032b5a\/dccfee4a705d09af297b64da1fc1933de3599b66-1215x663-1_2843032b5a.png?_i=AA","keywords":["API","Guest Post","Image","Javascript","Next.js","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-build-a-static-page-media-site-with-the-notion-api\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-build-a-static-page-media-site-with-the-notion-api\/","name":"Build a Static Page Media Site with the Notion API","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-build-a-static-page-media-site-with-the-notion-api\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-build-a-static-page-media-site-with-the-notion-api\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924208\/Web_Assets\/blog\/dccfee4a705d09af297b64da1fc1933de3599b66-1215x663-1_2843032b5a\/dccfee4a705d09af297b64da1fc1933de3599b66-1215x663-1_2843032b5a.png?_i=AA","datePublished":"2022-07-21T11:26:13+00:00","description":"Building a static media site filled with gallery images from Notion is a way to present to users dynamically generated images from the stored data in Notion and serve the data to the client-side of a Next.js application","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-build-a-static-page-media-site-with-the-notion-api\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/how-to-build-a-static-page-media-site-with-the-notion-api\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-build-a-static-page-media-site-with-the-notion-api\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924208\/Web_Assets\/blog\/dccfee4a705d09af297b64da1fc1933de3599b66-1215x663-1_2843032b5a\/dccfee4a705d09af297b64da1fc1933de3599b66-1215x663-1_2843032b5a.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924208\/Web_Assets\/blog\/dccfee4a705d09af297b64da1fc1933de3599b66-1215x663-1_2843032b5a\/dccfee4a705d09af297b64da1fc1933de3599b66-1215x663-1_2843032b5a.png?_i=AA","width":1215,"height":663},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-build-a-static-page-media-site-with-the-notion-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Build a Static Page Media Site with the Notion API"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924208\/Web_Assets\/blog\/dccfee4a705d09af297b64da1fc1933de3599b66-1215x663-1_2843032b5a\/dccfee4a705d09af297b64da1fc1933de3599b66-1215x663-1_2843032b5a.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28429","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28429"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28429\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28430"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28429"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28429"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28429"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}