Next.js Notion Blog
🧑‍💻

Next.js Notion Blog

Description
프론트엔드 공부 겸 블로그 제작!
category
Development
Tag
Next.js
tailwindCSS
Vercel
Date
Mar 6, 2024 02:56 PM

Github(구 사이트)

Next.js-Notion-Blog
BobongKu • Updated May 24, 2024

결과물

Bobong
Bobong's Portfolio
Bobong
http://bobong.blog

구축 환경

  • Framework : Next.js 14
  • Server : Vercel
 

기술 요약

Next.Js

Next.js by Vercel - The React Framework
Production grade React applications that scale. The world's leading companies use Next.js by Vercel to build static and dynamic websites and web applications.
Next.js by Vercel - The React Framework
https://nextjs.org/
Next.js by Vercel - The React Framework
버전은 12를 사용했는데 현재는 14까지 빌드된 상태이다.
최신버전은 PHP처럼 DB도 연결해서 관리하고 API도 만들고 하는거 같던데.. Frontend가 맞는지..

TailWindCSS

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
https://tailwindcss.com/
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
css는 TailwindCSS를 이용하여 구축하였다.
기존 css와 다르게 className에 입력해 css를 적용시킬 수 있어서 너무 좋았다.
프로젝트를 진행하면서 css가 가장 무서웠는데 그걸 좀 극복하게 해준 좋은 친구 🥰

참고 사이트

기본적인 HTML+TailwindCSS Template 제공
Tailblocks — Ready-to-use Tailwind CSS blocks
Ready-to-use Tailwind CSS blocks
Tailblocks — Ready-to-use Tailwind CSS blocks
https://tailblocks.cc/
TailwindCSS Cheat Sheet 제공
Tailwind CSS Cheat Sheet
Cheat sheet to learn Tailwind CSS quickly. Browse and search all Tailwind utility classes or CSS properties on one page.
Tailwind CSS Cheat Sheet
https://nerdcave.com/tailwind-cheat-sheet
TailwindCSS Template 무료도 있고 유료도 있다.
Tailwind Awesome
A curated directory of the best Tailwind templates and UI kits to kickstart your next design.
Tailwind Awesome
https://www.tailwindawesome.com/?price=free&type=template
Tailwind Awesome

Vercel

Vercel: Build and deploy the best Web experiences with The Frontend Cloud
Vercel's Frontend Cloud gives developers the frameworks, workflows, and infrastructure to build a faster, more personalized Web.
Vercel: Build and deploy the best Web experiences with The Frontend Cloud
https://vercel.com/
Vercel: Build and deploy the best Web experiences with The Frontend Cloud
무료로 Frontend 웹 호스팅이 된다고 한다. AWS에 배포 할 생각이었는데 더 좋다구!!!!
그래서 바로 호스팅케이알에서 도메인을 구매해 버렸다구!
아니 더 놀라운건 도메인 등록만 해주었는데 인증서까지 알아서 해결해 주었다.

React-notion-x

react-notion-x
NotionX • Updated Jan 13, 2025
처음엔 notion API를 사용해서 글 정보를 markdown으로 받은 뒤 랜더링 시켜주려했는데…
CSS문제가 어마어마 했다. 😭
그래서 도망치다가 마추친 녀석 덕분에 5일만에 이 프로젝트를 마무리 지을 수 있었다.

Giscus

giscus
A comments widget built on GitHub Discussions.
giscus
https://giscus.app/ko
giscus
댓글 기능을 Github의 Discussions를 이용해 무료로 DB없이 사용 할 수 있다.

Hits

HITS
Easy way to know how many visitors are viewing your Github, Website, Notion.
HITS
https://hits.seeyoufarm.com/
HITS
조회수를 아이콘을 손쉽게 사용 할 수 있다.
Hits 캡쳐사진
Hits 캡쳐사진

Google Search Console

Google
Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.
Google
https://search.google.com/
구글 검색 엔진을 위해서 이용해야 하는 사이트

Lottie

LottieFiles: Download Free lightweight animations for website & apps.
Effortlessly bring the smallest, free, ready-to-use motion graphics for the web, app, social, and designs. Create, edit, test, collaborate, and ship Lottie animations in no time!
LottieFiles: Download Free lightweight animations for website & apps.
https://lottiefiles.com/
LottieFiles: Download Free lightweight animations for website & apps.
간단히 말해서 animation 있는 svg라고 보면 될 것 같다. react모듈은 2개 있는것 같은데 원하는 걸로 사용하면 될 것 같다.

PrismJS themes

prism-themes
PrismJS • Updated Mar 26, 2024
다양한 테마의 prismJs theme들이 있으니 코드를 표현하는게 영 시원치 않으면 한번 바꿔보자!