nextjs notion blog starter

nextjs概念博客入門者

• 默認演示 - 從main分支部署
• 博客設置 - 我寫了一篇文章，介紹瞭如何使用此啟動器啟動您的博客

特徵

• ✅設置僅需幾分鐘（單文件配置）？

• ✅通過ConvertKit API訂閱的新聞通訊

• ✅用鮮味的簡單分析

• ✅帶有尾風模板的自動OG社交圖像

• ✅自動漂亮的URL

• ✅出色的頁面速度

• ✅針對Next.js和Vercel進行了優化

？與

• 框架：Next.js，打字稿
• 樣式：尾風CSS
• 內容：概念API
• 新聞通訊：convertkit
• 部署：Vercel

項目概述

• layouts/* - 每個頁面上使用的不同佈局。
• components/* - 整個站點中使用的組件。
• components/blocks/* - 為概念渲染製作的自定義塊。
• utils/* - “實用程序”的縮寫，是有用的實用程序或外部服務代碼的集合。
• pages/api/* - API路由供電/og-image Image Dynamic OG圖像和/subscribe-convertkit新聞通訊訂閱。
• pages/blog/* - 從概念API獲取信息的靜態預渲染博客頁面。
• pages/* - 所有其他靜態頁面。
• public/* - 包括圖像，字體和視頻的靜態資產。
• styles/* - 全球樣式和逆風。
• siteData.ts一個簡單的文件，其中包含有關網站的全局數據。

‍♂️在當地運行

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

創建一個類似於.env.example的.env文件，並包含適當的鍵。

部署到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=

？ ‍♀️如何使用

• 博客設置 - 我寫了一篇文章，介紹瞭如何使用此啟動器啟動您的博客

信用和靈感

這個博客入門受到所有這些很棒的開源的啟發

• @samuelkraft的Samuelkraft-Next
• @leerob的Leerob.io
• @transitive-bullshit
• @braydoncoyer的braydoncoyer.dev