ดาวน์โหลด nextjs notion blog starter - nextjs notion blog starter Source Source Source Download Download

nextjs notion blog starter

โค้ดแหล่งที่มา AI

1.0.0

ดาวน์โหลด

NextJS Notion Blog Starter

การสาธิตเริ่มต้น - ปรับใช้จากสาขา main
การตั้งค่าบล็อก - ฉันเขียนบทความเกี่ยวกับวิธีการใช้ตัวเริ่มต้นนี้เพื่อเริ่มบล็อกของคุณ

คุณสมบัติ

✅การตั้งค่าใช้เวลาเพียงไม่กี่นาที (การกำหนดค่าไฟล์เดียว)?
✅การสมัครรับจดหมายข่าวผ่าน ConvertKit API
✅การวิเคราะห์อย่างง่ายกับอูมามิ
✅ภาพโซเชียล OG อัตโนมัติพร้อมเทมเพลต tailwind
url url สวยอัตโนมัติ
✅ความเร็วหน้ายอดเยี่ยม
✅ปรับให้เหมาะสมสำหรับ next.js และ vercel

- สร้างด้วย

เฟรมเวิร์ก : next.js, typeScript
สไตล์ : Tailwind CSS
เนื้อหา : ความคิด API
จดหมายข่าว : ConvertKit
การปรับใช้ : vercel

ภาพรวมโครงการ

layouts/* - เลย์เอาต์ต่าง ๆ ที่ใช้ในแต่ละหน้า
components/* - ส่วนประกอบที่ใช้ทั่วทั้งไซต์
components/blocks/* - บล็อกที่กำหนดเองสำหรับการแสดงความคิด
utils/* - ย่อมาจาก "ยูทิลิตี้" ซึ่งเป็นคอลเลกชันของยูทิลิตี้ที่เป็นประโยชน์หรือรหัสสำหรับบริการภายนอก
pages/api/* -API เส้นทางการเปิด /og-image Dynamic OG Image และ /subscribe-convertkit จดหมายข่าวจดหมายข่าว
pages/blog/* - หน้าบล็อกที่แสดงล่วงหน้าแบบคงที่ที่ดึงข้อมูลจาก Notion API
pages/* - หน้าคงที่อื่น ๆ ทั้งหมด
public/* - สินทรัพย์คงที่รวมถึงรูปภาพแบบอักษรและวิดีโอ
styles/* - รูปแบบระดับโลกและ Tailwind
siteData.ts - ไฟล์ง่าย ๆ ที่มีข้อมูลส่วนกลางเกี่ยวกับเว็บไซต์

? ‍♂ ทำงานในพื้นที่

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

สร้างไฟล์ .env คล้ายกับ .env.example และรวมปุ่มที่เหมาะสม

ปรับใช้กับ 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=