블로그 프로젝트 요구사항 예시:

• 마크다운으로 작성된 블로그 포스트

• 카테고리 및 태그 기능

• 댓글 시스템

• 검색 기능

• 반응형 디자인

선택한 도구:

• Next.js: React 기반 SSG

• MDX: 마크다운 + JSX

• Vercel: 호스팅 및 배포

• Supabase: 댓글 시스템용 데이터베이스

프로젝트 초기화:

npx create-next-app@latest my-jamstack-blog
cd my-jamstack-blog
npm install gray-matter remark remark-html next-mdx-remote

폴더 구조:

my-jamstack-blog/
├── components/       # 재사용 가능한 컴포넌트
├── content/          # 마크다운 콘텐츠
│   └── posts/        # 블로그 포스트
├── lib/              # 유틸리티 함수
├── pages/            # Next.js 페이지
│   ├── api/          # API 라우트
│   ├── blog/         # 블로그 관련 페이지
│   └── index.js      # 홈페이지
├── public/           # 정적 파일
└── styles/           # CSS 파일

마크다운 파일 예시 (content/posts/hello-jamstack.md):

---
title: "JAMstack으로 블로그 만들기"
date: "2025-03-26"
excerpt: "JAMstack 아키텍처를 사용해 블로그를 만드는 방법을 알아봅시다."
tags: ["jamstack", "nextjs", "tutorial"]
---

# JAMstack으로 블로그 만들기

안녕하세요! 이 글에서는 JAMstack을 사용해 블로그를 만드는 방법을 알아볼 거예요.

## JAMstack이란?

JAMstack은 JavaScript, API, Markup의 약자로...

마크다운 파일 처리 (lib/posts.js):

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

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

export function getAllPostSlugs() {
  const fileNames = fs.readdirSync(postsDirectory);
  return fileNames.map(fileName => {
    return {
      params: {
        slug: fileName.replace(/\.md$/, '')
      }
    };
  });
}

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

export function getAllPosts() {
  const fileNames = fs.readdirSync(postsDirectory);
  const allPostsData = fileNames.map(fileName => {
    const slug = fileName.replace(/\.md$/, '');
    return getPostBySlug(slug);
  });
  
  return allPostsData.sort((a, b) => {
    if (a.frontmatter.date < b.frontmatter.date) {
      return 1;
    } else {
      return -1;
    }
  });
}

블로그 목록 페이지 (pages/blog/index.js):

import Link from 'next/link';
import { getAllPosts } from '../../lib/posts';

export default function BlogIndex({ posts }) {
  return (
    <div className="blog-container">
      <h1>블로그</h1>
      <div className="posts-grid">
        {posts.map(post => (
          <article key={post.slug} className="post-card">
            <h2>
              <Link href={`/blog/${post.slug}`}>
                <a>{post.frontmatter.title}</a>
              </Link>
            </h2>
            <p className="post-date">{post.frontmatter.date}</p>
            <p className="post-excerpt">{post.frontmatter.excerpt}</p>
            <div className="post-tags">
              {post.frontmatter.tags.map(tag => (
                <span key={tag} className="tag">{tag}</span>
              ))}
            </div>
          </article>
        ))}
      </div>
    </div>
  );
}

export async function getStaticProps() {
  const posts = getAllPosts();
  return {
    props: {
      posts
    }
  };
}

블로그 포스트 페이지 (pages/blog/[slug].js):

import { MDXRemote } from 'next-mdx-remote';
import { serialize } from 'next-mdx-remote/serialize';
import { getAllPostSlugs, getPostBySlug } from '../../lib/posts';
import CommentSection from '../../components/CommentSection';

export default function BlogPost({ post, mdxSource }) {
  return (
    <article className="blog-post">
      <h1>{post.frontmatter.title}</h1>
      <p className="post-date">{post.frontmatter.date}</p>
      <div className="post-tags">
        {post.frontmatter.tags.map(tag => (
          <span key={tag} className="tag">{tag}</span>
        ))}
      </div>
      <div className="post-content">
        <MDXRemote {...mdxSource} />
      </div>
      <CommentSection postSlug={post.slug} />
    </article>
  );
}

export async function getStaticPaths() {
  const paths = getAllPostSlugs();
  return {
    paths,
    fallback: false
  };
}

export async function getStaticProps({ params }) {
  const post = getPostBySlug(params.slug);
  const mdxSource = await serialize(post.content);
  
  return {
    props: {
      post,
      mdxSource
    }
  };
}

Supabase 설정:

npm install @supabase/supabase-js

Supabase 클라이언트 (lib/supabase.js):

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseKey);

댓글 컴포넌트 (components/CommentSection.js):

import { useState, useEffect } from 'react';
import { supabase } from '../lib/supabase';

export default function CommentSection({ postSlug }) {
  const [comments, setComments] = useState([]);
  const [newComment, setNewComment] = useState('');
  const [name, setName] = useState('');
  
  useEffect(() => {
    fetchComments();
    
    // 실시간 구독 설정
    const subscription = supabase
      .from('comments')
      .on('INSERT', payload => {
        setComments(current => [...current, payload.new]);
      })
      .subscribe();
      
    return () => {
      supabase.removeSubscription(subscription);
    };
  }, [postSlug]);
  
  async function fetchComments() {
    const { data, error } = await supabase
      .from('comments')
      .select('*')
      .eq('post_slug', postSlug)
      .order('created_at', { ascending: true });
      
    if (error) console.error('댓글을 가져오는 중 오류 발생:', error);
    else setComments(data || []);
  }
  
  async function handleSubmit(e) {
    e.preventDefault();
    
    if (!newComment.trim() || !name.trim()) return;
    
    const { error } = await supabase
      .from('comments')
      .insert([
        { 
          post_slug: postSlug, 
          name, 
          content: newComment 
        }
      ]);
      
    if (error) console.error('댓글 작성 중 오류 발생:', error);
    else {
      setNewComment('');
      // 댓글은 실시간 구독을 통해 자동으로 업데이트됨
    }
  }
  
  return (
    <div className="comments-section">
      <h3>댓글 ({comments.length})</h3>
      
      <div className="comments-list">
        {comments.map(comment => (
          <div key={comment.id} className="comment">
            <div className="comment-header">
              <span className="comment-author">{comment.name}</span>
              <span className="comment-date">
                {new Date(comment.created_at).toLocaleDateString()}
              </span>
            </div>
            <p className="comment-content">{comment.content}</p>
          </div>
        ))}
      </div>
      
      <form onSubmit={handleSubmit} className="comment-form">
        <div className="form-group">
          <label htmlFor="name">이름</label>
          <input
            type="text"
            id="name"
            value={name}
            onChange={e => setName(e.target.value)}
            required
          />
        </div>
        <div className="form-group">
          <label htmlFor="comment">댓글</label>
          <textarea
            id="comment"
            value={newComment}
            onChange={e => setNewComment(e.target.value)}
            required
          />
        </div>
        <button type="submit">댓글 작성</button>
      </form>
    </div>
  );
}

Vercel 배포 과정:

1. GitHub에 프로젝트 푸시
2. Vercel 계정 생성 및 로그인
3. GitHub 저장소 가져오기
4. 환경 변수 설정 (Supabase 키 등)
5. 배포 버튼 클릭

성능 최적화 팁:

• 이미지 최적화를 위해 Next.js의 Image 컴포넌트 사용

• 코드 스플리팅 및 지연 로딩 적용

• 폰트 최적화 (next/font 사용)

• 불필요한 JavaScript 줄이기

• 메타데이터 및 SEO 최적화

next.config.js 설정:

module.exports = {
  images: {
    domains: ['images.unsplash.com'],
  },
  i18n: {
    locales: ['ko'],
    defaultLocale: 'ko',
  },
  // ISR 설정 (증분 정적 재생성)
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'https://your-api.com/:path*',
      },
    ];
  },
};