[Next.js] url에 파라미터 넘기지 않을 때 디폴트 값 설정해주기

---

이런 상황이 있을 수 있다.

예를 들어 sample.com이라는 사이트의 상품 리스트 페이지는 sample.com/lists 라고 치자.

근데 리스트 페이지는 어디나 그렇듯 소팅을 해야하고 전체 목록을 보여준다고 해도 ‘전체’ 카테고리가 선택 돼 있을 것이다.

때문에 sample.com/lists?sort=all 등의 파라미터를 설정해야하는데,

sample.com/lists로 파라미터 없이 접속했을 때 에러로 인한 리다이렉트가 아닌 디폴트로 sort=all 등의 파라미터를 설정해줄 수는 없을까?

---

Nextjs의 장점인 ssr을 사용하면  설정하기 쉽다.

원리는, 서버사이드에서 파라미터를 파싱해서 없으면 해당 파라미터를 가진 url로 리다이렉트 시켜주고 그렇지 않으면 원래대로 넘기는 방식이다.

아래와 같이 설정하면 된다.

export async function getServerSideProps(ctx) {
// url query에서 sort항목의 값을 가져옴
  const { sort } = ctx.query;
// 이건 알아서… DATA_API_URL은 임의의 값이다.
  const res = await fetch(`DATA_API_URL`);
  const data = await res.json();
// sort항목이 없다면, 
  if (!sort) {
    return {
// 있다 치고 리다이렉트 시켜버림
      redirect: {
        permanent: false,
        destination: `/lists?sort=all`,
      },
    };
// 있으면 있는대로 패치한 데이터만 보내기
  } else {
    return {
      props: { data },
    };
  }
}

---

간단한 예시를 들기 위해 이렇게 적었으나 

실무에서는 특정상품을 선택하지 않았을 때 디폴트로 리스트 0번째 값의 상품을 보여지게 하는 식으로 많이 쓴다.