개발 블로그를 만들었는데 검색에 잘 안 잡힌다면?혹은 링크를 공유했는데 썸네일이나 설명이 엉뚱하게 나온다면?이건 바로 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 ..

Markdown 블로그를 만들면서 글 URL을 /posts/hello-world처럼 예쁘게 만들고 싶었죠?이때 꼭 알아야 할 것이 바로 Next.js의 동적 라우팅(Dynamic Routing)입니다.이번 글에서는 [slug].tsx 파일을 이용해 URL에 따라 Markdown 글을 렌더링하는 방법을 상세히 다룰게요.📁 1. 동적 라우팅이란?Next.js의 pages 폴더는 파일 기반 라우팅을 사용합니다.즉, pages/about.tsx를 만들면 /about 경로가 자동으로 생성돼요.하지만 블로그 글처럼 URL이 유동적인 경우엔?/posts/hello-world/posts/nextjs-guide/posts/markdown-tutorial이럴 땐 [slug].tsx처럼 대괄호로 감싼 파일명을 사용해 동적..