Next.js 프로젝트를 완료하고 배포하기 전에 체크해야 할 사항들을 정리해보았습니다.
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
으로 실행되기 때문에 최종 확인을 하기 위해선 반드시 빌드 후 테스트를 진행해야 합니다.
SEO 부분은 검색 엔진 최적화를 위한 작업으로, 검색 엔진에서 웹사이트를 검색할 때 노출되는 정보를 최적화하는 작업입니다.
이미 제가 작성한 글이 있어서 다음과같이 소개합니다.
다음 페이지에서 제가 작성한 Next.js SEO 가이드를 참고하시면 됩니다.
title
, description
, og
, twitter card
등의 메타 태그 설정 방법을 자세히 설명하고 있습니다.
메타 태그 설정 테스트 사이트는 다음 페이지에서 확인할 수 있습니다.
`https://www.opengraph.xyz/`next js에서 robots.txt 설정 및 sitemap.xml 방법을 자세히 설명한 글이 있습니다. 아래 링크를 참고해주세요.
`Next js를 사용한 다이나믹 sitemap 생성 feat. robots.txt 설정 방법 - https://recodelog.com/blog/next/sitemap`Lighthouse는 웹 앱의 성능, SEO, 접근성 등을 평가하는 도구입니다. Lighthouse를 통해 웹사이트의 성능을 확인하고 개선할 수 있습니다.
크롬 개발자도구 -> Lighthouse에서 해당 하는 웹사이트 페이지를 페이지 로드 분석을 통해 점수를 확인할 수 있습니다.
LightHouse
LightHouse 성능 지표
최대한 높은 점수를 확보해야하고 만약 점수가 낮다면 개선할 부분을 찾아서 수정해야 합니다.
권장사항과 검색엔진 최적화는 필히 100%를 확보해야합니다.
배포 환경에서는 환경 변수를 설정하여 보안을 강화하고, 환경에 따라 다른 설정을 적용할 수 있습니다.
.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