Netlify(네트리파이)에 내가만든 웹 사이트 next.js 등록하기

1) 소개

Netlify는 정적 웹사이트를 쉽게 빌드하고 호스팅할 수 있는 플랫폼으로, Git 계정과 연동하여 자동 배포가 가능합니다.

별도의 복잡한 설치 과정 없이 웹사이트를 배포하고, 커스텀 도메인 연결 및 SSL 인증서 발급까지 지원하는 유용한 서비스입니다.

이번 가이드에서는 Next.js로 만든 웹사이트를 Netlify에 등록하는 방법을 소개합니다.

2) 네트리파이 회원가입

Netlify 웹사이트 접속: Netlify 공식사이트에 접속합니다.

Netlify는 GitHub, GitLab, Bitbucket 계정을 통해 로그인하거나 새로 가입할 수 있습니다. 개발자라면 GitHub 계정으로 가입하는 것이 가장 편리합니다.

3) 프로젝트 등록

1) 사이트 추가: Netlify 대시보드에서 "Add new site" 버튼을 클릭하고, **"Import an existing project"**를 선택합니다.

2) GitHub 연동: GitHub에 저장된 프로젝트를 디플로이하기 위해 GitHub 계정을 연동합니다.

3) 프로젝트 선택: 디플로이할 프로젝트를 선택합니다. 이 과정에서 Netlify는 프로젝트의 설정 파일을 읽어 디플로이 환경을 자동으로 구성합니다.

4) 기본 설정: Netlify에서 자동으로 감지한 기본 세팅을 사용하여 **"Deploy site"**를 클릭합니다. 그러나, Next.js 프로젝트의 경우에는 추가 설정이 필요할 수 있습니다.

4) 에러조치

대부분의 경우 에러없이 디플로이가 잘 될것으로 보입니다. 저같은 경우에는 에러가 발생됐는데 조치사항은 아래와 같습니다.

next.js의 경우 build를 하게 되면 루트 폴더 밑에 out폴더가 생기고 그 밑에 빌드된 파일이 생성됩니다.

그래서 publish directory를 out으로 변경했으나 여전히 에러가 발생..

이유는 정적인 페이지가 아닌 getServerSideProps 함수 사용으로 SSR 처리된 웹페이지의 경우 다른 세팅이 필요합니다.

플러그인 설치: SSR을 처리하기 위해 Netlify의 Next.js 플러그인을 설치합니다.

npm install --save @netlify/plugin-nextjs

그 후 pakage.json의 스크립트를 아래와 같이 설정합니다.

Netlify 설정 파일 추가: 프로젝트의 루트 폴더에 netlify.toml 파일을 생성하고, 다음 내용을 추가합니다.

[build]

 commant = "npm run build"

 publish = ".next"

[[plugins]]

 package = "@netlify/plugin-nextjs"

• command는 빌드 명령어를 설정합니다.
• publish는 빌드 결과물이 저장되는 디렉토리입니다.
• @netlify/plugin-nextjs 플러그인은 Next.js의 SSR을 처리합니다.

이제 빌드처리 시 .out폴더가 아닌 .next폴더가 생성 및 해당 폴더에 빌드된 파일이 생성됩니다.

다시 네트리파이로 돌아가서 디플로이 설정을 아래와 같이 설정합니다.

5) 성공

디플로이 후, Netlify 대시보드에서 빌드 로그를 확인하여 문제가 없는지 확인합니다. 

에러만 주구장창 뜨다가 드디어 성공!!

빌드가 성공적으로 완료되면 사이트 이름을 변경하고, Netlify에서 제공하는 URL로 접속하여 정상적으로 페이지가 표시되는지 확인합니다.

Netlify를 통해 Next.js 웹사이트를 성공적으로 배포하는 방법을 소개하였습니다. 

기본적인 설정 외에도 다양한 기능을 활용할 수 있으며, 필요에 따라 추가적인 구성이 가능합니다. 

질문이나 도움이 필요하시면 언제든지 댓글을 남겨주세요!

읽어주셔서 감사합니다. 😊