Next.js searchParams에 적절한 타입 주기

작성‌

수정‌

// next.ts

export interface NextAppPage<T extends string> {
  params: { slug: string }; // dynamic route segment로 [slug]를 사용했음을 가정
  searchParams: Partial<Record<T, string | string[] | undefined>>;
}

dynamic route segment로 [slug]를 사용했음을 가정한 상황입니다.

searchParams와 마찬가지로 key에 제너릭을 넣어 줘도 좋을 것 같습니다.

// @/app/auth/page.tsx

// ...
type AuthPageProps = NextAppPage<"redirectTo">;

export default async function AuthPage({
  searchParams: { redirectTo },
}: AuthPageProps) {
  const supabase = createServerClient();

  const {
    data: { user },
  } = await supabase.auth.getUser();

  if (user) {
    redirect(
      typeof redirectTo === "string" && redirectTo ? redirectTo : "/dashboard",
    );
  }

  return (
    <div>
      {/* ... */}
    </div>
  );
}

Next.js Docs

File Conventions: page.js

Next.js Docs

Routing: Dynamic Routes