Next.js는 다양한 렌더링 전략을 지원합니다. Static Generation(SSG), Server Side Rendering(SSR), 그리고 Incremental Static Regeneration(ISR).하지만 각 방식이 언제, 왜 필요한지는 생각보다 헷갈릴 수 있어요. 이번 글에서는 3가지 렌더링 전략의 차이점과, 블로그에 어떤 방식이 가장 잘 어울리는지 실제 예시와 함께 정리해볼게요.📦 1. SSG (Static Site Generation)빌드 시점에 HTML을 생성해서 정적인 파일로 제공하는 방식입니다.export async function getStaticProps() { const posts = await getPosts(); return { props: { posts ..

개발자가 아닌 사람도 글을 올릴 수 있게 하려면?디자인도 예쁘고, 에디터도 직관적인 Notion을 CMS처럼 연결해보는 건 어떨까요?이번 글에서는 Notion API를 통해 Notion에 작성한 글을 Next.js 블로그에 자동으로 연결하는 방법을 소개할게요.🔧 1. Notion 통합(Integration) 생성Notion 개발자 페이지에서 새 Integration 생성Internal Integration Token 발급 → 저장CMS로 사용할 Notion 데이터베이스 페이지 생성해당 페이지 → “공유” → 만든 Integration에 권한 부여📑 2. 데이터베이스 구조 만들기Notion에서 아래와 같은 컬럼을 가진 DB를 생성합니다:Title: 글 제목 (제목 타입)Slug: URL용 고유 문자열P..

“내 블로그, 누가 보고 있을까?”단순한 궁금증에서 시작했지만, 트래픽 분석은 블로그 성장을 위한 가장 강력한 데이터 도구가 됩니다.이번 글에서는 Next.js 블로그에 GA4(Google Analytics 4)를 연결해서방문자 수, 페이지뷰, 클릭 흐름 등을 추적하는 방법을 소개할게요.🔧 1. Google Analytics 4 속성 생성Google Analytics 접속계정 생성 → 속성 생성 → 웹 선택측정 ID (G-XXXXXXX) 복사우리는 이 측정 ID를 Next.js 프로젝트에 삽입하게 됩니다.🧩 2. gtag 스크립트 삽입하기Next.js에서 페이지별 추적을 위해 _app.tsx와 _document.tsx에 아래 코드를 추가합니다.1) _document.tsx에 스크립트 삽입// page..

블로그에서 좋아요(Like)와 북마크(Bookmark) 기능은 작지만 강력한 UX 요소입니다.간단한 버튼 클릭 하나로 독자는 반응을 남기고, 글쓴이는 피드백을 얻을 수 있죠.이번 글에서는 Next.js에서 좋아요와 북마크 기능을 다음 방식으로 구현해볼게요:① 좋아요: 클릭 시 서버에 count 증가② 북마크: 로컬스토리지 기반, 로그인 없이도 구현 가능🩷 1. 좋아요 기능: 서버에 count 저장1) API 만들기// pages/api/like.tslet likes: { [slug: string]: number } = {};export default function handler(req, res) { const { slug } = req.query; if (req.method === 'GET') {..

코드를 GitHub에 올리기만 했는데 블로그가 자동으로 배포된다면?이건 마법이 아니고, 바로 Vercel + GitHub의 조합 덕분입니다.이번 글에서는 Next.js의 공식 배포 플랫폼인 Vercel을 통해자동 빌드 + 자동 배포가 포함된 완전한 CI/CD 환경을 만드는 과정을 안내할게요.🧾 1. Vercel이란?Vercel은 Next.js 개발사에서 만든 정적 & 서버리스 웹사이트를 위한 클라우드 플랫폼입니다.Next.js와 최적의 호환성GitHub 연동 → 커밋만 해도 자동 배포커스텀 도메인, 환경변수, 프리뷰 빌드 지원즉, 블로그 운영에 딱 맞는 플랫폼이죠!🛠️ 2. Vercel 배포 준비먼저 코드를 GitHub에 푸시합니다:git initgit remote add origin https://..

블로그는 글을 쓰는 것도 중요하지만, 소통이 있어야 살아있는 공간이 됩니다.방명록처럼 “잘 봤어요!”라는 댓글 하나도 글쓴이에겐 큰 힘이 되죠.이번 글에서는 댓글 기능을 구현하는 세 가지 방식:① Disqus: 가장 대중적인 외부 댓글 위젯② GitHub Discussion: 깃헙 계정을 이용한 댓글 연동③ 자체 API: 직접 구축하는 댓글 저장/조회 시스템① Disqus 연동하기 (가장 쉬운 방법)Disqus는 외부 댓글 위젯을 HTML에 삽입하는 방식입니다.Disqus 사이트에서 회원가입 및 사이트 등록shortname 확인 (예: myblog-123)다음 스크립트를 포스트 페이지에 삽입import { DiscussionEmbed } from 'disqus-react';export default fu..