Recode Log

Next js 프로젝트 완료 후 배포 전 체크 리스트

Next.js 프로젝트를 완료하고 배포하기 전에 체크해야 할 사항들을 정리해보았습니다.

목차


1. 로컬 환경에서 Build후 테스트

  • npm run build 명령어를 통해 로컬 환경에서 정상적으로 빌드가 되는지 확인합니다.
npm run build
  • 빌드가 완료되면 npm start 명령어를 통해 로컬 환경에서 정상적으로 동작하는지 확인합니다.
npm start

Next js 13버전 이상의 app router는 SSR (서버사이드 렌더링) Node.js위에서 빌드되기 때문에 npm run dev와 npm run build 후 development와 production 환경이 나뉘어 집니다.

이를 확인하기 위해서 간단한 조건문을 사용하여 process.env.NODE_ENV를 확인해보면 됩니다.

if (process.env.NODE_ENV === 'development') {
  console.log('개발 환경입니다.');
} else if (process.env.NODE_ENV === 'production') {
  console.log('배포 환경입니다.');
}

위와 같이 조건문을 사용하여 개발 환경과 배포 환경을 구분할 수 있습니다. (콘솔에 출력되는 메시지를 통해 확인)

npm run dev로 실행할 경우 process.env.NODE_ENV는 development로 설정되고, npm run build 후 npm start로 실행할 경우 process.env.NODE_ENV는 production으로 설정됩니다.

배포 후에는 항상 process.env.NODE_ENV가 production으로 실행되기 때문에 최종 확인을 하기 위해선 반드시 빌드 후 테스트를 진행해야 합니다.


2. 전체 UI/UX 테스트

  1. 모바일 환경에서의 레이아웃 및 디자인 확인
  2. 브라우저별 렌더링 확인 (크롬, 사파리, 파이어폭스, 엣지 등)
  3. 반응형 웹 디자인 확인 (모바일, 태블릿, 데스크탑)
  4. 이미지 및 동영상 로딩 확인 (로딩 중 표시, 에러 처리)
  5. 버튼, 링크, 입력창 등의 동작 확인
  6. 페이지 전환 시 로딩 속도 확인
  7. 에러 페이지 및 404 페이지 확인
  8. 데이터 fetch 할 때 로딩 (스켈레톤 ui, 인디케이터) 표시 및 에러 처리
  9. W3C 웹 표준 검사 (HTML, CSS, JavaScript)

3. SEO 최적화

  1. 메타 태그 설정 (title, description, og, twitter card 등)
  2. robots.txt 파일 설정
  3. sitemap.xml 파일 생성
  4. 구글 서치 콘솔에 사이트 등록
  5. 구글 애널리틱스 연동
  6. 페이지 속도 최적화 (Lighthouse 점수 확인)
  7. 구조화된 데이터 마크업 (Schema.org)
  8. 캐노니컬 태그 설정

SEO 부분은 검색 엔진 최적화를 위한 작업으로, 검색 엔진에서 웹사이트를 검색할 때 노출되는 정보를 최적화하는 작업입니다.

이미 제가 작성한 글이 있어서 다음과같이 소개합니다.

3.1 메타 태그 설정

다음 페이지에서 제가 작성한 Next.js SEO 가이드를 참고하시면 됩니다.

title, description, og, twitter card 등의 메타 태그 설정 방법을 자세히 설명하고 있습니다.

`Next js SEO 가이드 - https://recodelog.com/blog/seo/next-js`

메타 태그 설정 테스트 사이트는 다음 페이지에서 확인할 수 있습니다.

`https://www.opengraph.xyz/`

3.2 robots.txt 및 sitemap.xml 파일 설정

next js에서 robots.txt 설정 및 sitemap.xml 방법을 자세히 설명한 글이 있습니다. 아래 링크를 참고해주세요.

`Next js를 사용한 다이나믹 sitemap 생성 feat. robots.txt 설정 방법 - https://recodelog.com/blog/next/sitemap`

3.3 Lighthouse 점수 확인

Lighthouse는 웹 앱의 성능, SEO, 접근성 등을 평가하는 도구입니다. Lighthouse를 통해 웹사이트의 성능을 확인하고 개선할 수 있습니다.

크롬 개발자도구 -> Lighthouse에서 해당 하는 웹사이트 페이지를 페이지 로드 분석을 통해 점수를 확인할 수 있습니다.

LightHouse

LightHouse

LightHouse 성능 지표

LightHouse 성능 지표

최대한 높은 점수를 확보해야하고 만약 점수가 낮다면 개선할 부분을 찾아서 수정해야 합니다.

권장사항과 검색엔진 최적화는 필히 100%를 확보해야합니다.

4. 환경 변수 설정

배포 환경에서는 환경 변수를 설정하여 보안을 강화하고, 환경에 따라 다른 설정을 적용할 수 있습니다.

.env 파일을 통해 환경 변수를 설정하고, process.env를 통해 환경 변수를 사용할 수 있습니다.

# .env
NEXT_PUBLIC_API_URL=https://api.example.com
// api.ts
const API_URL = process.env.NEXT_PUBLIC_API_URL;

NEXTPUBLIC 접두사는 클라이언트와 서버 모두에서 사용할 수 있는 환경 변수를 설정할 때 사용합니다.

만약 서버에서만 사용할 환경 변수를 설정하고 싶다면 접두사를 붙이지 않습니다.

# .env
API_URL=https://api.example.com
// api.ts
const API_URL = process.env.API_URL;

위와 같이 .env 파일에 환경 변수를 설정하고, process.env를 통해 해당 환경 변수를 사용할 수 있습니다.

배포 환경에서는 .env 파일을 .env.local로 변경하여 환경 변수를 설정하고, .env.local 파일은 .gitignore에 추가하여 깃허브에 올리지 않도록 합니다.

# .gitignore
.env.local
이전글

Notion API를 사용한 Next.js 페이지 만드는 방법 feat. react-notion-x

다음글

Next js SEO 가이드

관련 태그