[Next.js] 설치 및 빌드하기

이번에 새로 시작한 프로젝트를 Next.js로 하기 때문에 생활코딩 강의를 부랴부랴 챙겨봤다. 
이해하기 쉽게 설명이 되어 있어, 강의는 빨리 볼 수 있었다!! 
강의를 보며 기록으로 남겨두고 싶은 부분들을 정리할 계획이다 ☺️

 

 

 

---

💁‍♀️ Next.js란?

: React를 기반으로 하는 SSR 및 SSG 프레임워크이며, 사용자에게 보다 빠르고 최적화된 웹 경험을 제공합니다. 

👀 SSR : 서버 사이드 렌더링(Server Side Rendering)은 웹 애플리케이션에서 사용자가 웹 페이지에 접속할 때, 서버 측에서 해당 페이지의 초기 렌더링을 수행하는 방식이며, 완전한 HTML 페이지를 생성한 후 클라이언트에게 전달
👉🏻 장점 : 초기 콘텐츠 표시까지의 대기 시간이 줄어듦
👉🏻 단점 : 서버 자원을 사용하기 때문에 서버 부하가 증가할 수 있음

👀 SSG : 빌드 타임의 정적 페이지 렌더링(Static Site Generator)은 웹 페이지를 빌드 시점에 미리 렌더링하여 정적 파일로 생성. Next.js의 SSG 기능을 사용하면, 사용자가 웹 페이지에 접속할 때마다 서버 측에서 미리 만들어진 정적 파일을 제공하므로 성능과 보안면에서 이점을 가짐 

 

 

👊🏻 Next.js 설치하기 

1️⃣ next.js 설치 (@latest는 최신 버전)
▶️ npx create-next-app@latest

2️⃣ next.js 실행
▶️ npm run dev

3️⃣ 브라우저 열기 (command + 마우스)
▶️ http://localhost:3000/ 

 

 

👊🏻 빌드 및 배포하기

💁‍♀️ package.json 파일의 'scripts' 부분을 보자 
package.json 파일의 'scripts' 섹션은 자주 사용되는 스크립트가 정의되어 있다.

▶️ "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" },

1️⃣ 빌드
build 하면 사용자에게 실제로 보여주고자 하는 화면이 빌드되며, '.next' 폴더에 빌드된 결과물 저장

▶️ npm run build

2️⃣ 배포 버전 실행

▶️ npm run start

 

👉🏻 package.json 파일의 'scripts' 부분

 

 

👉🏻 프로젝트 실행

👉🏻 npm run dev 하여 프로젝트를 브라우저에서 열고, '네트워크' 탭에서 확인

✅ 화면 새로고침 시, 맨 아래 크기 확인 (7.3MB)

 

 

👉🏻 npm run build 후, npm run start로 배포 버전 실행한 화면

✅ 화면 새로고침 시, 맨 아래 크기 확인 (785KB)
✅ 크기가 굉장히 작아진 것을 확인할 수 있음

 

 

☺️ 참조 : https://opentutorials.org/course/5098