Next.js 프로젝트 셋업

이제 본격적으로 개발을 시작할 시간입니다. 이번 편에서는 Next.js 프로젝트를 생성하고 필요한 설정을 완료하겠습니다.

프로젝트 생성

Next.js 앱 초기화

npx create-next-app@latest adsense-blog

설정 선택

• TypeScript: Yes
• ESLint: Yes
• Tailwind CSS: Yes
• App Router: Yes
• Turbopack: Yes (optional)

필수 패키지 설치

마크다운 처리

npm install gray-matter remark remark-html

• gray-matter: 마크다운 frontmatter 파싱
• remark: 마크다운을 HTML로 변환
• remark-html: remark HTML 플러그인

타입 정의

npm install --save-dev @types/node @types/react @types/react-dom

프로젝트 구조 설정

폴더 생성

mkdir -p posts/{daily-life,adventures,tips-guides,product-reviews}
mkdir -p components
mkdir -p lib
mkdir -p public/images

기본 구조

adsense-blog/
├── app/                 # Next.js App Router
├── components/          # React 컴포넌트
├── lib/                # 유틸리티 함수
├── posts/              # 마크다운 포스트
└── public/             # 정적 파일

환경 설정

tsconfig.json 최적화

경로 별칭 설정으로 import를 간편하게:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}

next.config.ts

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  // 이미지 최적화
  images: {
    formats: ['image/avif', 'image/webp'],
  },
  // 엄격 모드
  reactStrictMode: true,
};

export default nextConfig;

Tailwind CSS 설정

tailwind.config.js 커스터마이징

module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
        secondary: '#10b981',
      },
    },
  },
};

Git 저장소 설정

.gitignore 확인

node_modules/
.next/
out/
.DS_Store
*.log
.env*.local

첫 커밋

git init
git add .
git commit -m "Initial Next.js setup"

개발 서버 실행

npm run dev

브라우저에서 http://localhost:3000 접속하여 확인합니다.

다음 편 예고

다음 편에서는 블로그의 디자인과 레이아웃을 구성하고, Header, Footer, Sidebar 등의 컴포넌트를 만들어보겠습니다.

개발 환경 준비 완료!