[Next] _app.tsx에서 url parmater 사용

상황

next.js에서는 SSR을 사용하기 때문에 url에 있는 query를 받아올 수가 없다.

 

해결 1

next page에서 getServerSideProps 함수를 이용해 query를 받아올 수 있다.

const Page: NextPage = ({ params }) => {

}

export async function getServerSideProps (context) {
  const req = context.req;

  const params = new URLSearchParams(req._parsedUrl.query);

  return { props: { params } };
}​

 

해결 2

해결 1의 방법으로 page 내부에서는 url parameter를 사용할 수 있다.

하지만 _app.tsx와 같이 next page 이전의 컴포넌트에서 device를 판단해야 한다면 어떻게 해야 할까?

 

next 공식 문서 에 나와있듯이 _app.tsx에서는 다른 함수들을 사용할 수 없고 오로지 getInitialProps만 함께 사용할 수 있다.

따라서, 다음과 같이 코드를 구성하면 된다.

import App from 'next/app';

function MyApp ({ Component, pageProps, params }) {

}

MyApp.getInitialProps = async (context) => {
  const { ctx } = context;
  const params = new URLSearchParams(ctx?.req._parsedUrl.query);

  const appProps = await App.getInitialProps(context);

  return { ...appProps, params };
};