/dev

Primary LanguageTypeScript

github-repo-card-2skydev-blog

Notion + Next.js blog starter kit

This repository is a startup kit that allows you to create a blog using notion and next.js.
Please understand that the code and explanation are mainly written in Korean. πŸ₯²


πŸ”— 미리보기 및 링크

μ•„λž˜ 사진듀은 μš΄μ˜μ€‘μΈ 제 λΈ”λ‘œκ·Έμ—μ„œ κ°€μ Έμ˜¨ λ¦¬μ†ŒμŠ€μž…λ‹ˆλ‹€. 2skydev blog

라이트λͺ¨λ“œ

image

image

닀크λͺ¨λ“œ

image

image


πŸ€” Next.js + Notion μ–΄λ–»κ²Œ λ§Œλ“€μ—ˆμ„κΉŒμš”?

λ…Έμ…˜μ—μ„œ 글을 μž‘μ„±ν•˜λ©΄ next.js의 ISR λ°©μ‹μœΌλ‘œ 정적 νŽ˜μ΄μ§€κ°€ μžλ™μœΌλ‘œ μƒμ„±λ©λ‹ˆλ‹€.

μ‚¬μš©ν•œ μ˜€ν”ˆμ†ŒμŠ€

transitive-bullshit/nextjs-notion-starter-kitλ₯Ό 기반으둜 μ»€μŠ€ν…€ν•΄μ„œ μ›ν•˜λŠ”λ°λ‘œ κΎΈλ―Έκ³  μΆ”κ°€ν–ˆμŠ΅λ‹ˆλ‹€.
기본적으둜 μ§€μ›ν•˜λŠ” κΈ°λŠ₯이 λ§Žμ•˜μ§€λ§Œ μ•„μ‰¬μš΄ 뢀뢄이 λ§Žμ•„ 직접 μ»€μŠ€ν…€μ„ μ§„ν–‰ν–ˆμŠ΅λ‹ˆλ‹€.

GitHub - transitive-bullshit/nextjs-notion-starter-kit

전지적 λ…Έμ…˜ μ‹œμ 

λ…Έμ…˜μ˜ λ‚΄μš©μ„ 기반으둜 λΈ”λ‘œκ·Έκ°€ μƒμ„±λ˜λŠ” λ°©μ‹μ΄λ‹ˆ μ‹€μ œλ‘œλŠ” λ…Έμ…˜μ΄ μ–΄λ–»κ²Œ κ΅¬μ„±λ˜μ–΄μžˆλŠ”μ§€ κΆκΈˆν•˜μ‹ κ°€μš”?
μ•„λž˜ 링크λ₯Ό 톡해 이 λΈ”λ‘œκ·Έμ˜ λ…Έμ…˜ ꡬ성을 ν™•μΈν•˜μ‹€ 수 μžˆμŠ΅λ‹ˆλ‹€!

ν˜„μž¬ μš΄μ˜μ€‘μΈ λΈ”λ‘œκ·Έ λ…Έμ…˜ νŽ˜μ΄μ§€ (ν…œν”Œλ¦Ώ 볡제 ν—ˆμš© X)

2skydev blog λ…Έμ…˜ 링크


πŸ”Ž μžμ„Έν•œ λ™μž‘ 방식을 μ•Œκ³  μ‹Άμ–΄μš”

기본적인 λ™μž‘μ€ next.js의 ISR λ°©μ‹μœΌλ‘œ νŽ˜μ΄μ§€κ°€ μƒμ„±λ©λ‹ˆλ‹€.

배포(λΉŒλ“œ)후에도 λ…Έμ…˜μ—μ„œ νŽ˜μ΄μ§€λ₯Ό 생성 λ˜λŠ” μˆ˜μ •ν•΄λ„ μžλ™μœΌλ‘œ λ°˜μ˜λ©λ‹ˆλ‹€.

Notion API?

λ…Έμ…˜μ˜ 정보λ₯Ό κ°€μ Έμ˜€λŠ” APIλŠ” 곡식 APIκ°€ μ•„λ‹Œ μ‹€μ œ λ…Έμ…˜ νŽ˜μ΄μ§€μ—μ„œ μš”μ²­ν•˜λŠ” APIλ₯Ό κ°€μ Έμ™€μ„œ μ‚¬μš©ν–ˆμŠ΅λ‹ˆλ‹€.

μ•„ λ¬Όλ‘  λŒ“κΈ€ κΈ°λŠ₯은 Notion 곡식 APIλ₯Ό μ‚¬μš©ν•œκ²Œ λ§žμŠ΅λ‹ˆλ‹€ :)

배포(λΉŒλ“œ) ν›„ λ…Έμ…˜μ—μ„œ μƒˆλ‘œ νŽ˜μ΄μ§€λ₯Ό λ§Œλ“€λ©΄ μ–΄λ–»κ²Œ λ˜λ‚˜μš”?

  1. μƒˆλ‘œ λ§Œλ“  νŽ˜μ΄μ§€ μ ‘μ†μ‹œ 정적 νŽ˜μ΄μ§€κ°€ μƒμ„±λœ 것이 μ—†μœΌλ―€λ‘œ router.isFallback이 ν™œμ„±ν™” 되며 λ‘œλ”© νš¨κ³Όκ°€ ν‘œμ‹œ
  2. getStaticProps ν•¨μˆ˜μ—μ„œ λ…Έμ…˜ 루트 νŽ˜μ΄μ§€ idλ₯Ό κΈ°μ€€μœΌλ‘œ λͺ¨λ“  νŽ˜μ΄μ§€λ₯Ό κ°€μ Έμ˜΄
  3. 2번 μž‘λ™μœΌλ‘œ λ…Έμ…˜ μ‚¬μ΄νŠΈλ§΅ 객채가 μƒμ„±λ˜κ³  μ ‘μ†ν•œ μ£Όμ†Œκ°€ μ‚¬μ΄νŠΈλ§΅μ— μžˆλŠ”μ§€ 확인 (μ—†μœΌλ©΄ 404 처리)
  4. μ‚¬μ΄νŠΈλ§΅μ— μžˆλ‹€λ©΄ ν•΄λ‹Ή μ£Όμ†Œμ™€ μΌμΉ˜ν•˜λŠ” λ…Έμ…˜ νŽ˜μ΄μ§€ idλ₯Ό κΈ°μ€€μœΌλ‘œ νŽ˜μ΄μ§€ 정보λ₯Ό 뢈러옴
  5. νŽ˜μ΄μ§€ 정보가 λΆˆλŸ¬μ™€μ‘Œλ‹€λ©΄ router.isFallback 이 falseκ°€ 되며 λ‘œλ”© 효과 사라짐 및 μƒˆλ‘œμš΄ 정적 νŽ˜μ΄μ§€ ν‘œμ‹œ

배포(λΉŒλ“œ) ν›„ λ…Έμ…˜μ—μ„œ νŽ˜μ΄μ§€λ₯Ό μˆ˜μ •ν•˜λ©΄ μ–΄λ–»κ²Œ λ˜λ‚˜μš”?

  1. μˆ˜μ •λœ νŽ˜μ΄μ§€ μ ‘μ†μ‹œ getStaticProps ν•¨μˆ˜ λ°˜ν™˜κ°’μΈ revalidate: 10 에 μ˜ν•΄ λ§ˆμ§€λ§‰μœΌλ‘œ μ ‘μ†ν•œ μœ μ € κΈ°μ€€μœΌλ‘œ 10μ΄ˆκ°€ 지났닀면 getStaticProps ν•¨μˆ˜ λ°±κ·ΈλΌμš΄λ“œλ‘œ μ‹€ν–‰ (μ ‘μ†ν•œ μœ μ €λŠ” 이전 λ²„μ „μ˜ νŽ˜μ΄μ§€λ₯Ό 보게됨)
  2. getStaticProps ν•¨μˆ˜μ—μ„œ λ…Έμ…˜ 루트 νŽ˜μ΄μ§€ idλ₯Ό κΈ°μ€€μœΌλ‘œ λͺ¨λ“  νŽ˜μ΄μ§€λ₯Ό κ°€μ Έμ˜΄
  3. 2번 μž‘λ™μœΌλ‘œ λ…Έμ…˜ μ‚¬μ΄νŠΈλ§΅ 객채가 μƒμ„±λ˜κ³  μ ‘μ†ν•œ μ£Όμ†Œκ°€ μ‚¬μ΄νŠΈλ§΅μ— μžˆλŠ”μ§€ 확인 (μ—†μœΌλ©΄ 404 처리)
  4. μ‚¬μ΄νŠΈλ§΅μ— μžˆλ‹€λ©΄ ν•΄λ‹Ή μ£Όμ†Œμ™€ μΌμΉ˜ν•˜λŠ” λ…Έμ…˜ νŽ˜μ΄μ§€ idλ₯Ό κΈ°μ€€μœΌλ‘œ νŽ˜μ΄μ§€ 정보λ₯Ό 뢈러옴 (μ΅œμ‹  버전 정보)
  5. νŽ˜μ΄μ§€ 정보가 λΆˆλŸ¬μ™€μ‘Œλ‹€λ©΄ 정적 νŽ˜μ΄μ§€κ°€ μƒμ„±λ˜λ©° 이미 μ ‘μ†ν•œ μœ μ €λŠ” 이전 λ²„μ „μ˜ νŽ˜μ΄μ§€κ°€ λ³΄μ—¬μ§€μ§€λ§Œ 이후 μ ‘μ†ν•œ μœ μ €(이미 μ ‘μ†ν•œ μœ μ €μ˜ μƒˆλ‘œκ³ μΉ¨ μ•‘μ…˜λ„ 포함)λŠ” μƒμ„±λœ μ΅œμ‹  λ²„μ „μ˜ 정적 νŽ˜μ΄μ§€κ°€ ν‘œμ‹œλ¨

πŸš€ 저도 이 ꡬ성을 μ‚¬μš©ν• λž˜μš”

레포 클둠 ν›„ Notion API ν‚€ λ°œκΈ‰κ³Ό site.config.ts 만 μˆ˜μ •ν•˜μ‹œλ©΄ λ°”λ‘œ μ΄μš©ν•˜μ‹€ 수 μžˆμŠ΅λ‹ˆλ‹€.
μ•„λž˜ 단계듀을 λ”°λΌμ™€μ£Όμ„Έμš” :)

1. μ»€μŠ€ν…€ν•œ λΈ”λ‘œκ·Έ ν…œν”Œλ¦Ώ λ°›κΈ°

Fork λ˜λŠ” Use this templateλ₯Ό μ‚¬μš©ν•˜μ—¬ 레포λ₯Ό λ°›μœΌμ‹  ν›„ μ•„λž˜ λͺ¨λ“  단계λ₯Ό μ§„ν–‰ν•˜μ‹œλ©΄ 문제 없이 μ‚¬μš©ν•˜μ‹€ 수 μžˆμŠ΅λ‹ˆλ‹€.

GitHub - 2skydev/blog

2. 기본적인 μ‚¬μš©λ°©λ²•

μ»€μŠ€ν…€ν•œ λΈ”λ‘œκ·Έ ν…œν”Œλ¦Ώμ€ μ•„λž˜μ˜ μ˜€ν”ˆμ†ŒμŠ€ κΈ°λ°˜μ΄λ―€λ‘œ ν•΄λ‹Ή κΉƒν—ˆλΈŒ README.mdμ—μ„œ μ‚¬μš©λ°©λ²•μ„ ν™•μΈν•΄μ£Όμ„Έμš”.

GitHub - transitive-bullshit/nextjs-notion-starter-kit - setup

3. λ…Έμ…˜ λ°μ΄ν„°λ² μ΄μŠ€ 보기 ν˜•νƒœ μΌμΉ˜μ‹œν‚€κΈ°

κΈ€ λͺ©λ‘μ΄ λ””μžμΈμ— 맞게 λ‚˜μ˜€λ €λ©΄ λ°μ΄ν„°λ² μ΄μŠ€μ˜ 보기 ν˜•νƒœκ°€ 저와 같은 ν˜•νƒœ 및 속성 μˆœμ„œκ°€ λ§žμ•„μ•Όν•©λ‹ˆλ‹€.
λ˜λ„λ‘ μ•„λž˜ λ§ν¬μ—μ„œ λ³΄μ΄λŠ”κ²ƒκ³Ό 같이 ν˜•νƒœμ™€ μ†μ„±μ˜ μˆœμ„œκ°€ μΌμΉ˜ν•˜κ²Œ λ§Œλ“€μ–΄μ£Όμ„Έμš”.

Notion - blog template

❗️ λ…Έμ…˜μ˜ 볡제 κΈ°λŠ₯을 μ‚¬μš©μ‹œ μ΄μƒν•˜κ²Œ λΆˆλŸ¬μ™€μ§€λŠ” ν˜„μƒμ΄ μžˆμŠ΅λ‹ˆλ‹€.
λΈ”λ‘œκ·Έλ‘œ μ‚¬μš©ν•˜λŠ” λ…Έμ…˜ νŽ˜μ΄μ§€λŠ” 볡제된 νŽ˜μ΄μ§€κ°€ μ•„λ‹Œ 직접 νŽ˜μ΄μ§€λ₯Ό λ§Œλ“€μ–΄μ•Όν•©λ‹ˆλ‹€.

4. 기본으둜 κ΅¬μ„±λ˜μ–΄ μžˆλŠ” νŒŒμΌλ“€ ꡐ체 및 제거

λ‹€μš΄λ°›μœΌμ‹  μ½”λ“œλŠ” 이미 μ œκ°€ μ‚¬μš©μ€‘μΈ λΈ”λ‘œκ·Έ μ†ŒμŠ€μ΄λ―€λ‘œ ν•„μš”μ—†λŠ” 파일 및 ꡐ체해야 λ˜λŠ” 이미지 νŒŒμΌλ“€μ΄ μžˆμŠ΅λ‹ˆλ‹€. ν•­λͺ©μ€ μ•„λž˜μ™€ κ°™μŠ΅λ‹ˆλ‹€.

  1. naver-site-verification 파일 제거: /public/naverXXXXXXXXXXX.html
  2. ν”„λ‘œν•„ 사진 λ³€κ²½: public/favicon-128x128.png, public/favicon-192x192.png, public/favicon.ico, public/favicon.png
  3. λ‘œλ”© 효과 λ³€κ²½: public/loading.gif, components/PageLoading.tsx
  4. site.config.ts λ³€κ²½: rootNotionPageId, name, domain, author, description, defaultPageIcon, navigationLinks, enableComment

5. Notion API ν‚€ λ°œκΈ‰ & ν™˜κ²½ λ³€μˆ˜ μ„€μ •

OG Image (social-image)와 λŒ“κΈ€ κΈ°λŠ₯은 Notion APIλ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€. μ•„λž˜ λ¬Έμ„œ 링크둜 이동해 ν‚€ λ°œκΈ‰μ„ μ§„ν–‰ν•΄μ£Όμ„Έμš”.

2skydev wiki - Notion API ν‚€ λ°œκΈ‰ & ν™˜κ²½ λ³€μˆ˜ μ„€μ •

6. λ¬Έμ„œ 읽기 [선택사항]

더 μžμ„Έν•œ λ¬Έμ„œλŠ” μ•„λž˜ 링크λ₯Ό ν™•μΈν•΄μ£Όμ„Έμš”.

2skydev/blog - Wiki

πŸ’‘ μœ„ 링크의 λ¬Έμ„œλŠ” μ‹œμž‘ν•˜κΈ° 와 주의점, Draft & Published κΈ°λŠ₯ λ“± μ—¬λŸ¬κ°€μ§€λ₯Ό μ„€λͺ…ν•©λ‹ˆλ‹€.
μ‚¬μš©ν•˜κΈ° μ „ κΌ­ ν•œλ²ˆ μ½μ–΄μ£Όμ„Έμš”.


🚧 μΆ”κ°€ μ»€μŠ€ν…€μ΄ ν•„μš”ν•΄μš”

yarn workspace κΈ°λŠ₯을 μ‚¬μš©ν•΄μ„œ μ„Έμ„Έν•œ λΆ€λΆ„κΉŒμ§€ λͺ¨λ“ˆ μ»€μŠ€ν…€μ΄ κ°€λŠ₯ν•˜λ„λ‘ κ΅¬μ„±ν–ˆμŠ΅λ‹ˆλ‹€.

μ˜€ν”ˆμ†ŒμŠ€ κΈ°μ€€ 이미 μ»€μŠ€ν…€ν•œ ν•­λͺ©λ“€

  • λͺ¨λ“ˆ μˆ˜μ •μ„ μœ„ν•΄ yarn workspace ꡬ성
  • λ‚ μ§œ 포맷
  • λ°μ΄ν„°λ² μ΄μŠ€ 속성 (μŠ€νƒ€μΌ, μž‘λ™ μ•ˆν•˜λŠ” 속성 λ“±)
  • λ°μ΄ν„°λ² μ΄μŠ€ ν•„ν„°κ°€ 적용이 μ•ˆλ˜λŠ” λΆ€λΆ„ μˆ˜μ •
  • μš°μΈ‘μ— ν‘œμ‹œλ˜λŠ” λͺ©μ°¨ μŠ€νƒ€μΌ
  • 기기의 닀크λͺ¨λ“œ λ³€κ²½μ‹œ μžλ™ 반영 (버그가 μžˆμ–΄μ„œ 직접 κ΅¬μ„±ν–ˆμŠ΅λ‹ˆλ‹€)
  • μ£Όμ†Œμ— ν•œκ΅­μ–΄κ°€ 듀어가지 μ•ŠλŠ” λΆ€λΆ„ μˆ˜μ • (Slug라고 ν•˜μ£ )
  • 닀크λͺ¨λ“œ λΆ€λΆ„μ μœΌλ‘œ μŠ€νƒ€μΌ 였λ₯˜κ°€ μžˆλŠ” λΆ€λΆ„ μˆ˜μ •
  • λ…Έμ…˜μ˜ λΈ”λŸ­λ“€ μŠ€νƒ€μΌ μˆ˜μ •
  • μ½œμ•„μ›ƒ νŠΉμ • μ•„μ΄μ½˜μΌλ•Œ λ°°κ²½ 색상 λ³€κ²½ 처리 (⚠️, 🚧, πŸ”΄, πŸ›‘, πŸ’‘)
  • λŒ“κΈ€ κΈ°λŠ₯ μΆ”κ°€
  • GA ꡬ성 μΆ”κ°€
  • λ°˜μ‘ν˜• μ²˜λ¦¬κ°€ λ―Έν‘ν•œ λΆ€λΆ„ μˆ˜μ •
  • a 링크 방식 -> Next.js Link μ»΄ν¬λ„ŒνŠΈ μ‚¬μš©
  • λ‘œλ”© 효과 μΆ”κ°€
  • νŽ˜μ΄μ§€ 이동간 μ• λ‹ˆλ©”μ΄μ…˜
  • μ΄ˆμ•ˆ κΈ°λŠ₯μΆ”κ°€ (draft, published)
  • OG Image (social-image) μž‘λ™λ°©μ‹ μ»€μŠ€ν…€
  • μ—¬λŸ¬ 였λ₯˜λ“€ μˆ˜μ • (μƒˆλ‘œ μƒμ„±λœ νŽ˜μ΄μ§€ 404, μ„œλ²„μ™€ ν΄λΌμ΄μ–ΈνŠΈμ˜ timezone 차이둜 hydration μ—λŸ¬, λ“±λ“±)

μŠ€νƒ€μΌ μ»€μŠ€ν…€

μ•„λž˜ ν•­λͺ© 말고도 μΆ”κ°€λ‘œ μ»€μŠ€ν…€μ΄ ν•„μš”ν•˜λ‹€λ©΄ μ›ν•˜μ‹œλŠ” νŒŒμΌμ„ μˆ˜μ •ν•˜κ±°λ‚˜ μΆ”κ°€ν•΄μ„œ μ§„ν–‰ν•˜μ‹œλ©΄ λ©λ‹ˆλ‹€.

  • νŽ˜μ΄μ§€ 크기 및 색상 λ³€μˆ˜λ“€: styles/custom/vars.scss
  • λ…Έμ…˜ κΈ°λ³Έ λΈ”λŸ­λ“€: styles/custom/notion-blocks.scss

μ„€μ • μ»€μŠ€ν…€

site.config.ts νŒŒμΌμ— μΆ”κ°€ 섀정이 κ°€λŠ₯ν•˜λ„λ‘ ꡬ성해 λ‘μ—ˆμŠ΅λ‹ˆλ‹€.
μΆ”κ°€ ꡬ성 μ •λ³΄λŠ” μ•„λž˜ ν…Œμ΄λΈ”μ„ ν™•μΈν•΄μ£Όμ„Έμš”.

ν‚€ κΈ°λ³Έκ°’ μ„€λͺ…
dateformat yyyy.MM.dd λ‚ μ§œ 포맷을 μ„€μ •ν•©λ‹ˆλ‹€. μœ νš¨ν•œ 값은 date-fns 포맷 λ¬Έμžμ—΄μž…λ‹ˆλ‹€.
defaultTheme system κΈ°λ³Έ ν…Œλ§ˆλ₯Ό μ„€μ •ν•©λ‹ˆλ‹€. μœ νš¨ν•œ 값은 light, dark, system μž…λ‹ˆλ‹€
hiddenPostProperties [] κΈ€ 상세 νŽ˜μ΄μ§€μ—μ„œ μˆ¨κΉ€ μ²˜λ¦¬ν•  속성 μ΄λ¦„λ“€μž…λ‹ˆλ‹€.
enableComment false κΈ€ 상세 νŽ˜μ΄μ§€μ—μ„œ λŒ“κΈ€ κΈ°λŠ₯을 ν™œμ„±ν™” μ—¬λΆ€μž…λ‹ˆλ‹€. λ…Έμ…˜ λŒ“κΈ€ κΈ°λŠ₯을 μ‚¬μš©ν•˜λ©° ν•΄λ‹Ή κΈ°λŠ₯을 μ‚¬μš© μ‹œ NOTION_API_KEY ν™˜κ²½ λ³€μˆ˜ 섀정이 ν•„μˆ˜ μž…λ‹ˆλ‹€.
contentPositionTextAlign left κΈ€ 상세 νŽ˜μ΄μ§€μ—μ„œ μš°μΈ‘μ— ν‘œμ‹œλ˜λŠ” λͺ©μ°¨μ˜ κΈ€μž 정렬을 μ„€μ •ν•©λ‹ˆλ‹€. μœ νš¨ν•œ 값은 left, right μž…λ‹ˆλ‹€