안녕하세요! 오늘은 Next.js를 사용해서 블로그를 만드는 과정에 대해 이야기해보려고 해요. Next.js는 React 기반의 풀스택 프레임워크로, 정적 사이트 생성(SSG)과 서버 사이드 렌더링(SSR)을 모두 지원하여 블로그 만들기에 매우 적합합니다.
왜 Next.js를 선택했나요?
블로그를 만들 때 고려해야 할 점들이 많습니다. SEO 최적화, 빠른 로딩 속도, 개발자 경험 등이 모두 중요합니다. Next.js는 이러한 요구사항들을 모두 만족시켜줍니다.
주요 장점들:
- SEO 최적화: 서버 사이드 렌더링으로 검색 엔진이 콘텐츠를 쉽게 인덱싱할 수 있습니다.
- 빠른 성능: 자동 코드 분할과 최적화로 빠른 로딩 속도를 제공합니다.
- 개발자 경험: TypeScript 지원, 핫 리로딩, 직관적인 파일 기반 라우팅을 제공합니다.
- 확장성: API 라우트를 통해 백엔드 기능도 쉽게 추가할 수 있습니다.
프로젝트 구조
Next.js 13+ 버전에서는 App Router를 사용하여 더 직관적인 파일 구조를 제공합니다. 각 폴더는 라우트를 나타내고, page.tsx 파일이 해당 라우트의 UI를 정의합니다.
src/
├── app/
│ ├── layout.tsx # 루트 레이아웃
│ ├── page.tsx # 홈페이지
│ ├── globals.css # 전역 스타일
│ └── posts/
│ └── [slug]/
│ └── page.tsx # 동적 포스트 페이지
└── components/ # 재사용 가능한 컴포넌트들스타일링 접근법
이 블로그에서는 CSS Modules를 사용했습니다. CSS Modules는 컴포넌트별로 스타일을 캡슐화하여 클래스명 충돌을 방지하고, 더 나은 유지보수성을 제공합니다.
앞으로의 계획
현재는 기본적인 블로그 구조만 갖춘 상태입니다. 앞으로 다음과 같은 기능들을 추가할 예정입니다:
- 마크다운 지원으로 포스트 작성
- 댓글 시스템
- 검색 기능
- 태그 시스템
- 다크 모드
- RSS 피드
마무리
Next.js로 블로그를 만드는 것은 정말 즐거운 경험이었습니다. React의 강력함과 Next.js의 편의성을 모두 활용할 수 있어서 개발 과정이 매우 효율적이었습니다.
앞으로도 계속해서 새로운 기능들을 추가하고 개선해나가면서, 이 블로그를 통해 개발 경험과 지식을 공유해나가고 싶습니다.