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처럼 대괄호로 감싼 파일명을 사용해 동적..

Next.js로 블로그 프로젝트를 시작했다면, 이제 진짜 “블로그 같은 기능”을 만들어볼 차례죠.바로 Markdown(.md) 파일을 블로그 글처럼 렌더링하는 기능입니다.Markdown은 개발자들이 가장 사랑하는 문서 형식 중 하나입니다. 이 글에서는 Next.js 프로젝트에서 Markdown 파일을 읽고, 글 목록과 상세 페이지를 구성하는 방법을 차근차근 설명드릴게요.📁 1. posts 폴더 만들고 .md 파일 생성하기먼저 프로젝트 루트에 posts 폴더를 만들고, Markdown 포스트 파일을 작성합니다.my-blog/├── posts/│ ├── hello-world.md│ └── nextjs-guide.mdhello-world.md 예시:---title: "Hello, World!"date..

개발을 하다 보면, 내 성장과 배움을 기록하고 싶은 순간이 오죠.이전까지는 Notion이나 Tistory에 글을 써왔다면, 이번엔 직접 나만의 블로그를 만들면서 개발 실력을 한 단계 더 높여보는 건 어떨까요?Next.js는 정적 사이트 생성(SSG), 서버 사이드 렌더링(SSR), API 라우팅까지 가능한 만능 프레임워크입니다. 이 글에서는 Next.js를 활용해 나만의 블로그를 만드는 첫걸음을 함께 시작해보겠습니다.🚀 1. 프로젝트 생성 및 초기 세팅npx create-next-app my-blog --typescriptmy-blog: 프로젝트 디렉토리 이름 (원하는 이름으로 설정)--typescript: 타입스크립트 사용. 요즘은 거의 기본!설치가 완료되면, 아래 명령어로 개발 서버를 실행할 수 있..