Next.js 시작 ~ 배포 (Next.js를 사용하는 이유)

리액트 : CSR (클라이언트 사이드 렌더링) 을 하는 SPA 를 제공하는 자바스크립트 라이브러리
Next.js : 리액트의 프레임워크

 

Next.js를 사용하면

1. 페이지 초기 로딩 속도가 빠르다.

1) 프리렌더링(pre-rendering) 을 제공한다.

• 필요에 따라 서로 다른 종류의 렌더링을 할 수 있다.
• SSR (서버사이드 렌더링), SSG (정적 생성), ISG (점진적 정적 생성)
• 빈 html이 아닌 미리 데이터가 렌더링된 페이지를 가져오기때문에 사용자 경험이 개선되고 SEO 에 유리하다.

프리렌더링 (SSR, SSG) 포스팅

 

2) 코드 분할을 통해 초기 구동 속도가 빠르다 (js 번들을 작은 청크로 나누어 필요한 시점에 로드)

 

2. 파일 기반의 라우팅을 제공한다.

• 매우 쉽게 페이지 경로를 설정할 수 있다.
• 이를 통한 동적 라우팅이 쉽고 직관적이다

Next.js 시작하기

npx create-next-app .
현재 열려있는 폴더에 프로젝트를 생성

typeScript, ES Lint, Tailwind, 기본 디렉토리 src 사용 여부, App Router 사용 여부, alias 커스텀 여부
등의 옵션을 선택하여 설치를 완료한다.

 

npm run dev
개발 모드 실행

pages 폴더에 있는 index.js 파일이 랜딩 페이지가 된다.

Next.js 빌드와 배포

빌드란 ?

리액트 코드(소스 코드)를 브라우저가 실행할수있게 변환
즉 JSX문법을 JS로 컴파일하여 서버 실행에 필요한 코드들을 생성

 

npm run build
npm run start 또는 npm start (빌드 후에만 실행 가능)

 

vercel 에서 배포 가능 (깃헙 연동)