Next.js 블로그 만들기 — 정적 블로그에 검색 기능 추가

import fs from 'node:fs'
import path from 'node:path'
import matter from 'gray-matter'
import readingTime from 'reading-time'
 
const CONTENT_DIR = path.join(process.cwd(), 'content')
const OUTPUT_PATH = path.join(process.cwd(), 'public', 'search-index.json')
 
function getSearchIndex() {
  if (!fs.existsSync(CONTENT_DIR)) {
    return []
  }
 
  return fs
    .readdirSync(CONTENT_DIR)
    .filter((file) => file.endsWith('.mdx'))
    .map((file) => {
      const raw = fs.readFileSync(path.join(CONTENT_DIR, file), 'utf-8')
      const { data } = matter(raw)
      const slug = file.replace('.mdx', '')
      const stats = readingTime(raw)
 
      return {
        slug,
        title: data.title,
        description: data.description,
        tags: data.tags ?? [],
        date: data.date,
        readingTime: stats.text,
      }
    })
    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
}
 
const index = getSearchIndex()
fs.writeFileSync(OUTPUT_PATH, JSON.stringify(index), 'utf-8')

{
  "scripts": {
    "prebuild": "node scripts/generate-sitemap.mjs && node scripts/generate-search-index.mjs"
  }
}

'use client'
 
import { useState, useEffect, useMemo } from 'react'
import { BASE_PATH } from '@/lib/constants'
 
interface SearchItem {
  readonly slug: string
  readonly title: string
  readonly description: string
  readonly tags: readonly string[]
  readonly date: string
  readonly readingTime: string
}
 
export function useSearch() {
  const [index, setIndex] = useState<readonly SearchItem[]>([])
  const [query, setQuery] = useState('')
  const [isLoaded, setIsLoaded] = useState(false)
 
  useEffect(() => {
    if (isLoaded) return
 
    fetch(`${BASE_PATH}/search-index.json`)
      .then((res) => res.json())
      .then((data: SearchItem[]) => {
        setIndex(data)
        setIsLoaded(true)
      })
      .catch((err) => {
        console.error('Failed to load search index:', err)
      })
  }, [isLoaded])
 
  const results = useMemo(() => {
    const trimmed = query.trim().toLowerCase()
    if (trimmed.length === 0) return []
 
    return index.filter((item) => {
      const titleMatch = item.title.toLowerCase().includes(trimmed)
      const descMatch = item.description.toLowerCase().includes(trimmed)
      const tagMatch = item.tags.some((tag) =>
        tag.toLowerCase().includes(trimmed)
      )
      return titleMatch || descMatch || tagMatch
    })
  }, [query, index])
 
  return { query, setQuery, results, isLoaded } as const
}

'use client'
 
import { useEffect, useRef } from 'react'
import Link from 'next/link'
import dayjs from 'dayjs'
import Tag from '@/components/common/Tag'
import { useSearch } from '@/hooks/useSearch'
 
interface SearchOverlayProps {
  readonly onClose: () => void
}
 
export default function SearchOverlay({ onClose }: SearchOverlayProps) {
  const inputRef = useRef<HTMLInputElement>(null)
  const { query, setQuery, results } = useSearch()
 
  // 열리면 자동 포커스
  useEffect(() => {
    inputRef.current?.focus()
  }, [])
 
  // body 스크롤 잠금
  useEffect(() => {
    document.body.style.overflow = 'hidden'
    return () => {
      document.body.style.overflow = ''
    }
  }, [])
 
  // ESC로 닫기
  useEffect(() => {
    function handleKeyDown(e: KeyboardEvent) {
      if (e.key === 'Escape') {
        onClose()
      }
    }
    window.addEventListener('keydown', handleKeyDown)
    return () => window.removeEventListener('keydown', handleKeyDown)
  }, [onClose])
 
  return (
    <div
      className="fixed inset-0 top-14 z-40 bg-bg/80 backdrop-blur-md"
      onClick={(e) => {
        if (e.target === e.currentTarget) onClose()
      }}
    >
      <div className="mx-auto mt-8 max-w-2xl px-4">
        {/* 검색 입력창 */}
        <div className="relative">
          {/* 돋보기 아이콘 */}
          <svg className="absolute top-1/2 left-4 h-5 w-5 -translate-y-1/2 text-text-secondary" ...>
            <circle cx="11" cy="11" r="8" />
            <line x1="21" y1="21" x2="16.65" y2="16.65" />
          </svg>
          <input
            ref={inputRef}
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="검색어를 입력하세요..."
            className="w-full rounded-xl border border-border bg-bg
              py-4 pr-16 pl-12 text-lg ..."
          />
          <kbd className="absolute top-1/2 right-4 -translate-y-1/2 ...">
            ESC
          </kbd>
        </div>
 
        {/* 검색 결과 */}
        {query.trim().length > 0 && (
          <div className="mt-4 max-h-[60vh] overflow-y-auto rounded-xl border border-border bg-bg">
            {results.map((item) => (
              <Link key={item.slug} href={`/posts/${item.slug}`} onClick={onClose}>
                <h3>{item.title}</h3>
                <p className="line-clamp-1">{item.description}</p>
                <div>{dayjs(item.date).format('YYYY년 M월 D일')} · {item.readingTime}</div>
              </Link>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}

'use client'
 
import { useState, useEffect, useCallback } from 'react'
import SearchOverlay from '@/components/search/SearchOverlay'
 
export default function SearchButton() {
  const [isOpen, setIsOpen] = useState(false)
 
  const open = useCallback(() => setIsOpen(true), [])
  const close = useCallback(() => setIsOpen(false), [])
 
  useEffect(() => {
    function handleKeyDown(e: KeyboardEvent) {
      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
        e.preventDefault()
        setIsOpen((prev) => !prev)
      }
    }
    window.addEventListener('keydown', handleKeyDown)
    return () => window.removeEventListener('keydown', handleKeyDown)
  }, [])
 
  return (
    <>
      <button
        type="button"
        onClick={open}
        className="flex h-9 w-9 items-center justify-center rounded-lg
          text-text-secondary transition-colors hover:bg-bg-secondary"
        aria-label="검색"
      >
        {/* 돋보기 SVG */}
      </button>
      {isOpen && <SearchOverlay onClose={close} />}
    </>
  )
}

import SearchButton from '@/components/search/SearchButton'
import ThemeToggle from '@/components/common/ThemeToggle'
 
export default function Navbar() {
  return (
    <header className="fixed top-0 ... z-50 ...">
      <nav className="mx-auto flex h-14 max-w-5xl items-center justify-between px-4">
        <Link href="/">...</Link>
        <div className="flex items-center gap-1">
          <SearchButton />
          <ThemeToggle />
        </div>
      </nav>
    </header>
  )
}