Next13부터는 getServerSideProps를 굳이 거치지 않더라도 params와 searchParams를 가져올 수 있다.

getServerSideProps의 인자인 context 객체의 구조

getServerSideProps 함수에서 사용되는 context 객체는 다음과 같은 구조를 가진다.

• params: 동적 라우트 매개변수
• query: URL의 쿼리 파라미터
• req: HTTP 요청 객체
• res: HTTP 응답 객체
• preview: 프리뷰 모드 여부
• previewData: 프리뷰 모드 데이터
• resolvedUrl: 현재 요청의 URL
• locale, locales, defaultLocale: i18n 관련 정보

 

Next12에서 params와 searchParams를 받는 방법

Next12에선 이 getServerSideProps에서 반환한 context를 아래처럼 받을 수 있다.

export async function getServerSideProps(context) {
  const { params, query } = context;
  
  return {
    props: {
      params,
      searchParams: query,
    },
  };
}


const PostPage = ({ params, searchParams }) => {
  const { id } = params;
  const term = searchParams.term || '';

  return (
    <div>
      <h1>Post ID: {id}</h1>
      {term && <p>Search term: {term}</p>}
    </div>
  );
};

물론 useRouter 훅을 이용해 가져올수도 있긴한데..

그건 기존 리액트 방식과 동일하니까 생략하겠다.

 

Next13에서 params와 searchParams를 받는 방법

이제 13부터는 그냥 페이지 컴포넌트에서 인자로 받아올 수 있다.

타입스크립트를 사용할 시 타입 지정은 잘 해줄 것!

export default function PostPage({ params, searchParams }) {
  const { id } = params;
  const term = searchParams.term;

  return (
    <div>
      <h1>Post {id}</h1>
      <p>Search term: {term}</p>
      {/* 여기서 id를 사용하여 데이터를 가져오거나 표시할 수 있습니다 */}
    </div>
  );
}