Next.js와 Firebase로 개인 기술 블로그 만들기

개발자라면 누구나 한 번쯤은 자신만의 기술 블로그를 만들고 싶어합니다. 오늘은 Next.js와 Firebase App Hosting을 활용해서 현대적인 기술 블로그를 구축하는 방법을 알아보겠습니다.

🚀 기술 스택 선택 이유

Next.js 15.0.0

• SSG/SSR/ISR 하이브리드 렌더링 지원
• TypeScript 네이티브 지원
• SEO 최적화에 탁월
• 성능 최적화 자동화

Firebase App Hosting

• 무료 호스팅 (일정 트래픽까지)
• CDN 자동 설정
• CI/CD 자동화
• 확장성 뛰어남

📂 프로젝트 구조

``` src/ ├── app/ │ ├── blog/ │ │ ├── [slug]/page.tsx # 개별 포스트 (ISR) │ │ └── page.tsx # 블로그 메인 │ ├── page.tsx # 홈페이지 │ └── layout.tsx ├── lib/ │ └── posts.ts # 마크다운 처리 └── components/ └── BlogPost.tsx ```

🔧 핵심 기능

1. 마크다운 처리

`gray-matter`와 `marked` 라이브러리를 사용해서 마크다운 파일을 HTML로 변환합니다.

```typescript import matter from 'gray-matter'; import { marked } from 'marked';

export function getPostBySlug(slug: string): Post | null { const fullPath = path.join(postsDirectory, `${slug}.md`); const fileContents = fs.readFileSync(fullPath, 'utf8'); const { data, content } = matter(fileContents);

return { ...data, content: marked(content), }; } ```

2. SEO 최적화

Next.js의 메타데이터 API를 활용해서 각 포스트마다 적절한 SEO 설정을 적용합니다.

3. 코드 하이라이팅

`prismjs`를 사용해서 코드 블록에 문법 강조를 적용합니다.

📈 성능 최적화

• SSG: 포스트 목록과 카테고리 페이지
• ISR: 개별 포스트 (댓글 업데이트 시 재생성)
• SSR: 검색 결과 페이지

🎯 다음 단계

1. 댓글 시스템 추가 (Firebase Firestore)
2. 검색 기능 구현
3. RSS 피드 생성
4. Google Analytics 연동

이제 여러분도 멋진 기술 블로그를 만들어보세요! 🚀