Next.js 프로젝트 :: 배포(gh-pages, netlify, vercel)

📖  목차

 

이름하야 next.js 배포 삽질 기록,,,,,😂
결론적으로는 vercel을 이용하여 배포를 진행했습니다!

🎈 gh-pages

gh-pages 배포 참고
그동안 모든 프로젝트를 배포할때에는 간단하게 gh-pages를 이용했었다.
그래서 이번 프로젝트도 기존에 했던 것 처럼 gh-pages를 이용하여 배포하려고 했으나,, 예상하지 못한 문제를 만났다.

오류 : gssp(getServerSideProps) + export

    "build": "next build && next export",

gh-pages로 배포하기 위해서는 next export 명령어를 통해 out폴더를 생성해내야 하는데 export 진행 시 아래와 같은 오류가 발생한다.

Error occurred prerendering page "/contents/[id]". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Error for page /contents/[id]: pages with `getServerSideProps` can not be exported. See more info here: https://nextjs.org/docs/messages/gssp-export
    at C:\Users\SONIA\Desktop\project\meroriiving\node_modules\next\dist\export\worker.js:245:23
    at async Span.traceAsyncFn (C:\Users\SONIA\Desktop\project\meroriiving\node_modules\next\dist\trace\trace.js:79:20)

 

문제는 getServerSideProps를 사용했다는 것.

간단한 정적페이지가 아니라 서버사이드렌더링이 이루어지는 페이지의 경우 export를 지원하지 않는다는 것이다.

공식문서(ggsp오류 관련 next.js 공식홈페이지 글) 에 따라 다음 해결방법 두가지를 얻었지만 두 해결방법 모두 문제를 해결할 수 없었다.

Possible Ways to Fix It

1. If you'd like to keep your application static, you can use getStaticProps instead of getServerSideProps.
2. If you want to use server-side rendering, update your build command and remove next export. For example, in your package.json:

🎈 netlify

netlify 배포 참고

해결방법을 찾아 구글링을 하던 중 netlify는 이러한 이슈를 해결할 수 있는 라이브러리(@netlify/plugin-nextjs)를 제공한다는 것을 확인했고, 그래서 gh-pages가 아닌 새로운 배포환경을 찾아 시도해보는 경험을 했다.

1. @netlify/plugin-nextjs 라이브러리 추가
2. netlify.toml 파일 추가
3. package.json에 next export script 제거

yarn add @netlify/plugin-nextjs

오류 : 500 error

블로그에서 하라는 대로 세팅하고 publish directory도 .next로 설정해주었는데 아무리해도 링크에 접속시 500에러만이 날 맞이해주었다... 해결 불가능하다고 판단하여 빠르게 포기!

🎈 vercel

그래서 마지막으로 선택한 vercel!!

vercel은 next.js를 만든 사람들이 모여 만든 빌드+배포+호스팅 서비스로 next.js에 공식적으로 사용하길 추천되는 호스팅 사이트이다.
한번도 사용해보지 않았다는 이유로 무시한채 익숙했던 gh-pages를 이용해왔는데 이번 기회를 통해 이용해보게 됐다!
제발.. 공식으로 지원되는 만큼 되길 바라면서,,!!!

vercel 배포 참고

위 블로그에서 하라는 대로 레포지토리를 연결후 페이지에서 deploy를 진행했고, 이후 vscode터미널에서 별다른 build나 export를 진행하지 않고 코드를 push 하는것만으로도 자동배포가 연결되어 성공적으로 배포가 진행되는 결과를 얻었다!!! ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
앞으로는 next프로젝트를 할때 vercel을 적극 이용할 예정이다!✨✨

성공!

 

👉 Next?

페이지 배포까지 프로젝트를 마무리했다! 이후에는 코드리팩토링을 거쳐 더 깔끔하고 보기 좋은 코드를 만드는데에 시간을 투자할 예정이고, 시간이 된다면 영상재생기능을 추가할 예정이다!