page.tsx — Route Component

~22 min · page, params, Promise

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

Page 의 모양

page.tsx 는 default React component 를 export 해. Default 가 Server Component 라서 async 가능. Server Component 는 props 거의 안 받아 — framework 가 두 가지 prop 만 주입:

params: [slug] 같은 segment 의 route 파라미터.
searchParams: URL query string 파라미터.

v15+ 에선 둘 다 Promise

v14 → v15 의 큰 breaking change: params 와 searchParams 가 Promise 야. await 해야 해. Client Component 에선 React.use(params). Promise wrap 이 parallel rendering 풀어줘 — params resolution 기다리지 않고 다른 작업이 시작 가능.

Type helper

Next.js 가 next entry 에 typed helper 게시. PageProps<'/blog/[slug]'> 가 literal route path 기반으로 fully typed params 줘.

Code

Awaited params 의 async page·tsx

// app/blog/[slug]/page.tsx
type Props = {
  params: Promise<{ slug: string }>;
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
};

export default async function BlogPost({ params, searchParams }: Props) {
  const { slug } = await params;
  const { sort = 'newest' } = await searchParams;
  const post = await fetchPost(slug, { sort });

  return (
    <article>
      <h1>{post.title}</h1>
      <p className="text-sm text-gray-500">sort: {sort}</p>
      <div dangerouslySetInnerHTML={{ __html: post.html }} />
    </article>
  );
}

PageProps 로 typed·tsx

import type { PageProps } from 'next';

export default async function Page({ params }: PageProps<'/blog/[slug]'>) {
  const { slug } = await params; // typed: { slug: string }
  return <Article slug={slug} />;
}

Client Component 변형·tsx

'use client';
import { use } from 'react';

export default function ClientPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = use(params); // React.use 가 Promise unwrap
  return <div>Slug: {slug}</div>;
}

External links

Exercise

params 와 searchParams 쓰는 기존 page 하나 골라. 둘 다 await 로 변환, PageProps 로 type 박고 regression 없는지 확인.

Progress

Progress is local-only — sign in to sync across devices.

← PreviousFile-Based Routing 기본 Next →layout.tsx — 공유 UI

이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

🔔 답글 알림 (로그인 필요)

로그인 — 댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.