[Next.js] Next.js의 개념과 프로젝트 생성 - (1)

Next.js란?

Next.js는 React 프레임워크 중 하나로써 SSR(Server-Side Rendering) 환경에서 작동하는 리액트 어플리케이션을 구현할 수 있게 도와주는 프레임워크이다. 물론 Next.js가 아니더라도 SSR 환경을 구축할 수는 있지만 Next.js가 제공하는 기능들의 접근성이나 확장성이 워낙 뛰어나다 보니 많은 경우에 사용되고 있다.

Next.js의 특징

1. SEO(Search Engine Optimization)측면에서 유리하다.

   CRA(Create-React-App)기반 혹은 일반적인 리액트 어플리케이션들은 기본적으로 CSR(Client-Side Rendering)환경에서 작동하는데, 이는 SEO 측면에서 효율적이지 못하다. 왜냐하면 CSR의 경우 서버에서 빈 HTML과 JS파일을 클라이언트에게 보내면 이를 클라이언트 측에서 렌더링하여 화면에 출력해주는 방식으로 작동하는데, 검색 엔진은 최초의 HTML에 있는 내용을 기반으로 노출을 해주다 보니 빈 HTML에선 가져오는 내용이 없기 때문이다. 하지만 Next.js의 경우 pre-reloading을 통해 데이터가 미리 렌더링 된 HTML을 가져오게 되므로 검색 엔진이 참고할 내용이 최초의 HTML에 담겨있어 노출이 가능해진다.

2. 최초 로딩이 빠르다.

   만약 페이지의 규모가 크다면 CSR 환경의 애플리케이션은 빈 HTML을 채우기 위한 JS 파일의 크기가 클 것이고, 그것을 클라이언트 측이 다운 받아 모두 렌더하는데에 걸리는 시간 또한 길어질 것이다. 즉, 그 시간동안 사용자는 빈 HTML을 보고 있어야 하기 때문에 UX적으로 좋지 못하다. 하지만 Next.js는 서버에서 어느 정도 미리 렌더를 하여 클라이언트 측으로 전송을 하기 때문에 빈 HTML이 전송되지 않아 화면이 빨리 출력되기 때문에 사용자는 로딩도 더 빠르다고 느낄 뿐만 아니라 UX적으로 더 만족스러울 것이다.

3. 페이지 기반 라우팅을 사용한다.

   Next.js는 프로젝트 폴더의 최상위에 있는 /pages 폴더 안에 있는 파일들의 경로가 각각 페이지가 되어 라우팅에 사용된다. 그렇기 때문에 URL을 기반으로 일치하는 URL을 탐색하여 그에 해당하는 컴포넌트를 보여줌으로써 라우팅하는 React-Router DOM보다 훨씬 직관적이다.

4. 코드 분할(Code Splitting)이 적용되어 있다.

   일반적인 리액트 프로젝트는 초기 렌더 때 서버에서 모든 컴포넌트나 번들의 코드를 한꺼번에 받아오다 보니 규모가 커지면 로딩속도가 느려지게 된다. 하지만 Next.js는 컴포넌트나 번들의 코드를 작게 분리하여 필요한 부분만 그때 그때 받아옴으로써 규모가 커지더라도 로딩 속도에 큰 차이가 없게끔 한다.

이 외에도 Client-side Navigation, 풀스택 리액트 어플리케이션 구현의 용이함, Fast Refresh 등 다양한 기능들 덕분에 Next.js는 많은 개발자들에게 사랑 받고 있다.

Next.js 프로젝트 환경 구축하기

$ npx create-next-app@latest
# 혹은
$ yarn create next-app

터미널에 이렇게 입력해주고 이후 프로젝트 이름까지 입력해주면 프로젝트가 생성된다. 만약 커맨드 뒤에 한 칸 띄우고 --typescript를 입력하면 타입스크립트용 프로젝트가 생성된다.

참고: Next.js 공식문서