next.js와 react 등 프론트앤드 개발 중 발견한 팁 정리

[semteul]

이 discussion은 next.js와 react 등 프론트앤드 개발 중 발견한 팁을 정리합니다.

[semteul]

객체에 undefined값이 포함되어있다면 json serialization이 불가능함

vercel/next.js#11209

next.js에서 객체를 직렬화 할 때 undefined가 객체에 포함되어있으면 json serialization이 불가능 함.

특히 NextResponse 객체의 .json()을 사용할 때 주의해야 함.

• ) function type도 안됨. function 포함해서 실행 콘텍스트를 가진 객체들은 직렬화가 불가능함

---

참고

• json serialization : javascript 객체를 json 형태의 문자열로 변환 시켜 주는 것
• NextResponse : 주로 next.js의 미들웨어 api를 개발할 때, api의 반환 type으로 사용하는 response

[semteul]

params는 next.js 15버전부터 promise 처럼 사용됨

export default async function Foo({params}: { params: { uuid: string } }) {
  const {uuid} = await params;
  // ...
}

params를 사용하는 컴포넌트는 await를 사용해야 함. 단 promise 객체처럼 취급하지만 promise 객체는 아니기 때문에 ESLINT에서 promise가 아닌데 왜 await쓰냐고 경고문 띄우는 문제가 발생할 수 있음. 경고 무시하면 됨.

--
참고

• params : next.js의 app router에서, /[id]/[doc] 처럼, url로 특정 data를 보내면 이걸 받아주는 객체