블로그를 만들며 다양한 이슈를 겪었고, 그 중에서도 github action을 통해 배포하는 과정에서 해결했던 내용을 정리합니다.
1. 정적 배포 오류 (Static Export 오류)
발생한 이슈
정적 페이지를 생성하는 과정에서, generateStaticParams를 사용하지 않은 페이지에서 아래와 같은 빌드 오류가 발생했습니다.
> Build error occurred
[Error: Page "/[category]/[slug]" is missing "generateStaticParams()" so it cannot be used with "output: export" config.]
Error: Process completed with exit code 1.해결방법
- 해당 페이지에 generateStaticParams 함수를 추가해 해결했습니다.
- category 정보를 query로 받는 코드에서도 동일한 이슈가 발생했는데, 해당 방식은 정적 페이지에서 사용할 수 없어 [slug] 형태로 구조를 변경했습니다.
2. 프로필 이미지 로딩 오류
발생한 이슈
next/image 컴포넌트를 사용했을 때, 이미지 최적화와 관련된 오류로 인해 배포 후 프로필 이미지가 정상적으로 보이지 않았습니다.
TypeError: /home/runner/work/_actions/actions/configure-pages/v5/src/config-parser.js#L290
We were unable to determine how to inject the site metadata into your config. Generated URLs may be incorrect.
The base URL for this site should be https://zinnli.github.io/. Please ensure your framework is configured to generate relative links appropriately.
Error: Cannot read properties of undefined (reading 'type')- GitHub Pages에서 배포 시 base URL 설정(https://zinnli.github.io/)이 필요함
- next/image의 자동 최적화 기능이 작동하지 않아 이미지가 제대로 렌더링되지 않음
해결방법
unoptimized 속성을 추가하여 이미지 최적화를 비활성화하여 해결했습니다.
// 해결 코드!
<Image
className="w-[100%] h-[100%] bg-gray object-cover"
fill
src="/profile.jpeg"
alt="profile"
unoptimized
/>