블로그를 만들고 나면 가장 많이 하는 고민 중 하나는 바로 글 작성입니다.매번 .mdx 파일을 VSCode에서 만들고 커밋하고 배포하기? 너무 번거롭죠.이번 글에서는 CMS 없이도 웹 UI에서 직접 마크다운을 작성하고,파일로 저장하고, 자동 배포되는 워크플로우를 구축하는 방법을 안내할게요.📦 1. 마크다운 에디터 선택: react-markdown-editor-litereact-markdown-editor-lite는 깔끔한 UI와 실시간 프리뷰가 가능한 에디터입니다.npm install react-markdown-editor-lite react-markdown// components/MarkdownEditor.tsximport dynamic from 'next/dynamic';import 'react-m..

개발 블로그를 만들었는데 검색에 잘 안 잡힌다면?혹은 링크를 공유했는데 썸네일이나 설명이 엉뚱하게 나온다면?이건 바로 SEO와 메타 태그가 빠졌기 때문입니다.이번 글에서는 Next.js의 next/head 컴포넌트를 활용해서검색엔진 최적화(SEO)는 물론, Open Graph / Twitter Card 설정까지 완벽히 다뤄볼게요.🌐 1. next/head란?Next.js는 기본적으로 각 페이지에서 head 태그를 설정할 수 있도록 next/head 컴포넌트를 제공합니다.이를 통해 페이지별로 , 태그 등을 자유롭게 조작할 수 있어요.import Head from 'next/head';export default function Home() { return ( 코드를 걷는 ..

지금까지 우리는 Markdown으로 글을 만들고, URL을 동적으로 연결하고, MDX까지 적용했어요.이제 진짜 블로그의 “얼굴”인 포스트 목록 페이지를 꾸며볼 차례입니다.단순한 목록만 있는 블로그는 이제 지났어요. 최신순 정렬, 태그 필터링, 페이지네이션까지 있는 진짜 포스트 리스트를 만들어봅시다.🌀 1. 최신순 정렬된 목록 만들기기본적으로는 getSortedPostsData()에서 이미 날짜를 기준으로 정렬하고 있을 거예요.// lib/posts.tsexport function getSortedPostsData() { const files = fs.readdirSync(postsDirectory); const posts = files.map((fileName) => { const id = f..

블로그를 만들면서 “다크모드 지원해야 할까?”라고 고민한 적 있나요?요즘은 사용자들이 어두운 테마에 익숙해져 있고, 밤에 글을 읽는 비율도 높다 보니 다크모드는 필수가 되어가고 있어요.이번 글에서는 next-themes를 사용해 Next.js 블로그에 다크모드를 손쉽게 적용하는 방법을 소개합니다.🌟 1. next-themes란?next-themes는 Next.js에서 다크모드와 라이트모드를 쉽게 토글할 수 있게 도와주는 라이브러리입니다.OS 설정 감지 가능클래스 기반 테마 적용 방식SSR에서도 안정적으로 작동📦 2. 설치하기npm install next-themes그 다음, _app.tsx에 ThemeProvider를 감싸줘야 합니다.// pages/_app.tsximport { ThemeProvid..

Next.js로 블로그를 만들면서 가장 많이 고민하는 부분 중 하나는 바로 “어떤 스타일링 방식을 쓸까?” 입니다.가장 대표적인 선택지로는 Tailwind CSS와 Styled Components가 있죠.이번 글에서는 두 방식의 차이점, 장단점, 어떤 상황에 어울리는지를 실제 블로그 프로젝트 관점에서 비교해볼게요.🌀 Tailwind CSS란?Utility-first CSS Framework로, 클래스 이름만으로 UI를 빠르게 구성하는 방식입니다. Save장점:빠른 prototyping클래스 이름만으로 디자인 일관성 유지전역 스타일 충돌 없음단점:HTML이 복잡해지고 가독성 떨어질 수 있음처음엔 클래스 의미 파악이 어려움💅 Styled Components란?CSS-in-JS 방식으로, JS/TS 안에..

Markdown 기반 블로그를 만들다 보면, 문서 안에 React 컴포넌트를 넣고 싶은 순간이 오죠.예를 들어, 설명 중간에 나 같은 컴포넌트를 삽입하고 싶을 때 말이에요.이럴 때 MDX를 사용하면 Markdown과 React의 조합으로 무한한 확장성을 가진 블로그를 만들 수 있습니다.💡 MDX란?MDX는 Markdown + JSX의 합성어로, Markdown 문서 안에서 React 컴포넌트를 바로 사용할 수 있게 해주는 포맷입니다.기존 Markdown 문법 그대로 사용 가능필요한 위치에 컴포넌트만 삽입 가능예: .mdx 파일에서 사용즉, 블로그의 글 안에 **동적인 인터랙션**도 추가할 수 있어요!📦 1. MDX 관련 패키지 설치npm install @next/mdx @mdx-js/loader ..