오늘은 router 심화에 대해서 알아보겠습니다.
우선 우리가 페이지를 보여줄때 데이터를 가져와야될것이 있습니다. 하지만 이게 로딩 되지 않으면 데이터가 나오지 않는데 이것을 해결하기위해 데이터가 다 로딩되면 화면이뜨게 하는 것이 있습니다.
next.js에서는 이것을getServerSideProps로해결합니다 이것을 알아 보겠습니다.
pages./ack.js
export default function index({ success }) {
console.log(success);
return "index2";
}
export async function getServerSideProps() {
return {
props: {
success,
},
};
}
이렇게 하고 확인하면
이런식으로 success가 전달되서 콘솔에 찍히는것을 확인할수 있습니다.
이런식으로 async await로 데이터를 다받고 화면이 보이게 됩니다.
그럼 다음으로 ack/2312312이런 아무 숫자가 들어오고 페이지가 뜨는것을 해보겠습니다.
ack 폴더 안에 [id].js 생성
이렇게 하면 ack뒤에 오는 내용은 id라는 변수에 저장되어서 전달이 됩니다.
[id].js
export default function popo({ id }) {
console.log(id);
return <div>id</div>;
}
export function getServerSideProps({ params: { id } }) {
return {
props: {
id,
},
};
}
아까 배운것을 활용해서 params안에 id를 꺼내서 전달해주고 찍어보면 주소 뒷부분이 나옵니다 한번 확인해보면
이런식으로 주소 뒷부분이 제대로 출력된것을 확인할수 있습니다.