Next.js 블로그 만들기 — 카드 그리드와 포스트 상세 페이지

import Link from 'next/link'
import dayjs from 'dayjs'
import Tag from '@/components/common/Tag'
import { SITE_CONFIG } from '@/lib/constants'
import type { PostMeta } from '@/types/post'
 
export default function PostCard({ post }: { post: PostMeta }) {
  const thumbnail = post.thumbnail ?? SITE_CONFIG.defaultThumbnail
 
  return (
    <Link href={`/posts/${post.slug}`} className="group block">
      <article className="h-full overflow-hidden rounded-lg
        border border-border bg-bg-card
        transition-all duration-200
        hover:-translate-y-1 hover:shadow-lg">
 
        <div className="aspect-video overflow-hidden bg-bg-secondary">
          <img
            src={thumbnail}
            alt={post.title}
            className="h-full w-full object-cover
              transition-transform duration-200
              group-hover:scale-105"
            loading="lazy"
          />
        </div>
 
        <div className="p-5">
          <h2 className="mb-2 text-lg font-bold leading-snug
            text-text group-hover:text-accent">
            {post.title}
          </h2>
          <p className="mb-4 line-clamp-2 text-sm text-text-secondary">
            {post.description}
          </p>
          {post.tags.length > 0 && (
            <div className="mb-3 flex flex-wrap gap-1.5">
              {post.tags.map((tag) => (
                <Tag key={tag} name={tag} />
              ))}
            </div>
          )}
          <div className="text-xs text-text-tertiary">
            <time dateTime={post.date}>
              {dayjs(post.date).format('YYYY년 M월 D일')}
            </time>
            <span> · </span>
            <span>{post.readingTime}</span>
          </div>
        </div>
      </article>
    </Link>
  )
}

export default function PostCardGrid({ posts }: { posts: readonly PostMeta[] }) {
  if (posts.length === 0) {
    return (
      <div className="py-20 text-center text-text-secondary">
        <p className="text-lg">아직 작성된 글이 없습니다.</p>
      </div>
    )
  }
 
  return (
    <div className="grid grid-cols-1 gap-5
      sm:grid-cols-2 lg:grid-cols-3">
      {posts.map((post) => (
        <PostCard key={post.slug} post={post} />
      ))}
    </div>
  )
}

import PostCardGrid from '@/components/post/PostCardGrid'
import { getAllPostMetas } from '@/lib/posts'
 
export default function HomePage() {
  const posts = getAllPostMetas()
 
  return (
    <section className="mx-auto max-w-5xl px-4 py-10">
      <PostCardGrid posts={posts} />
    </section>
  )
}

export async function generateStaticParams() {
  const slugs = getAllSlugs()
  return slugs.map((slug) => ({ slug }))
}

export async function generateMetadata({
  params,
}: PostPageProps): Promise<Metadata> {
  const { slug } = await params
  const post = getPostBySlug(slug)
 
  return {
    title: post.title,
    description: post.description,
    openGraph: {
      title: post.title,
      description: post.description,
      type: 'article',
      publishedTime: post.date,
      tags: [...post.tags],
    },
  }
}

export default async function PostPage({ params }: PostPageProps) {
  const { slug } = await params
  const post = getPostBySlug(slug)
  const content = await compileMdx(post.content, mdxComponents)
 
  return (
    <article className="py-10">
      <header className="mx-auto mb-10 max-w-3xl px-4">
        <h1 className="mb-4 text-3xl font-extrabold
          leading-tight tracking-tight md:text-4xl">
          {post.title}
        </h1>
        <div className="text-sm text-text-secondary">
          <time>{dayjs(post.date).format('YYYY년 M월 D일')}</time>
          <span> · {post.readingTime}</span>
        </div>
        <div className="mt-4 flex flex-wrap gap-2">
          {post.tags.map((tag) => <Tag key={tag} name={tag} />)}
        </div>
      </header>
      <PostContent>{content}</PostContent>
    </article>
  )
}

function MdxImage(props) {
  return (
    <img {...props} alt={props.alt ?? ''} loading="lazy" />
  )
}
 
function MdxLink(props) {
  const isExternal = props.href?.startsWith('http')
  return (
    <a
      {...props}
      target={isExternal ? '_blank' : undefined}
      rel={isExternal ? 'noopener noreferrer' : undefined}
    />
  )
}
 
export const mdxComponents = {
  img: MdxImage,
  a: MdxLink,
}

$ pnpm build
 
Route (app)                          Size  First Load JS
┌ ○ /                               165 B      106 kB
├ ○ /_not-found                     125 B      102 kB
└ ● /posts/[slug]                   125 B      102 kB
    ├ /posts/blog-setup
    ├ /posts/blog-theme
    └ /posts/blog-pages
 
○  (Static)   prerendered as static content
●  (SSG)      prerendered as static HTML