📘 Next.js로 블로그 프로젝트 시작하기 — 설치부터 폴더 구조까지

개발을 하다 보면, 내 성장과 배움을 기록하고 싶은 순간이 오죠.
이전까지는 Notion이나 Tistory에 글을 써왔다면, 이번엔 직접 나만의 블로그를 만들면서 개발 실력을 한 단계 더 높여보는 건 어떨까요?

Next.js는 정적 사이트 생성(SSG), 서버 사이드 렌더링(SSR), API 라우팅까지 가능한 만능 프레임워크입니다. 이 글에서는 Next.js를 활용해 나만의 블로그를 만드는 첫걸음을 함께 시작해보겠습니다.

---

🚀 1. 프로젝트 생성 및 초기 세팅

npx create-next-app my-blog --typescript

• my-blog: 프로젝트 디렉토리 이름 (원하는 이름으로 설정)
• --typescript: 타입스크립트 사용. 요즘은 거의 기본!

설치가 완료되면, 아래 명령어로 개발 서버를 실행할 수 있어요.

cd my-blog
npm run dev

브라우저에서 http://localhost:3000에 접속하면 Next.js 기본 페이지가 보일 거예요!

---

🧱 2. 기본 폴더 구조 이해하기

my-blog/
├── public/             # 정적 파일 (이미지, favicon 등)
├── styles/             # CSS 또는 Tailwind 설정
├── pages/              # 라우팅이 자동으로 연결되는 폴더
│   ├── index.tsx       # 메인 페이지 (/)
│   └── _app.tsx        # 전체 공통 레이아웃 설정
├── tsconfig.json       # 타입스크립트 설정
├── next.config.js      # Next.js 전역 설정 파일
└── package.json        # 패키지 설정 및 스크립트

Next.js는 pages 폴더 내에 있는 파일을 자동으로 라우팅합니다.
예를 들어 pages/about.tsx 파일을 만들면 /about 경로로 접근할 수 있어요.

---

🌿 3. Tailwind CSS로 스타일링 준비

우리가 만들 블로그는 미니멀하고 감성적인 디자인이 중요하죠.
Tailwind CSS를 사용해 효율적인 스타일링을 해볼 거예요.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.config.js와 postcss.config.js가 생성됩니다.

tailwind.config.js 설정에 다음과 같이 경로를 추가해줘야 Tailwind가 제대로 작동해요:

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

styles/globals.css에는 Tailwind의 기본 지시어를 추가합니다:

@tailwind base;
@tailwind components;
@tailwind utilities;

이제 npm run dev로 다시 실행하면 Tailwind 스타일을 자유롭게 사용할 수 있어요!

---

📄 4. 첫 번째 페이지 만들어보기

이제 우리가 직접 만든 블로그 페이지를 만들 차례예요.

// pages/index.tsx
export default function Home() {
  return (
    <div className="max-w-2xl mx-auto mt-10">
      <h1 className="text-3xl font-bold">코드를 걷는 사람의 블로그</h1>
      <p className="mt-4 text-gray-600">개발과 삶을 기록합니다.</p>
    </div>
  );
}

Tailwind 덕분에 빠르게 이쁜 UI가 나오죠? 이제 이 위에 마크다운 렌더링, 포스트 목록, 태그 필터 등 기능을 한 층씩 쌓아갈 수 있어요.

---

✅ 마무리하며

이 글에서는 Next.js로 블로그 프로젝트를 시작하는 방법, 폴더 구조, 기본 스타일링까지 알아보았습니다.
다음 글에서는 Markdown 파일을 포스트로 렌더링하는 방법을 알아볼게요.

👣 첫 걸음을 내디뎠다면, 이제 꾸준히 나만의 블로그를 만들어갈 차례입니다.

“기록은 성장의 시작이다”