Next.js로 블로그 만들기 #4 댓글 (Server Actions)

const commentsBySlug = {};
 
export function getComments(slug) {
  return commentsBySlug[slug] ?? [];
}
 
export function addComment(slug, comment) {
  if (!commentsBySlug[slug]) commentsBySlug[slug] = [];
  commentsBySlug[slug].push({
    id: crypto.randomUUID(),
    ...comment,
    createdAt: new Date().toISOString(),
  });
}

{
  id: '...uuid...',
  author: '철수',
  text: '좋은 글이네요',
  createdAt: '2026-05-15T10:30:00.000Z',
}

'use server';
 
import { revalidatePath } from 'next/cache';
import { addComment } from '../../lib/comments';
 
export async function postComment(slug, prevState, formData) {
  const author = formData.get('author')?.trim();
  const text = formData.get('text')?.trim();
 
  if (!author) return { error: '작성자 이름을 입력해주세요' };
  if (author.length > 30) return { error: '작성자 이름은 30자 이내로' };
  if (!text) return { error: '댓글 내용을 입력해주세요' };
  if (text.length > 500) return { error: '댓글은 500자 이내로' };
 
  addComment(slug, { author, text });
  revalidatePath(`/posts/${slug}`);
 
  return { success: true };
}

'use client';
 
import { useActionState, useEffect, useRef } from 'react';
import { useFormStatus } from 'react-dom';
import { postComment } from './actions';
 
function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending} style={{ padding: '6px 16px' }}>
      {pending ? '등록 중...' : '댓글 달기'}
    </button>
  );
}
 
export default function CommentForm({ slug }) {
  const action = postComment.bind(null, slug);
  const [state, formAction] = useActionState(action, {});
  const formRef = useRef(null);
 
  useEffect(() => {
    if (state.success) {
      formRef.current?.reset();
    }
  }, [state]);
 
  return (
    <form
      ref={formRef}
      action={formAction}
      style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginTop: '24px' }}
    >
      <input
        name="author"
        placeholder="작성자"
        required
        maxLength={30}
        style={{ padding: '6px' }}
      />
      <textarea
        name="text"
        placeholder="댓글 내용"
        rows={3}
        required
        maxLength={500}
        style={{ padding: '6px' }}
      />
      <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
        <SubmitButton />
        {state.error && (
          <span style={{ color: 'tomato', fontSize: '14px' }}>{state.error}</span>
        )}
        {state.success && (
          <span style={{ color: 'green', fontSize: '14px' }}>등록 완료!</span>
        )}
      </div>
    </form>
  );
}

const action = postComment.bind(null, slug);

const [state, formAction] = useActionState(action, {});

useEffect(() => {
  if (state.success) {
    formRef.current?.reset();
  }
}, [state]);

import { getComments } from '../../lib/comments';
 
export default function CommentList({ slug }) {
  const comments = getComments(slug);
 
  if (comments.length === 0) {
    return <p style={{ color: '#888', marginTop: '16px' }}>아직 댓글이 없습니다. 첫 댓글을 달아보세요!</p>;
  }
 
  return (
    <ul style={{ listStyle: 'none', padding: 0, marginTop: '16px' }}>
      {comments.map(comment => (
        <li key={comment.id} style={{ padding: '12px', borderBottom: '1px solid #eee' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <strong>{comment.author}</strong>
            <small style={{ color: '#888' }}>
              {new Date(comment.createdAt).toLocaleString('ko-KR')}
            </small>
          </div>
          <p style={{ margin: '4px 0', whiteSpace: 'pre-wrap' }}>{comment.text}</p>
        </li>
      ))}
    </ul>
  );
}

import { Suspense } from 'react';
import { notFound } from 'next/navigation';
import { getPostBySlug, getAllSlugs } from '../../lib/posts';
import { compileMDX } from 'next-mdx-remote/rsc';
import remarkGfm from 'remark-gfm';
import rehypePrettyCode from 'rehype-pretty-code';
import CommentList from './CommentList';
import CommentForm from './CommentForm';
 
export async function generateStaticParams() {
  return getAllSlugs().map(slug => ({ slug }));
}
 
export default async function PostPage({ params }) {
  const { slug } = await params;
  const post = getPostBySlug(slug);
 
  if (!post || post.frontmatter.draft) {
    notFound();
  }
 
  const { content } = await compileMDX({
    source: post.content,
    options: {
      mdxOptions: {
        remarkPlugins: [remarkGfm],
        rehypePlugins: [[rehypePrettyCode, { theme: 'github-light' }]],
      },
    },
  });
 
  return (
    <article style={{ maxWidth: '600px', margin: '0 auto', padding: '24px' }}>
      <h1>{post.frontmatter.title}</h1>
      <small style={{ color: '#888' }}>{post.frontmatter.date}</small>
      <p style={{ color: '#555' }}>{post.frontmatter.description}</p>
      <hr />
      {content}
 
      <section style={{ marginTop: '48px' }}>
        <h2>댓글</h2>
        <Suspense fallback={<p>댓글 불러오는 중...</p>}>
          <CommentList slug={slug} />
        </Suspense>
        <CommentForm slug={slug} />
      </section>
    </article>
  );
}

'use server';
export async function postComment(slug, prevState, formData) {
  // ... 검증 ...
  addComment(slug, { ... });
  return { success: true };
  // revalidatePath 호출 누락 → 화면이 갱신 안 됨
}

export async function postComment(slug, prevState, formData) {
  if (!formData.get('text')) throw new Error('내용 없음');
  // ...
}

'use client';
import { getComments } from '../../lib/comments';
// ...