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 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