[Next.js] Navigation part.2

params, searchParams

params: dynamic route

searchParams: query parameters

example) '/some/thing?id=1' → thing(params), id=1(searchParams)

 

export default async function Test({params, searchParams}: {
  params: Promise<{dynamicThing: string}>;
  searchParams: Promise<{query?: type}>;
}) {
  const {dynamicThing} = await params;
  const {query=defaultValue} = await searchParams;
  
  // return ...
}

두 가지의 파람은 page.tsx에서 사용할 수 있는 매개변수이고 layout.tsx에서는 params에만 접근할 수 있습니다.

 

클라이언트 컴포넌트에서는 async 키워드를 사용할 수 없습니다. 그 대신 use 함수를 사용해서 두 파람을 가져와 사용할 수 있습니다.

'use client';

import Link from "next/link";
import { use } from "react";

export default function Test({params, searchParams}: {
  params: Promise<{dynamicThing: string}>;
  searchParams: Promise<{query?: type}>;
}) {
  const {dynamicThing} = use(params);
  const {query=defaultValue} = use(searchParams);
  
  // return ...
}

 

참고

https://nextjs-ko.org/docs/app/api-reference/file-conventions/page

https://www.youtube.com/watch?v=b4ba60j_4o8&list=PLC3y8-rFHvwhIEc4I4YsRz5C7GOBnxSJY