nextjs notion blog starter

Nextjs 개념 블로그 스타터

• 기본 데모 - main 브랜치에서 배포되었습니다
• 블로그 설정 -이 스타터를 사용하여 블로그를 시작하는 방법에 대한 기사를 썼습니다.

특징

• ✅ 설정은 몇 분 밖에 걸리지 않습니까 (단일 파일 구성)?

• convertKit API를 통한 뉴스 레터 구독

• simplemami와의 간단한 분석

• tailwind 템플릿이있는 자동 OG 소셜 이미지

• ✅ 자동 예쁜 URL

• page 우수한 페이지 속도

• next.js 및 vercel에 최적화되었습니다

? 빌드

• 프레임 워크 : Next.js, TypeScript
• 스타일링 : Tailwind CSS
• 내용 : 개념 API
• 뉴스 레터 : Convertkit
• 배포 : Vercel

프로젝트 개요

• layouts/* - 각 페이지에서 사용되는 다른 레이아웃.
• components/* - 사이트 전체에 사용되는 구성 요소.
• components/blocks/* - 개념 렌더링을 위해 만든 사용자 정의 블록.
• utils/* - "유틸리티"의 짧은 유용한 유틸리티 또는 외부 서비스에 대한 코드.
• pages/api/* -API 경로 전원을 공급 /og-image 동적 OG 이미지 및 /subscribe-convertkit 뉴스 레터 구독.
• pages/blog/* - 개념 API에서 정보를 가져 오는 정적 사전 렌더링 블로그 페이지.
• pages/* - 다른 모든 정적 페이지.
• public/* - 이미지, 글꼴 및 비디오를 포함한 정적 자산.
• styles/* - 글로벌 스타일 및 테일 윈드.
• siteData.ts 사이트에 대한 글로벌 데이터가 포함 된 간단한 파일.

? ally ♂️ 로컬에서 실행 중입니다

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의 next.js 개념 스타터 키트
• @braydoncoyer의 BraydonCoyer.dev