Next.js 프레임워크를 쓰는 이유

Next.js 기본개념

Next.js는 React 기반 프레임워크로 주로 서버 사이드 렌더링(SSR)의 서비스를 구현할 때 사용한다. SSR에 관한 간단한 설명은 아래 링크에 있다.

 

https://lemonjade.tistory.com/39

SSR(Server-side Rendering)과 CSR(Client-side Rendering)

 

Next.js 장점

1. 검색 엔진 최적화(SEO) 우수

기본적으로 서버에서 페이지에 대한 마크업이 생성되며, 검색 엔진에서 해당 페이지를 인식하기에 수월하다.

 

2. 빠른 초기 로드 

클라이언트에서 JS를 실행하기 전 서버의 HTML을 받을 수 있기에 초기 로딩 속도가 빠르다.

3. 자동 코드 스플리팅

Next.js가 제공하는 주요 기능으로, 각 페이지가 필요한 코드만 로드한다. 그로 인해 로딩 속도 개선과 불필요한 코드 로드를 방지해 앱의 효율성을 높인다. 

4. 간단한 라우팅 설정

파일 기반 설정으로, 디렉토리에 파일을 추가할 시 해당 파일 이름으로 라우트가 설정된다. 따로 설정을 정해주지 않아도 되고, 직관적이다.

 

5. 유연한 데이터 페칭

getStaticProps, getServersideProps, getStaticPaths 등 요구 사항에 맞게 알맞은 페칭 방법을 사용할 수 있다.

 

getStaticProps: Static Props라는 이름에 걸맞게 페이지가 렌더링되기 전에 정적인 데이터를 포함한다. 빌드 시점에 페이지에 필요한 데이터를 미리 불러온다. 정적 사이트 생성(SSG)에 사용.

getServersideProps: 각 요청마다 페이지에 필요한 데이터를 서버에서 불러온다. 매 요청마다 데이터를 동적으로 가져오므로 항상 최신 데이터를 보여준다. 서버 사이드 렌더링(SSR)에 사용.

getStaticPaths: 동적 경로를 생성하는데 사용되며, 정적 사이트 생성(SSG) 시 필요한 동적 경로를 미리 정의. 

 

페이지에 걸맞은 방법으로 데이터를 관리하여 초기 로딩시간을 최소화하고 사용자 경험을 최소화 할 수 있다.

 

Next.js 사용법

프로젝트 생성을 하고,

npx create-next-app my-next-app

 

프로젝트 디렉토리로 이동을 해서, 

cd my-next-app

 

개발용 서버를 실행하여 개발을 시작하면 된다.

npm run dev