프로젝트 설정 및 구성

Part 2에 오신 것을 환영합니다! 오늘은 Next.js 블로그 프로젝트를 처음부터 설정하고 시작하는 데 필요한 모든 것을 구성하겠습니다.

프로젝트 생성

먼저 공식 CLI를 사용하여 새로운 Next.js 프로젝트를 생성합니다:

npx create-next-app@latest my-blog

몇 가지 질문이 표시됩니다:

• TypeScript? Yes (권장)
• ESLint? Yes
• Tailwind CSS? Yes (쉬운 스타일링을 위해)
• src/ directory? Yes
• App Router? Yes (새로운 App Router 사용)
• Import alias? Yes (@/*)

프로젝트 구조

생성 후 프로젝트 구조는 다음과 같아야 합니다:

my-blog/
├── src/
│   ├── app/
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── globals.css
│   ├── components/
│   └── lib/
├── public/
├── package.json
└── next.config.js

의존성 설치

필요한 패키지를 설치합니다:

npm install gray-matter remark remark-html date-fns
npm install -D @types/node

이 패키지들은 다음과 같이 도움을 줍니다:

• gray-matter: 마크다운 frontmatter 파싱
• remark: 마크다운 콘텐츠 처리
• remark-html: 마크다운을 HTML로 변환
• date-fns: 날짜를 보기 좋게 포맷팅

폴더 구조 생성

필요한 폴더를 생성합니다:

mkdir -p src/components
mkdir -p src/lib
mkdir -p posts
mkdir -p public/images

구성 파일

TypeScript 구성

tsconfig.json은 이미 생성되어 있어야 합니다. 다음 내용이 포함되어 있는지 확인합니다:

{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Next.js 구성

next.config.js를 업데이트합니다:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ['localhost'],
  },
}

module.exports = nextConfig

첫 번째 파일 생성

블로그 포스트를 처리하기 위한 간단한 유틸리티 파일을 만듭니다:

src/lib/posts.ts

import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';

const postsDirectory = path.join(process.cwd(), 'posts');

export interface Post {
  slug: string;
  title: string;
  date: string;
  excerpt: string;
  content: string;
}

export function getAllPosts(): Post[] {
  const fileNames = fs.readdirSync(postsDirectory);
  const posts = fileNames
    .filter(fileName => fileName.endsWith('.md'))
    .map(fileName => {
      const slug = fileName.replace(/\.md$/, '');
      const fullPath = path.join(postsDirectory, fileName);
      const fileContents = fs.readFileSync(fullPath, 'utf8');
      const { data } = matter(fileContents);

      return {
        slug,
        title: data.title,
        date: data.date,
        excerpt: data.excerpt,
        content: ''
      };
    });

  return posts.sort((a, b) => (a.date > b.date ? -1 : 1));
}

설정 테스트

개발 서버를 시작합니다:

npm run dev

http://localhost:3000에 접속하면 기본 Next.js 환영 페이지가 표시되어야 합니다.

다음 단계

다음 파트에서는 다음을 포함한 블로그 구조를 만들 것입니다:

• 블로그 포스트 목록 페이지
• 개별 포스트 페이지
• 레이아웃 컴포넌트
• 스타일링

모든 준비가 끝났습니다! Part 3에서 실제 블로그 구축을 시작해봅시다!