Framework/NextJS

[NextJS] 쿼리와 페이지네이션을 url에 함께 잘 나타내는 법

뚜sh뚜sh 2022. 6. 8. 21:35
const pageQuery = (url: string, page: number) => {
    if (router.query.page !== undefined && url.includes("&page")) {
      return router.push(
        url.substring(0, url.indexOf("&page")) + `&page=${page}`
      );
    } else if (router.query.page === undefined && router.asPath.includes("?")) {
      return router.push(router.asPath + `&page=${page}`);
    } else {
      return router.push(getPathName(router.asPath) + `?page=${page}`);
    }
  };

나는 위와 같은 함수를 만들어서 사용하려고 했으나 

 

 

const query: Record<string, string> = getQuery(router.asPath);

// 페이지네이션 버튼을 클릭했을 때 router.push로 url 보내주기
router.push({
                  pathname: getPathName(router.asPath),
                  query: { ...query, page: i },
                });

너무 간단하게 코드를 짤 수 있어서 슬펐다...