NextJs!시작하기(7): next build / export 를 통한 Next 정적사이트 배포하기 | 프론트엔드개발자

오늘은 NextJs를 사용하여 정적 사이트(SSG말고 build파일)를 배포해야하는 상황에서 build 파일을 만드는 과정을 알아볼게요!

정적사이트로 배포를 해야할 이유가 없다면 next start 해서 사용하는게 낫지만, 굳이 필요한 상황이라면  쓸 수 있는 방법을 확인해볼게요!

 

일단 최신 버전인 Next v13.3.0 이상부터는 next export를 다르게 사용해야해요. 이 버전인 사람은 아래 링크로 확인해주세요! (저는 Next v13 기준이며, app directory를 사용하지 않는 상황입니다.)

https://nextjs.org/docs/pages/building-your-application/deploying/static-exports

Deploying: Static Exports | Next.js

 

일단, 제가 next export를 사용하게 된 이유는요 .... ㅠㅠ (2022년일 때 입니당 ㅎ..)

기존의 html과 js로 이뤄진 회사홈페이지를 nextjs를 통해 새로 개편하면서 npm으로 start를 하는 서버가 아닌 .... 아파치 웹서버로 정적사이트를 제공하는 서버로 존해하는 상황이기 때문이에요. (보안상의 문제도 있다고 해서 그랬어요..)

 

사실 이렇게 배포를 안해봐서 거의 하루종일 삽질했어요 ㅎ...ㅎ

그래도 이번 기회에 제대로 배움을 얻었습니당!

 

/var/www/html/ 경로를 통해 특정 폴더에 index.html파일을 읽어 웹서버에 보여주는 구조로 되어있어, 내 nextapp을 이쁘게 정적사이트로 만들어 그곳에 담아줘야하는 상황이죠...

 

그래서!! 열심히 알아보던 중, next export를 통해 정적사이트로 내보낼 수 있었어요!

그러면 진행사항을 알아보도록 하죵!

next export로 정적사이트 내보내기

먼저 package.json 파일을 열어 아래처럼 빌드 스크립트를 만들어봅시다

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

 

next export를 하면 정적사이트를 만들어주는데요, next 공식문서를 보면 다음과 같이 말해줍니다!

getStaticProps와 getStaticPaths를 통해 만든 'pages' 폴더에 있는 page를 정적사이트로 만들어줘요!

그리고 그렇게 만든 페이지를 아래와 같이 폴더 형태로 만들어줍니다!

(getServerSideProps , Rewrites Redirects 등은 적용되지 않아요!! 참고!)

 

npm run build 명령어를 입력하면 out이라는 폴더가 생기며 아래와 같이 됩니다

내가 생성한 페이지들이 page명.html로 정적html 파일이 생성됨을 확인할 수 있어요!!

export된 페이지 구성 설정하기

이 때, 만약 about/index.html

이런식으로 폴더로 page를 구성하고 싶다면, 아래와 같이 config파일을 만들면 됩니다!

// next.config.js

module.exports = {
  reactStrictMode: true,
  trailingSlash: '/',
  env: {},
};

 

위에서 trailingSlash:'/'를 config 파일에 만든 후에 다시 npm run build를 입력 후에 out 폴더를 살펴보면 원하는 모양대로 생성됨을 확인할 수 있어요!

저는 폴더로 페이지 구성하는것을 선호하기 때문에 아래와 같은 방법으로 만들었씁니다.

이 파일을 열면 분명 css와 js가 적용이 안되어있...을듯 한데 그건 파일 경로 문제때문에 그래요!

baseurl을 생기는 파일 경로로도 해보고 여러 시도후에 되긴했지만,

정작 서버에 가서는 절대경로로 적용되어 잘 적용되었어요.... ㅎㅎㅎ 헛고생

 

사실 next export가 안되는 경우가 저는 imageloader 관련 에러(next image는 next export 에서 제공하지 않아요), nexti18next 다국어 지원 관련 에러, 등등 export 안되는 에러가 굉장히 많았는데 사실 기억이 안나네요.....!ㅎㅎㅎ

 

이상으로 next export 였습니다...!