tuanphungcz / nextjs-notion-blog-starter Goto Github PK

View Code? Open in Web Editor NEW

190.0 4.0 50.0 762 KB

Notion-powered blog starter with @vercel and @tailwindcss

Home Page: https://nextjs-notion-blog-starter.vercel.app/

License: MIT License

TypeScript 97.41% JavaScript 2.45% CSS 0.14%

blog nextjs notion tailwind tailwindcss personal-website

nextjs-notion-blog-starter's Introduction

Nextjs Notion Blog Starter

Default demo - Deployed from main branch
Blog setup - I wrote an article on how to use this starter to start your blog

✨ Features

✅ Setup takes only a few minutes (single file config) 💪
✅ Newsletter subscription via Convertkit API
✅ Simple analytics with Umami
✅ Automatic OG social images with Tailwind template
✅ Automatic pretty URLs
✅ Excellent page speed
✅ Optimized for Next.js and Vercel

🛠 Build with

Framework: Next.js, Typescript
Styling: Tailwind CSS
Content: Notion API
Newsletter: Convertkit
Deployment: Vercel

📕 Project Overview

layouts/* - The different layouts used on each page.
components/* - Components used throughout the site.
components/blocks/* - Custom blocks made for Notion rendering.
utils/* - Short for "utilities", a collection of helpful utilities or code for external services.
pages/api/* - API routes powering /og-image dynamic OG image and /subscribe-convertkit newsletter subscription.
pages/blog/* - Static pre-rendered blog pages that fetch information from the Notion API.
pages/* - All other static pages.
public/* - Static assets including images, fonts, and videos.
styles/* - global styles and Tailwind.
siteData.ts - a simple file containing global data about the site.

🏃‍♂️ Running Locally

git clone https://github.com/tuanphungcz/nextjs-notion-blog-starter
cd nextjs-notion-blog-starter
pnpm install
pnpm run dev

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

🚀 Deploy to vercel

NOTION_SECRET=
BLOG_DATABASE_ID=

# ConvertKit is optional
NEXT_PUBLIC_CONVERTKIT_FORM_ID=
NEXT_PUBLIC_CONVERTKIT_API_KEY=

# Umami is optional
NEXT_PUBLIC_UMAMI_ID=
NEXT_PUBLIC_UMAMI_URL=

💁‍♀️ How to use

Blog setup - I wrote an article on how to use this starter to start your blog

📝 Credit & inspiration

This blog starter was inspired by all of these awesome open-sources

samuelkraft-next by @samuelkraft
leerob.io by @leerob
Next.js Notion Starter Kit by @transitive-bullshit
braydoncoyer.dev by @braydoncoyer

nextjs-notion-blog-starter's People

Contributors

Stargazers

Watchers

nextjs-notion-blog-starter's Issues

Guide for the new version?

Amazing project ! ✨ i'd like to test this on local or deploy somewhere.
guide on how to deploy demo.blogfolio.co

Add OG image generation via @vercel/og

Task:
Add OG image generation via @vercel/og

demo: https://vercel.com/docs/concepts/functions/edge-functions/og-image-examples

I want to make some of the blog post with Image in it. Like Step By step Tutorial type of content. I found that image not showing up in the blog post after I publish . I am using Blog Starter Template( older version ). Is there any way to fix? Thank you.

Serializing issue when setting up project

i had to
return { props: { articles:JSON.parse(JSON.stringify(articles)), categories }, revalidate: 30 };

Add dark demo

Task:
Add dark demo in tailwind

example: https://tailwindcss.com/docs/dark-mode

Responsive Issue

Notion Database Connection Error!!

I added this id but still facing issue

Issues with Incremental Static Regeneration (ISR) Not Triggering as Expected on Vercel

Issue Description

We are experiencing issues with the Incremental Static Regeneration (ISR) feature in our Next.js application hosted on Vercel. Despite setting the revalidate option in getStaticProps, the pages do not seem to be regenerating at the specified intervals.

Details

Framework: Next.js
Hosting: Vercel
Function: getStaticProps with revalidate set to 600 seconds (10 minutes)
Expected Behavior: The pages should regenerate every 10 minutes when accessed after the set interval.
Current Behavior: Pages remain static and do not update as expected, even when accessed after the 10-minute interval.

Steps to Reproduce

Set up a Next.js application with getStaticProps implemented.
Deploy the application to Vercel.
Access the page to trigger the initial static generation.
Modify the source content (e.g., update data in a CMS or database).
Access the page after the revalidate period has elapsed.
Observe that the changes are not reflected in the regenerated page.

Additional Information

No errors are shown in the Vercel function logs.
Environment variables and API keys are correctly configured.
The issue persists across multiple deployments and even after clearing the cache.

Expected Resolution

Clarification on whether there is a known issue with ISR on Vercel that might be affecting this functionality.
Any potential workarounds or settings that might need to be adjusted to ensure that ISR works as expected.
Assistance in debugging this issue to determine if the configuration might be incorrect or if there are other underlying problems.

Conclusion
This issue is critical as it affects the dynamic nature of our site, which relies on timely content updates. We appreciate any guidance or support that can be provided to resolve this issue promptly.

Notion setup link is broken

https://nextjs-notion-blog-starter.vercel.app/blog/deploy-your-notion-blog-powered-by-nextjs-and-tailwind#notion-setup

This link doesn't work

Vercel deployment

I'm looking forward to setting this up as my open notebook deployed on vercel.
For that I would need to hide keep my secrets locally while also having them on vercel.
This doesn't seem to be explained in the docs.

You should be able to set up a Deploy button
https://vercel.com/docs/deploy-button
with the correct API keys field and get a super simple deployment setup for new users

I've went ahead and made a deploy button already :

I would recommend you include it in the readme along with the "Run locally" section. I would open a PR but I'm on mobile at the moment