해당 과제를 진행하면서 발생한 트러블을 작성해보려고 한다.
[문제]
app/api/rotation/route.ts
build 할때 라우터 핸들러 부분에서 아래와 같은 에러가 발생했다.
[원인]
오류의 원인은 Next.js의 API라우트에서 GET 핸들러가 반환해야 하는 타입과 일치하지 않기 때문에 발생했다고 한다.
Next.js의 GET 핸들러는 기본적으로 Response 객체를 반환해야하는데
내 코드는 ChampionRotationData 일반 객체를 반환하고 있기 때문이다.
Route Handlers에 대한 제대로된 개념이 박혀있지 않아 생긴 문제 같아 Next.js의 공식문서에 들어가 사용법을 확인해보았다.
[Route Handlers] 공식 문서 내용 일부 간단 정리
- Route Handlers는 app 디렉토리 안의 route.js|ts 파일로 정의되어야 한다.
예시
-
라우터 핸들러: API요청을 처리하는 기능으로, 특정 경로에 대해 GET, POST등의 요청을 처리할 수 있다.
-
Route Handlers는 app디렉토리 안에 어디에든 존재할 수 있지만
page.js와 route.js와 같이 존재할 수 없다. -
기본적으로 라우터핸들러는 캐시되지 않으므로 캐시하려면 force-static넣어야 한다.
export const dynamic = 'force-static' -
캐시된 데이터 재검증
ISR을 사용하여 캐시된 데이터를 다시 검증할 수 있다.
-
라우트 핸들러는 Next.js의 cookies와 같은 동적 함수와 함께 사용될 . 수있다.
cookies를 임포트하여 쿠키를 읽거나 설정할 수 있다.
RouteHandler에서 직접 호출하거나 다른 함수 내부에 중첩할 수 있다.
또는 Response를 사용하여 새 항목을 반환할 수 있다.등등의 라우트 핸들러에 대한 내용들을 확인할 수 있었다.
이제는 해당 내용을 토대로 오류를 처리해보겠다.
[해결]
- 이전에는 일반 객체를 리턴하던것을
아래의 이미처럼 Response객체로 리턴하게 수정하였고,
해당 라우터를 호출하는 코드들도 싹 수정해주었다.
- 이전 코드
- 수정 후 코드
[문제2]
에러 메시지
⚠ For production Image Optimization with Next.js, the optional 'sharp' package is strongly recommended. Run 'npm i sharp', and Next.js will use it automatically for Image Optimization.
Read more: https://nextjs.org/docs/messages/sharp-missing-in-production
위의 에러가 나타났다.
이 메시지는 Next.js에서 이미지 최적화를 사용할 때 sharp패키지가 설치되어 있지 않다는 경고이다.
sharp에 대해 알아보았더니,
sharp는 이미지 파일을 빠르고 효율적으로 처리하는 데 사용되는 라이브러리로 Next.js의 이미지 최적화 기능을 지원한다고 한다.
에러메시지의 링크로 들어가보니
next.js의 공식 문서로 들어가지고,
Sharp Missing In Production 라는 제목을 확인할 수 있었다.
Sharp패키지가 누락되었다고 한다.
yarn add sharp를 해서 설치해줘야한다고 한다.
Next.js는 기본적으로 이미지 최적화 기능을 사용해준다고 하는데
왜 설치하라는지 의문이 들어 확인해 보았더니
- 서버 사이드 이미지 프로세싱
Next.js의 이미지 최적화 기능은 주로 next/image컴포넌트와 함께 클라이언트 사이드 이미지 렌더링을 담당한다고 한다.
하지만 서버 사이드에서 이미지 변환, 크기 조정, 압축 등을 해야할 때에는 sharp와 같은 라이브러리가 필요하다고 한다.
단순히 next/image컴포넌트를 사용하여 클라이언트 측에서 이미지를 최적화하고 다양한 해상도로 제공하는 경우 sharp를 추가로 설치할 필요가 없다고 한다.
[원인]
이내용의 토대로 문제의 원인은 아무래도 nextConfig에 작성한
아래의 이미지 코드 때문 + 클라이언트 사이드 이미지 렌더링이 아닌 서버 사이드 이미지 렌더링 때문인 것 같다.
Next.js가 image/avif 및 image/webp 같은 고급 이미지 포맷을 지원할 때, 내부적으로 sharp 라이브러리를 사용하여 이미지 최적화를 수행한다고 한다.
[결론]
AVIF와 WebP포맷을 사용하려면 sharp를 프로젝트에 설치해야한다.
[해결]
yarn add sharp 하여 경고 메시지 제거
오류 없이 yarn start가 잘 실행되는것을 확인할 수 있었다.
