Next.js에서 params와 useSearchParams는 어떻게 다른가요?

// app/blog/[slug]/page.tsx

'use client';

import { useSearchParams } from 'next/navigation';

// params로 읽어야 할 slug를 useSearchParams로 읽으려 시도하고 있습니다.
// slug는 쿼리스트링이 아니라 경로 세그먼트이므로 undefined가 반환됩니다.
export default function BlogPost() {
  const searchParams = useSearchParams();
  const slug = searchParams.get('slug'); // 항상 null

  return <h1>{slug}</h1>;
}

// app/search/page.tsx

'use client';

import { useSearchParams } from 'next/navigation';

// Suspense 없이 useSearchParams를 사용하면 Next.js 빌드 시 오류가 발생합니다.
// "useSearchParams() should be wrapped in a suspense boundary" 오류
export default function SearchPage() {
  const searchParams = useSearchParams();
  const query = searchParams.get('q');

  return <p>검색어: {query}</p>;
}

// app/blog/[slug]/page.tsx
// params — 경로 세그먼트에서 값 읽기 (서버 컴포넌트)

type Props = {
  params: Promise<{ slug: string }>;
};

export default async function BlogPost({ params }: Props) {
  const { slug } = await params; // Next.js 15부터 params는 Promise

  return <h1>{slug}</h1>;
}

// app/search/page.tsx
// useSearchParams — 쿼리스트링에서 값 읽기 (클라이언트 컴포넌트 + Suspense 필수)

import { Suspense } from 'react';
import SearchResult from './SearchResult';

export default function SearchPage() {
  return (
    <Suspense fallback={<p>불러오는 중...</p>}>
      <SearchResult />
    </Suspense>
  );
}

// app/search/SearchResult.tsx

'use client';

import { useSearchParams } from 'next/navigation';

export default function SearchResult() {
  const searchParams = useSearchParams();
  const query = searchParams.get('q') ?? '';
  const page = searchParams.get('page') ?? '1';

  return (
    <div>
      <p>검색어: {query}</p>
      <p>페이지: {page}</p>
    </div>
  );
}