Next.js에서 params 객체를 전달할 때 주의할 사항

Next.js에서 동적 라우팅을 사용하여 페이지를 생성할 때, params 객체를 적절하게 처리하는 것이 중요합니다. 특히 params 객체 내에 필요한 속성이 없는 경우, 함수 내부에서 해당 속성을 추출할 수 없게 됩니다.

 

문제 상황

동적 경로를 설정한 페이지에서 params 객체를 사용하려고 할 때, id 속성이 존재하지 않는다면 함수 내부에서 이를 추출할 수 없습니다.

 

const result = await getTechById({ techId: params.id });

 

여기서 params.id를 참조하려 하지만 params 객체 내에 id 속성이 없기 때문에 오류가 발생합니다.

 

getTechById에서 받아올 때, techId를 사용했다면 문제가 없지만, 서버에서 id를 사용하고 프론트에서 techId를 사용했기 때문에 문제가 발생한겁니다.

 

const result = await getTechById({ id: params.id });

 

따라서 문제를 해결하려면 params 객체에서 속성을 올바르게 추출하고 함수에 전달해야 합니다.

 

Next.js에서 params 객체를 사용할 때는 객체 내에 필요한 속성이 있는지 확인하는 것이 중요합니다. 필요한 경우, 속성 이름을 올바르게 지정하여 함수에 전달해야 합니다.