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>;
}

File-system conventions: page.js | Next.js

API reference for the page.js file.

nextjs.org 새 탭에서 열립니다.

File-system conventions: Dynamic Segments | Next.js

Dynamic Route Segments can be used to programmatically generate route segments from dynamic data.

nextjs.org 새 탭에서 열립니다.