braydoncoyer/braydoncoyer.dev

My portfolio powered by Next.js, content sourced from Notion, styled with Tailwind CSS and deployed on Vercel. 🙌

braydoncoyer.dev

• Framework: Next.js
• Styling: Tailwind CSS
• Content: Notion API
• Database: Supabase
• Open Graph Images: Cloudinary
• Newsletter: Revue
• Deployment: Vercel

Project Overview

• components/* - Various components used throughout the site.
• layouts/* - The different layout options available to use on each page.
• lib/* - Short for "library", a collection of helpful utilities or code for external services.
• pages/api/* - API routes powering article reactions, article views, /stats, newsletter subscription, and to generate a sitemap.
• pages/blog/* - Static pre-rendered blog pages that fetch information from the Notion API.
• pages/stats - Site statistics about my website.
• pages/* - All other static pages.
• public/* - Static assets including robots.txt
• styles/* - A handful of global styles, and reusable classes utilzing @apply with Tailwind.
• data/* - a simple object containing global data about the site.

Running Locally

$ git clone https://github.com/braydoncoyer/braydoncoyer.dev.git
$ cd braydoncoyer.dev
$ npm install
$ npm run dev

Create a .env file similar to .env.example and include the appropriate keys.

Notion Article Template

Duplicate the following Notion database, grab the database ID and add it to the environment variables in the .env file.

braydoncoyer.dev's Issues

Blurred Images are square

Almost all of your images are round, but next/image's blurred placeholders can't be styled very easily.
Have you considered putting a wrapper around the images? It'll add a bit of overhead, but It'll look much nicer.

I'm using the following snippet for my website:

import NextImage, { ImageProps } from 'next/image'

interface Props extends ImageProps {
  noRounded?: boolean
}
const Image = (props: Props) => {
  const isStatic = typeof props.src != `string`

  return (
    <div
      className={`${
        !props.noRounded && `rounded-md`
      } overflow-hidden inline-flex`}
    >
      <NextImage
        src={props.src}
        blurDataURL={!isStatic && (props.src as string)}
        placeholder="blur"
        {...props}
      />
    </div>
  )
}
export default Image

Though, I think most people won't notice this if they don't look closely.

Can you provide a complete deployment process? I really like your project.

Error in localy

Hello,

I tried to launch the project and once the dependencies are installed this is what I get?

Could you help me please ?

How are you handling Notion images (and their expiring URLs)?

Hey @braydoncoyer. Sweet project! I'm interested in Notion as a CMS too.
One question if you don't mind: how are you handling Notion images and the fact that their URLs expire after an hour?
I can see that the images on your site leverage Cloudinary, but can't see where that's been implemented (I'm a n00b).
Thanks!

Images are not rendered correctly when opening after a long time

Hey Braydon,
After opening after a long time, the images are not rendered correctly

Can you please help

Hi, I want to know how to fill in the env file and get the following error!

Server Error Error: supabaseUrl is required. This error happened while generating the page. Any console logs will be displayed in the terminal window.

.evn.production　配置的问题

**.evn.production　**
NOTION_SECRET='https://www.notion.so/wangql/4e2fbf75c49f4916b6778b8f47d55f3d?v=2a096a1a397847eda7828bad9688753d'
BLOG_DATABASE_ID='4e2fbf75c49f4916b6778b8f47d55f3d'
TOOLBOX_PAGE_ID=
CHANGELOG_DATABASE_ID=
MEETUP_DATABASE_ID=

NEXT_PUBLIC_SUPABASE_URL='https://eikrrxdpnizytnmnalpp.supabase.co'
NEXT_PUBLIC_SUPABASE_CLIENT_KEY='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImVpa3JyeGRwbml6eXRubW5hbHBwIiwicm9sZSI6ImFub24iLCJpYXQiOjE2Nzk0MzQ1OTMsImV4cCI6MTk5NTAxMDU5M30.tktM0SgbKgYAxKpGk1ysG9MUq9hOJ6c1iOskun84YMI'
SUPABASE_SERVICE_KEY=
REVUE_API_KEY=
TWITTER_BEARER_TOKEN=
PLAUSIBLE_API_TOKEN=
TWITTER_USER_ID=
NEXT_PUBLIC_GOOGLE_ADSENSE=

Server Error
Error: supabaseUrl is required.

This error happened while generating the page. Any console logs will be displayed in the terminal window.

你好，我的.EVN文件配置好了，但是提示supabaseUrl没有找到

[Bug]: Home page content not showing on initial request

Page transition not firing when visiting the home page (which is rendered on the server side) the first time.

I made some errors during deployment

Braydoncoyer, hello. I made some errors during deployment. The error information is as follows.

Error occurred prerendering page "/blog". Read more: https://nextjs.org/docs/messages/prerender-error
--
21:50:54.657 | TypeError: Cannot read property 'multi_select' of undefined
21:50:54.657 | at /vercel/path0/.next/server/chunks/740.js:131:43
21:50:54.657 | at Array.map (<anonymous>)
21:50:54.657 | at convertToArticleList (/vercel/path0/.next/server/chunks/740.js:126:32)
21:50:54.657 | at getStaticProps (/vercel/path0/.next/server/pages/blog.js:490:109)
21:50:54.658 | at processTicksAndRejections (internal/process/task_queues.js:95:5)
21:50:54.658 | at async renderToHTML (/vercel/path0/node_modules/next/dist/server/render.js:488:20)
21:50:54.658 | at async /vercel/path0/node_modules/next/dist/export/worker.js:253:36
21:50:54.658 | at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
21:50:54.659 |  
21:50:54.659 | Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
21:50:54.659 | TypeError: Cannot read property 'multi_select' of undefined
21:50:54.660 | at /vercel/path0/.next/server/chunks/740.js:131:43
21:50:54.660 | at Array.map (<anonymous>)
21:50:54.660 | at convertToArticleList (/vercel/path0/.next/server/chunks/740.js:126:32)
21:50:54.660 | at getStaticProps (/vercel/path0/.next/server/pages/index.js:164:102)
21:50:54.660 | at processTicksAndRejections (internal/process/task_queues.js:95:5)
21:50:54.660 | at async renderToHTML (/vercel/path0/node_modules/next/dist/server/render.js:488:20)
21:50:54.660 | at async /vercel/path0/node_modules/next/dist/export/worker.js:253:36
21:50:54.660 | at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
21:50:54.661 | info  - Generating static pages (5/11)
21:50:55.214 |  
21:50:55.214 | Error occurred prerendering page "/about". Read more: https://nextjs.org/docs/messages/prerender-error
21:50:55.215 | TypeError: Cannot read property 'multi_select' of undefined
21:50:55.215 | at /vercel/path0/.next/server/chunks/740.js:131:43
21:50:55.215 | at Array.map (<anonymous>)
21:50:55.215 | at convertToArticleList (/vercel/path0/.next/server/chunks/740.js:126:32)
21:50:55.215 | at getStaticProps (/vercel/path0/.next/server/pages/about.js:334:102)
21:50:55.215 | at processTicksAndRejections (internal/process/task_queues.js:95:5)
21:50:55.215 | at async renderToHTML (/vercel/path0/node_modules/next/dist/server/render.js:488:20)
21:50:55.215 | at async /vercel/path0/node_modules/next/dist/export/worker.js:253:36
21:50:55.215 | at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
21:50:55.219 | info  - Generating static pages (8/11)
21:50:55.236 |  
21:50:55.237 | Error occurred prerendering page "/blog/test". Read more: https://nextjs.org/docs/messages/prerender-error
21:50:55.237 | TypeError: Cannot read property 'profile_image_url' of undefined
21:50:55.237 | at getTwitterProfilePicture (/vercel/path0/.next/server/pages/blog/[slug].js:619:28)
21:50:55.237 | at processTicksAndRejections (internal/process/task_queues.js:95:5)
21:50:55.237 | at async getStaticProps (/vercel/path0/.next/server/pages/blog/[slug].js:1105:28)
21:50:55.237 | at async renderToHTML (/vercel/path0/node_modules/next/dist/server/render.js:488:20)
21:50:55.237 | at async /vercel/path0/node_modules/next/dist/export/worker.js:253:36
21:50:55.237 | at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
21:50:55.239 |  
21:50:55.240 | Error occurred prerendering page "/community-wall". Read more: https://nextjs.org/docs/messages/prerender-error
21:50:55.240 | TypeError: Cannot read property 'messages' of null
21:50:55.240 | at CommunityWall (/vercel/path0/.next/server/pages/community-wall.js:327:42)
21:50:55.240 | at d (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:33:498)
21:50:55.240 | at a.b.render (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:42:43)
21:50:55.240 | at a.b.read (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:83)
21:50:55.240 | at Object.exports.renderToString (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:52:138)
21:50:55.240 | at renderDocument (/vercel/path0/node_modules/next/dist/server/render.js:847:47)
21:50:55.240 | at renderToHTML (/vercel/path0/node_modules/next/dist/server/render.js:948:34)
21:50:55.241 | at processTicksAndRejections (internal/process/task_queues.js:95:5)
21:50:55.241 | at async /vercel/path0/node_modules/next/dist/export/worker.js:253:36
21:50:55.241 |  
21:50:55.241 | > Build error occurred
21:50:55.241 | info  - Generating static pages (11/11)
21:50:55.242 | Error: Export encountered errors on following paths:
21:50:55.243 | /
21:50:55.243 | /about
21:50:55.243 | /blog
21:50:55.243 | /blog/[slug]: /blog/test
21:50:55.243 | /community-wall
21:50:55.243 | at /vercel/path0/node_modules/next/dist/export/index.js:397:19
21:50:55.244 | at runMicrotasks (<anonymous>)
21:50:55.244 | at processTicksAndRejections (internal/process/task_queues.js:95:5)
21:50:55.244 | at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
21:50:55.244 | at async /vercel/path0/node_modules/next/dist/build/index.js:1010:17
21:50:55.244 | at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
21:50:55.244 | at async /vercel/path0/node_modules/next/dist/build/index.js:886:13
21:50:55.244 | at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
21:50:55.244 | at async Object.build [as default] (/vercel/path0/node_modules/next/dist/build/index.js:55:25)
21:50:55.286 | error Command failed with exit code 1.
21:50:55.287 | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
21:50:55.297 | Error: Command "yarn run build" exited with 1

After checking for a long time, I don't know where the problem is. I really hope to get your help. In addition, can you briefly share the notation format of database page and change page? Although I speculated about the format of database page and change page according to your GitHub code, I'm afraid I didn't get the format right

Cloudflare pages deployment

First of all thank you for this awesome blog. It deployed successfully to Netlify, but recently I switched to Cloudflare but a problem remains; anyone managed to deploy on Cloudflare pages? I managed to get a successfull build, but the website returns a 404. Any ideas?

here is some of the log:

<pre class="c_sn c_bv c_uj c_jj c_uh c_ui c_dd c_vr c_zi c_zj c_zk c_fa c_fb c_yy c_bx c_zl" style="box-sizing: border-box; border-radius: 0px; color: rgb(49, 49, 49); display: block; font-size: 12px; margin: 0px; overflow: auto; padding: 16px 32px; width: 1124.8px; background-color: rgb(242, 242, 242); border-width: 0px 0px 1px; border-style: solid; border-color: rgb(217, 217, 217); border-image: initial; font-family: monaco, courier, monospace; height: 500px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">
01:37:06.255 | Cloning repository...
-- | --
01:37:07.405 | From https://github.com/myurtsev/EA-Nextjs-Blog
01:37:07.406 | * branch            4a1bcc5f11aa4ca839c45ee69d2ff1ae881b99bb -> FETCH_HEAD
01:37:07.406 |  
01:37:07.454 | HEAD is now at 4a1bcc5 custom build command
01:37:07.455 |  
01:37:07.547 |  
01:37:07.548 | Using v2 root directory strategy
01:37:07.577 | Success: Finished cloning repository files
01:37:08.689 | Detected the following tools from environment: [email protected], [email protected]
01:37:08.689 | Installing nodejs 16.18.0
01:37:09.783 | Trying to update node-build... ok
01:37:10.010 | Downloading node-v16.18.0-linux-x64.tar.gz...
01:37:10.011 | -> https://nodejs.org/dist/v16.18.0/node-v16.18.0-linux-x64.tar.gz
01:37:11.493 |  
01:37:11.493 | WARNING: node-v16.18.0-linux-x64 is in LTS Maintenance mode and nearing its end of life.
01:37:11.493 | It only receives *critical* security updates, *critical* bug fixes and documentation updates.
01:37:11.493 |  
01:37:11.493 | Installing node-v16.18.0-linux-x64...
01:37:11.823 | Installed node-v16.18.0-linux-x64 to /opt/buildhome/.asdf/installs/nodejs/16.18.0
01:37:11.824 |  
01:37:13.035 | Installing project dependencies: npm clean-install --progress=false
01:37:14.149 | npm WARN EBADENGINE Unsupported engine {
01:37:14.150 | npm WARN EBADENGINE   package: '[email protected]',
01:37:14.150 | npm WARN EBADENGINE   required: { node: '>= 18' },
01:37:14.150 | npm WARN EBADENGINE   current: { node: 'v16.18.0', npm: '8.19.2' }
01:37:14.150 | npm WARN EBADENGINE }
01:37:19.663 | npm WARN deprecated @npmcli/[email protected]: This functionality has been moved to @npmcli/fs
01:38:58.299 |  
01:38:58.299 | > prepare
01:38:58.300 | > husky install
01:38:58.300 |  
01:38:58.380 | husky - Git hooks installed
01:38:58.418 |  
01:38:58.419 | added 728 packages, and audited 730 packages in 2m
01:38:58.419 |  
01:38:58.419 | 162 packages are looking for funding
01:38:58.419 | run `npm fund` for details
01:38:58.465 |  
01:38:58.466 | 6 vulnerabilities (2 low, 4 moderate)
01:38:58.466 |  
01:38:58.466 | To address issues that do not require attention, run:
01:38:58.466 | npm audit fix
01:38:58.466 |  
01:38:58.466 | To address all issues, run:
01:38:58.467 | npm audit fix --force
01:38:58.467 |  
01:38:58.467 | Run `npm audit` for details.
01:38:58.481 | Executing user command: npm run build && rm -rf .next/cache
01:38:59.125 |  
01:38:59.125 | > prebuild
01:38:59.126 | > npx upload-notion-images-to-cloudinary
01:38:59.126 |  
01:38:59.883 | [upload-notion-images-to-cloudinary][DEBUG] Fetching pages of database 74ff571f6c72467db4403d0f16936389
01:39:01.817 | [upload-notion-images-to-cloudinary][DEBUG] 1690af00-c625-4701-a82c-9530a309f707: cover image already not hosted in Notion
01:39:01.818 | [upload-notion-images-to-cloudinary][DEBUG] 1690af00-c625-4701-a82c-9530a309f707: fetching image blocks...
01:39:02.003 | [upload-notion-images-to-cloudinary][DEBUG] Found 0
01:39:02.004 | [upload-notion-images-to-cloudinary][DEBUG] cb55192e-d4cb-4738-b985-3d2bba2dc74f: cover image already not hosted in Notion
01:39:02.004 | [upload-notion-images-to-cloudinary][DEBUG] cb55192e-d4cb-4738-b985-3d2bba2dc74f: fetching image blocks...
01:39:02.095 | [upload-notion-images-to-cloudinary][DEBUG] Found 0
01:39:02.095 | [upload-notion-images-to-cloudinary][DEBUG] bcef44bc-43de-4806-9a03-676e90a18e06: cover image already not hosted in Notion
01:39:02.095 | [upload-notion-images-to-cloudinary][DEBUG] bcef44bc-43de-4806-9a03-676e90a18e06: fetching image blocks...
01:39:02.218 | [upload-notion-images-to-cloudinary][DEBUG] Found 0
01:39:02.219 | [upload-notion-images-to-cloudinary][DEBUG] 41cfbcee-ffda-4b15-9da1-c908d17a2512: cover image already not hosted in Notion
01:39:02.219 | [upload-notion-images-to-cloudinary][DEBUG] 41cfbcee-ffda-4b15-9da1-c908d17a2512: fetching image blocks...
01:39:03.129 | [upload-notion-images-to-cloudinary][DEBUG] Found 0
01:39:03.129 | [upload-notion-images-to-cloudinary][DEBUG] 694939b6-d1c4-402c-8741-e0402b26789e: cover image already not hosted in Notion
01:39:03.129 | [upload-notion-images-to-cloudinary][DEBUG] 694939b6-d1c4-402c-8741-e0402b26789e: fetching image blocks...
01:39:03.205 | [upload-notion-images-to-cloudinary][DEBUG] Found 0
01:39:03.205 | [upload-notion-images-to-cloudinary][DEBUG] 5fbccb7b-9c3f-44f2-82c6-298db602c015: cover image already not hosted in Notion
01:39:03.205 | [upload-notion-images-to-cloudinary][DEBUG] 5fbccb7b-9c3f-44f2-82c6-298db602c015: fetching image blocks...
01:39:03.395 | [upload-notion-images-to-cloudinary][DEBUG] Found 0
01:39:03.395 | [upload-notion-images-to-cloudinary][DEBUG] d1df3b68-f6cf-4e69-bfa3-5d0d4f12e99e: cover image already not hosted in Notion
01:39:03.395 | [upload-notion-images-to-cloudinary][DEBUG] d1df3b68-f6cf-4e69-bfa3-5d0d4f12e99e: fetching image blocks...
01:39:03.485 | [upload-notion-images-to-cloudinary][DEBUG] Found 0
01:39:03.486 | [upload-notion-images-to-cloudinary][DEBUG] fb0db01b-76b8-46c5-b907-9114099100e6: cover image already not hosted in Notion
01:39:03.486 | [upload-notion-images-to-cloudinary][DEBUG] fb0db01b-76b8-46c5-b907-9114099100e6: fetching image blocks...
01:39:03.627 | [upload-notion-images-to-cloudinary][DEBUG] Found 0
01:39:03.628 | [upload-notion-images-to-cloudinary][DEBUG] End
01:39:03.643 |  
01:39:03.644 | > build
01:39:03.644 | > next build
01:39:03.644 |  
01:39:04.044 | - info Loaded env from /opt/buildhome/repo/.env.production
01:39:04.045 | - info Loaded env from /opt/buildhome/repo/.env
01:39:04.283 | - warn No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
01:39:04.288 | Attention: Next.js now collects completely anonymous telemetry regarding usage.
01:39:04.288 | This information is used to shape Next.js' roadmap and prioritize features.
01:39:04.288 | You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
01:39:04.289 | https://nextjs.org/telemetry
01:39:04.289 |  
01:39:04.396 | - info Linting and checking validity of types...
01:39:07.060 |  
01:39:07.060 | ./pages/api/og.tsx
01:39:07.060 | 193:23  Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element
01:39:07.060 |  
01:39:07.060 | ./pages/blog/[slug].tsx
01:39:07.060 | 292:15  Warning: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.  jsx-a11y/alt-text
01:39:07.061 | 292:15  Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element
01:39:07.061 |  
01:39:07.061 | ./pages/blog/index.tsx
01:39:07.061 | 54:15  Warning: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.  jsx-a11y/alt-text
01:39:07.061 | 54:15  Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element
01:39:07.061 |  
01:39:07.062 | ./components/CustomLink.tsx
01:39:07.062 | 46:5  Warning: React Hook useCallback has a missing dependency: 'plausible'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
01:39:07.062 |  
01:39:07.062 | ./lib/hooks/useArticleReactions.ts
01:39:07.062 | 51:6  Warning: React Hook useEffect has a missing dependency: 'getReactionsFromLocalStorage'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
01:39:07.062 |  
01:39:07.063 | info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
01:39:09.391 | - info Creating an optimized production build...
01:39:09.577 | - warn You are using an experimental edge runtime, the API might change.
01:39:25.346 | <w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (830kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
01:39:31.574 | <w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules\|/opt/buildhome/repo/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[1].oneOf[13].use[1]!/opt/buildhome/repo/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[1].oneOf[13].use[2]!/opt/buildhome/repo/styles/globals.css': No serializer registered for Warning
01:39:31.574 | <w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> Array { 3 items } -> webpack/lib/ModuleWarning -> Warning
01:39:32.191 | - warn Compiled with warnings
01:39:32.191 |  
01:39:32.192 | ./styles/globals.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[1].oneOf[13].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[1].oneOf[13].use[2]!./styles/globals.css
01:39:32.192 | Warning
01:39:32.192 |  
01:39:32.192 | (1:1) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.
01:39:32.192 |  
01:39:32.192 | Import trace for requested module:
01:39:32.193 | ./styles/globals.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[1].oneOf[13].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[1].oneOf[13].use[2]!./styles/globals.css
01:39:32.193 | ./styles/globals.css
01:39:32.193 |  
01:39:32.193 | ./styles/globals.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[1].oneOf[13].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[1].oneOf[13].use[2]!./styles/globals.css
01:39:32.193 | Warning
01:39:32.193 |  
01:39:32.193 | (1:1) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.
01:39:32.194 |  
01:39:32.194 | Import trace for requested module:
01:39:32.194 | ./styles/globals.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[1].oneOf[13].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[1].oneOf[13].use[2]!./styles/globals.css
01:39:32.194 | ./styles/globals.css
01:39:32.194 |  
01:39:32.194 | ./styles/globals.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[1].oneOf[13].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[1].oneOf[13].use[2]!./styles/globals.css
01:39:32.194 | - info Collecting page data...
01:39:32.195 | Warning
01:39:32.195 |  
01:39:32.195 | (1:1) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.
01:39:32.195 |  
01:39:32.196 | Import trace for requested module:
01:39:32.196 | ./styles/globals.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[1].oneOf[13].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[1].oneOf[13].use[2]!./styles/globals.css
01:39:32.197 | ./styles/globals.css
01:39:32.197 |  
01:39:32.197 | ./node_modules/next/dist/build/webpack/loaders/next-edge-function-loader.js?absolutePagePath=private-next-pages%2Fapi%2Fviews%2F%5Bslug%5D.ts&page=%2Fapi%2Fviews%2F%5Bslug%5D&rootDir=%2Fopt%2Fbuildhome%2Frepo&preferredRegion=&middlewareConfig=e30%3D!
01:39:32.197 | Attempted import error: 'private-next-pages/api/views/[slug].ts' does not contain a default export (imported as 'handler').
01:39:32.197 |  
01:39:32.197 | ./node_modules/next/dist/build/webpack/loaders/next-edge-function-loader.js?absolutePagePath=private-next-pages%2Fapi%2Fviews%2F%5Bslug%5D.ts&page=%2Fapi%2Fviews%2F%5Bslug%5D&rootDir=%2Fopt%2Fbuildhome%2Frepo&preferredRegion=&middlewareConfig=e30%3D!
01:39:32.198 | Attempted import error: 'private-next-pages/api/views/[slug].ts' does not contain a default export (imported as 'handler').
01:39:32.198 |  
01:39:33.863 | "getStaticProps" is not yet supported fully with "experimental-edge", detected on /blog/[slug]
01:39:44.220 | - info Generating static pages (0/15)
01:39:45.025 | - info Generating static pages (3/15)
01:39:45.545 | - info Generating static pages (7/15)
01:39:45.751 | - info Generating static pages (11/15)
01:40:04.389 | - info Generating static pages (15/15)
01:40:04.938 | - info Finalizing page optimization...
01:40:04.950 |  
01:40:04.976 | Route (pages)                                            Size     First Load JS
01:40:04.977 | ┌ ● / (ISR: 30 Seconds) (1541 ms)                        3.92 kB         170 kB
01:40:04.977 | ├   /_app                                                0 B             106 kB
01:40:04.977 | ├ ○ /404                                                 182 B           106 kB
01:40:04.977 | ├ ℇ /api/issues                                          0 B             106 kB
01:40:04.977 | ├ ℇ /api/link-preview                                    0 B             106 kB
01:40:04.978 | ├ ℇ /api/og                                              0 B             106 kB
01:40:04.978 | ├ ℇ /api/preview                                         0 B             106 kB
01:40:04.978 | ├ ℇ /api/reactions/[slug]                                0 B             106 kB
01:40:04.978 | ├ ℇ /api/sitemap                                         0 B             106 kB
01:40:04.978 | ├ ℇ /api/subscribe                                       0 B             106 kB
01:40:04.978 | ├ ℇ /api/subscribers                                     0 B             106 kB
01:40:04.979 | ├ ℇ /api/views/[slug]                                    0 B             106 kB
01:40:04.979 | ├ ● /blog (ISR: 30 Seconds) (1177 ms)                    1.54 kB         167 kB
01:40:04.979 | ├ ℇ /blog/[slug]                                         38.3 kB         204 kB
01:40:04.979 | └ ● /blog/categories/[tag] (ISR: 30 Seconds) (28367 ms)  1.79 kB         168 kB
01:40:04.980 | ├ /blog/categories/x (18879 ms)
01:40:04.981 | └ [+4 more paths] (avg 412 ms)
01:40:04.981 | + First Load JS shared by all                            118 kB
01:40:04.981 | ├ chunks/framework-305cb810cde7afac.js                 45.2 kB
01:40:04.981 | ├ chunks/main-70e147c70032ac43.js                      32.4 kB
01:40:04.981 | ├ chunks/pages/_app-72d5d89d510a7e14.js                26.3 kB
01:40:04.981 | ├ chunks/webpack-727be64afcc6f8ef.js                   1.77 kB
01:40:04.981 | └ css/87bda39ba21e5051.css                             11.9 kB
01:40:04.982 |  
01:40:04.982 | ƒ Middleware                                             32.9 kB
01:40:04.982 |  
01:40:04.982 | ℇ  (Streaming)  server-side renders with streaming (uses React 18 SSR streaming or Server Components)
01:40:04.982 | ○  (Static)     automatically rendered as static HTML (uses no initial props)
01:40:04.982 | ●  (SSG)        automatically generated as static HTML + JSON (uses getStaticProps)
01:40:04.982 | (ISR)        incremental static regeneration (uses revalidate in getStaticProps)
01:40:04.983 |  
01:40:05.108 | Finished
01:40:05.108 | Note: No functions dir at /functions found. Skipping.
01:40:05.109 | Validating asset output directory
01:40:06.018 | Deploying your site to Cloudflare's global network...
01:40:08.524 | Uploading... (82/118)
01:40:10.058 | Uploading... (94/118)
01:40:10.292 | Uploading... (106/118)
01:40:11.394 | Uploading... (118/118)
01:40:11.395 | ✨ Success! Uploaded 36 files (82 already uploaded) (3.20 sec)
01:40:11.395 |  
01:40:11.848 | ✨ Upload complete!
01:40:14.306 | Success: Assets published!
01:40:15.765 | Success: Your site was deployed!

</pre>

Not able to deploy the website

Hey 👋🏻,

I am facing trouble in deploying the website via both Vercel and Netlify. The build is not giving any errors but the webpage is not able to render.

Can you help me, please?

Error occurred prerendering page "/about"

Please fix this issue in vercel.

[13:12:57.148] ⚠ You are using an experimental edge runtime, the API might change.
[13:13:00.414] Generating static pages (0/16) ...
[13:13:01.199] @notionhq/client warn: request fail {
[13:13:01.202] code: 'validation_error',
[13:13:01.202] message: 'path failed validation: path.database_id should be a valid uuid, instead was "undefined".'
[13:13:01.203] }
[13:13:01.203]
[13:13:01.203] Error occurred prerendering page "/about". Read more: https://nextjs.org/docs/messages/prerender-error
[13:13:01.203] APIResponseError: path failed validation: path.database_id should be a valid uuid, instead was "undefined".
[13:13:01.203] at buildRequestError (/vercel/path0/node_modules/@notionhq/client/build/src/errors.js:162:16)
[13:13:01.204] at Client.request (/vercel/path0/node_modules/@notionhq/client/build/src/Client.js:304:54)
[13:13:01.204] at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
[13:13:01.204] at async getWorkTimelineData (/vercel/path0/.next/server/chunks/52.js:1:861)
[13:13:01.204] at async getStaticProps (/vercel/path0/.next/server/pages/about.js:1:6342)
[13:13:01.476]
[13:13:01.476] Error occurred prerendering page "/blog". Read more: https://nextjs.org/docs/messages/prerender-error
[13:13:01.477] Error: Error serializing .articles[0].publishedDate returned from getStaticProps in "/blog".
[13:13:01.477] Reason: undefined cannot be serialized as JSON. Please use null or omit this value.
[13:13:01.477] at r (/vercel/path0/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:38:446)
[13:13:01.477] at /vercel/path0/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:38:683
[13:13:01.477] at Array.every ()
[13:13:01.477] at r (/vercel/path0/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:38:580)
[13:13:01.477] at /vercel/path0/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:38:845
[13:13:01.477] at Array.every ()
[13:13:01.477] at r (/vercel/path0/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:38:807)
[13:13:01.479] at /vercel/path0/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:38:683
[13:13:01.479] at Array.every ()
[13:13:01.479] at r (/vercel/path0/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:38:580)
[13:13:01.480]
Generating static pages (4/16)
[13:13:01.621] @notionhq/client warn: request fail {
[13:13:01.621] code: 'validation_error',
[13:13:01.621] message: 'path failed validation: path.database_id should be a valid uuid, instead was "undefined".'
[13:13:01.621] }
[13:13:01.621]
[13:13:01.621] Error occurred prerendering page "/changelog". Read more: https://nextjs.org/docs/messages/prerender-error
[13:13:01.621] APIResponseError: path failed validation: path.database_id should be a valid uuid, instead was "undefined".
[13:13:01.622] at buildRequestError (/vercel/path0/node_modules/@notionhq/client/build/src/errors.js:162:16)
[13:13:01.622] at Client.request (/vercel/path0/node_modules/@notionhq/client/build/src/Client.js:304:54)
[13:13:01.622] at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
[13:13:01.622] at async getChangelogData (/vercel/path0/.next/server/chunks/52.js:1:1591)
[13:13:01.622] at async getStaticProps (/vercel/path0/.next/server/pages/changelog.js:1:1993)
[13:13:02.584] TypeError: Cannot read properties of null (reading 'messages')
[13:13:02.585] at CommunityWall (/vercel/path0/.next/server/pages/community-wall.js:1:6763)
[13:13:02.585] at Wc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
[13:13:02.586] at Zc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253)
[13:13:02.586] at Z (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
[13:13:02.586] at $c (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
[13:13:02.586] at bd (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:77:404)
[13:13:02.587] at Z (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:217)
[13:13:02.587] at Zc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:74:209)
[13:13:02.587] at Z (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
[13:13:02.587] at Zc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
[13:13:02.587]
[13:13:02.588] Error occurred prerendering page "/community-wall". Read more: https://nextjs.org/docs/messages/prerender-error
[13:13:02.588] TypeError: Cannot read properties of null (reading 'messages')
[13:13:02.588] at CommunityWall (/vercel/path0/.next/server/pages/community-wall.js:1:6763)
[13:13:02.589] at Wc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
[13:13:02.589] at Zc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253)
[13:13:02.589] at Z (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
[13:13:02.589] at $c (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
[13:13:02.590] at bd (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:77:404)
[13:13:02.590] at Z (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:217)
[13:13:02.590] at Zc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:74:209)
[13:13:02.590] at Z (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
[13:13:02.590] at Zc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
[13:13:04.334]
[13:13:04.334] Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
[13:13:04.335] Error: Error serializing .recentArticles[1].publishedDate returned from getStaticProps in "/".
[13:13:04.335] Reason: undefined cannot be serialized as JSON. Please use null or omit this value.
[13:13:04.335] at r (/vercel/path0/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:38:446)
[13:13:04.335] at /vercel/path0/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:38:683
[13:13:04.336] at Array.every ()
[13:13:04.336] at r (/vercel/path0/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:38:580)
[13:13:04.336] at /vercel/path0/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:38:845
[13:13:04.336] at Array.every ()
[13:13:04.336] at r (/vercel/path0/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:38:807)
[13:13:04.336] at /vercel/path0/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:38:683
[13:13:04.336] at Array.every ()
[13:13:04.336] at r (/vercel/path0/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:38:580)
[13:13:04.551] @notionhq/client warn: request fail {
[13:13:04.553] code: 'validation_error',
[13:13:04.553] message: 'path failed validation: path.block_id should be a valid uuid, instead was "undefined".'
[13:13:04.553] }
[13:13:04.554]
[13:13:04.554] Error occurred prerendering page "/meetup". Read more: https://nextjs.org/docs/messages/prerender-error
[13:13:04.554] APIResponseError: path failed validation: path.block_id should be a valid uuid, instead was "undefined".
[13:13:04.554] at buildRequestError (/vercel/path0/node_modules/@notionhq/client/build/src/errors.js:162:16)
[13:13:04.555] at Client.request (/vercel/path0/node_modules/@notionhq/client/build/src/Client.js:304:54)
[13:13:04.555] at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
[13:13:04.555] at async getPageInfo (/vercel/path0/.next/server/chunks/52.js:1:2818)
[13:13:04.555] at async getStaticProps (/vercel/path0/.next/server/pages/meetup.js:1:6512)
[13:13:04.555]
Generating static pages (8/16)
[13:13:04.685] @notionhq/client warn: request fail {
[13:13:04.688] code: 'validation_error',
[13:13:04.689] message: 'path failed validation: path.database_id should be a valid uuid, instead was "undefined".'
[13:13:04.689] }
[13:13:04.689]
[13:13:04.689] Error occurred prerendering page "/speaking". Read more: https://nextjs.org/docs/messages/prerender-error
[13:13:04.689] APIResponseError: path failed validation: path.database_id should be a valid uuid, instead was "undefined".
[13:13:04.690] at buildRequestError (/vercel/path0/node_modules/@notionhq/client/build/src/errors.js:162:16)
[13:13:04.690] at Client.request (/vercel/path0/node_modules/@notionhq/client/build/src/Client.js:304:54)
[13:13:04.690] at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
[13:13:04.690] at async getListOfTalksData (/vercel/path0/.next/server/chunks/52.js:1:1283)
[13:13:04.690] at async getStaticProps (/vercel/path0/.next/server/pages/speaking.js:1:8673)
[13:13:04.828] @notionhq/client warn: request fail {
[13:13:04.828] code: 'validation_error',
[13:13:04.828] message: 'path failed validation: path.block_id should be a valid uuid, instead was "undefined".'
[13:13:04.828] }
[13:13:04.829]
[13:13:04.829] Error occurred prerendering page "/toolbox". Read more: https://nextjs.org/docs/messages/prerender-error
[13:13:04.829] APIResponseError: path failed validation: path.block_id should be a valid uuid, instead was "undefined".
[13:13:04.829] at buildRequestError (/vercel/path0/node_modules/@notionhq/client/build/src/errors.js:162:16)
[13:13:04.829] at Client.request (/vercel/path0/node_modules/@notionhq/client/build/src/Client.js:304:54)
[13:13:04.829] at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
[13:13:04.829] at async getPageInfo (/vercel/path0/.next/server/chunks/52.js:1:2818)
[13:13:04.829] at async getStaticProps (/vercel/path0/.next/server/pages/toolbox.js:1:3981)
[13:13:06.445]
[13:13:06.447] Error occurred prerendering page "/blog/modern-javascript-in-legacy-applications". Read more: https://nextjs.org/docs/messages/prerender-error
[13:13:06.447] TypeError: Cannot read properties of null (reading 'start')
[13:13:06.447] at getStaticProps (/vercel/path0/.next/server/pages/blog/[slug].js:1:15039)
[13:13:06.448] at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
[13:13:06.451]
Generating static pages (12/16)
[13:13:07.532]
[13:13:07.532] Error occurred prerendering page "/blog/categories/javascript". Read more: https://nextjs.org/docs/messages/prerender-error
[13:13:07.534] Error: Error serializing .featuredArticle.publishedDate returned from getStaticProps in "/blog/categories/[tag]".
[13:13:07.539] Reason: undefined cannot be serialized as JSON. Please use null or omit this value.
[13:13:07.539] at r (/vercel/path0/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:38:446)
[13:13:07.539] at /vercel/path0/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:38:683
[13:13:07.539] at Array.every ()
[13:13:07.540] at r (/vercel/path0/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:38:580)
[13:13:07.540] at /vercel/path0/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:38:683
[13:13:07.540] at Array.every ()
[13:13:07.540] at r (/vercel/path0/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:38:580)
[13:13:07.541] at H (/vercel/path0/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:38:1117)
[13:13:07.541] at eZ (/vercel/path0/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:48:294)
[13:13:07.541] at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
[13:13:08.027]
✓ Generating static pages (16/16)
[13:13:08.029]
[13:13:08.030] > Export encountered errors on following paths:
[13:13:08.030] /
[13:13:08.030] /about
[13:13:08.031] /blog
[13:13:08.031] /blog/[slug]: /blog/modern-javascript-in-legacy-applications
[13:13:08.031] /blog/categories/[tag]: /blog/categories/javascript
[13:13:08.031] /changelog
[13:13:08.031] /community-wall
[13:13:08.031] /meetup
[13:13:08.031] /speaking
[13:13:08.031] /toolbox
[13:13:08.094] error Command failed with exit code 1.
[13:13:08.097] info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
[13:13:08.118] Error: Command "yarn run build" exited with 1

How to deploy it?

This blog is so beautiful. I really want to know how this is deployed? Is there a detailed tutorial? I really want to learn, but I don't know what the variables in the "env. example" file mean. Thank you very much!

Deploying to Netlify causes 500 internal server error

Hi, first of all thank you for this awesome blog. Now, for some reason I get a 500 internal server error after deploying successfully to Netlify. I can't get to any log to debug it on the platform. Any idea what causes it? Someone with the same experience? Let me know what information I need to provide for a better understanding of the situation. Thanks in advance!

• Build is successful
• Env variables provided via Site configuration -> Environment variables.

Runtime
Next.js

Base directory
/

Package directory
Not set

Build command
npm run build

Publish directory
.next

Functions directory
netlify/functions

Build status
Active

No Notion Template

The following readme needs to have a "notion template" that you are using for your portfolio Replicating the notion database structure by reading repo code is tedious. 😢

ReferenceError: ezstandalone is not defined

Show error when go to page

https://braydoncoyer.dev/about
https://braydoncoyer.dev/blog

I am getting an error with the Supabase integration... Will you be willing to share your DB schema from Supabase ?

Seems like the codebase is referring to Supabase tables and stored procs ... How do I replicate that ?

at new SupabaseClient (C:\Users\raish\Documents\Notion to Website\WebsiteSecondDraft\node_modules\@supabase\supabase-js\dist\main\SupabaseClient.js:51:19)
at createClient (C:\Users\raish\Documents\Notion to Website\WebsiteSecondDraft\node_modules\@supabase\supabase-js\dist\main\index.js:29:12)
at eval (webpack-internal:///./lib/hooks/useSupabase.ts:14:91)
at Object../lib/hooks/useSupabase.ts (C:\Users\raish\Documents\Notion to Website\WebsiteSecondDraft\.next\server\pages\_app.js:22:1)
at __webpack_require__ (C:\Users\raish\Documents\Notion to Website\WebsiteSecondDraft\.next\server\webpack-runtime.js:33:42)
at eval (webpack-internal:///./pages/_app.tsx:15:76)
at Object../pages/_app.tsx (C:\Users\raish\Documents\Notion to Website\WebsiteSecondDraft\.next\server\pages\_app.js:33:1)
at __webpack_require__ (C:\Users\raish\Documents\Notion to Website\WebsiteSecondDraft\.next\server\webpack-runtime.js:33:42)
at __webpack_exec__ (C:\Users\raish\Documents\Notion to Website\WebsiteSecondDraft\.next\server\pages\_app.js:118:39)
at C:\Users\raish\Documents\Notion to Website\WebsiteSecondDraft\.next\server\pages\_app.js:119:28 {

page: '/'
}

how to fill .env file?Thanks!

Hi there!
Below is the .env file I filled out,
but I don't know how to fill in the other blanks.
I only have the address for Notion and the database ID.

Thank you for your help!

GA_MEASUREMENT_ID=

REVUE_API_KEY=

API_KEY=
AUTH_DOMAIN=
DATABASE_URL='https://verdant-failing-c8d.notion.site/1704e7eecded45e28d71d70362b72f34?v=e2474f021ba742cab96c482034630ae0'
PROJECT_ID='1704e7eecded45e28d71d70362b72f34'
STORAGE_BUCKET=
MESSAGING_SENDER_ID=
APP_ID=
MEASUREMENT_ID=
NEXT_PUBLIC_GOOGLE_ADSENSE=