📘 Next.js 기초 강좌

1. 목표

• /blog : 글 목록 페이지
• /blog/[id] : 글 상세 페이지
• SCSS 모듈로 스타일링
• 배포 후 실제 블로그처럼 접근 가능

데이터는 실습이므로 JSONPlaceholder API(https://jsonplaceholder.typicode.com/posts)를 사용합니다.

2. 블로그 목록 페이지

src/app/blog/page.tsx

import Link from "next/link";
import styles from "../../styles/blog.module.scss";

type Post = {
  userId: number;
  id: number;
  title: string;
  body: string;
};

export default async function BlogPage() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts", {
    cache: "no-store",
  });
  const posts: Post[] = await res.json();

  return (
    <section className={styles.blogList}>
      <h1>블로그 글 목록</h1>
      <ul>
        {posts.slice(0, 10).map((post) => (
          <li key={post.id}>
            <Link href={`/blog/${post.id}`}>
              <h2>{post.title}</h2>
              <p>{post.body.slice(0, 80)}...</p>
            </Link>
          </li>
        ))}
      </ul>
    </section>
  );
}

3. 블로그 상세 페이지

src/app/blog/[id]/page.tsx

import styles from "../../../styles/blog.module.scss";

type Post = {
  userId: number;
  id: number;
  title: string;
  body: string;
};

export default async function BlogDetailPage({
  params,
}: {
  params: { id: string };
}) {
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${params.id}`,
    { cache: "no-store" }
  );
  if (!res.ok) {
    return <p>해당 글을 불러올 수 없습니다.</p>;
  }

  const post: Post = await res.json();

  return (
    <article className={styles.blogDetail}>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </article>
  );
}

4. 스타일링 (SCSS)

src/styles/blog.module.scss

.blogList {
  max-width: 720px;
  margin: 2rem auto;
  padding: 1rem;

  h1 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }

  ul {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 1.2rem;
  }

  li {
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 1rem;
    background: #fff;
    transition: box-shadow 0.2s;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    h2 {
      font-size: 1.25rem;
      margin: 0 0 0.5rem;
    }

    p {
      color: #555;
      font-size: 0.95rem;
      margin: 0;
    }
  }
}

.blogDetail {
  max-width: 720px;
  margin: 2rem auto;
  padding: 1.5rem;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #eee;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);

  h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }

  p {
    line-height: 1.7;
    color: #333;
  }
}

5. 네비게이션에 블로그 추가

src/app/layout.tsx → <nav> 안에 추가:

<Link href="/blog">블로그</Link>

6. 오늘의 정리

• /blog : 글 목록 → JSON API 연동
• /blog/[id] : 글 상세 → 동적 라우팅
• SCSS로 블로그 스타일링
• Vercel 배포 시 https://프로젝트주소.vercel.app/blog 로 접근 가능