nextjs github page 배포하기

이번에 새로이 팀프로젝트를 진행하며 진행상황을 공유하기위해 gitpage에 FE의 정적버전을 공유하기로 했다. 그 과정에서 있던 버그 수정방법이다.

nextjs 빌드하기

먼저 정적으로 nextjs를 빌드하기 위해서는 그냥 run build 로는 부족하다. package.json을 수정해야하는데

{
  "scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "start": "next start",
    "lint": "next lint"
  },
}

위처럼 next export를 추가해줘야한다. 그렇게 해야 out폴더가 생기고 그곳에 정적으로 만들어진다.

이후에 가장 헤맨부분이 gitpage에서 css파일과 js파일을 못찾는 오류였다.

1. 먼저 해결법으로 next.config.js에서 assetPrefix를 수정해 주는 것이였다. 하지만 이 방법은 gitpage의 하위 폴더를 만들어 정적으로 배포하는경우
   (ex ***.io/blog)처럼 하위 path를 가질때 해결법이다.

2. 다음으로 jekyll를 사용해 미리 확인하고 이를 통해 배포하는 것이다.
   이방법도 실패했는데 로컬에서 jekyll사용해도 같은 오류가 발생했다.

3. 마지막으로 시도한것이 _next폴더가 있는곳에 .nojekyll를 만들어주는것이다. 이방법은 해당파일을 추가해서 Jekyll없이 호스팅하도록 도와주는것인데 이를 통해 해결했다.

해결했지만 아직 정확하게 어떠한 부분 때문에 Jekyll에서 파일을 찾지 못하는지 알수가 없다. 아마 Jekyll를 사용하면서 js css파일이 들어간 _next를 못찾고 이를 따로 설정하더라도 배포과정에서 못찾는듯하다!