[React] Next.js에 대해 알기 1부

들어가기에 앞서

본 글은 "한빛출판네트워크"의 "리액트에서 Next.js로, 넥스트JS의 특장점과 빠르게 시작하는 법 알아보기"를 참조하여 정리하였다. 더 자세하게 알고싶다면 아래의 링크를 들어가면 된다.

출처 : 리액트에서 Next.js로, 넥스트JS의 특장점과 빠르게 시작하는 법 알아보기

 

프론트엔드 개발자들은 JavaScript의 라이브러리 중 React를 많이 이용하고있다.

그렇다면 React 기반의 웹 프레임워크라고 알려져있는 Next.js는 어떤 것인지 자세히 알아보기 위해 글로 정리해본다.

 

자세히 알아보기 전에 내가 가지고있던 상식으로만 적어보자면 Next.js는 React를 사용하여 웹 애플리케이션을 만들기 위한 도구와 기능을 제공하는데, 이를 좀 더 쉽고 효율적으로 사용할 수 있게 도와준다고만 알고있었다.

 

프론트엔드 경험을 위해 한 프로젝트에서 프론트엔드를 맡게되었는데 본격적으로 Next.js에 대해 알아보겠다.

Next.js에 대해 알려고 하면 할 수록 그 양이 방대하기 때문에 최대한 나누어 적어보는게 좋겠다.

Next.js는 무엇일까?

Next.js 로고

Next.js를 알아보기 전 리액트에 대한 요약

흔히들 알고 있는 앵귤러(Angular), React(리액트), 뷰(Vue)와 같은 프레임워크가 등장하면서 웹 개발 분야는 급속도로 변하기 시작했으며 프런트엔드 웹 개발 분야에서 여러 혁신적인 아이디어를 이끌어냈다.

 

리액트는 페이스북(현재 사명은 메타) 엔지니어 조던 발케(Jordan Walke)가 만들었으며 XHP Hack 라이브러리에 큰 영향을 주었다. 페이스북의 PHP와 Hack 개발자들은 XHP를 통해 자사 애플리케이션의 프런트엔드 부분에서 재사용할 수 있는 컴포넌트를 만들었다.

 

이 자바스크립트 라이브러리는 2013년에 오픈소스가 되었고, 변화를 거듭하며 웹 사이트, 웹 앱, 나중에 다룰 리액트 네이티브를 사용한 네이티브 앱 개발, 심지어는 React VR을 사용한 VR 구현까지 가능하게 하였는데, 그 결과 리액트는 가장 인기 있는 자바스크립트 라이브러리가 되었는데 수백만 개 이상의 웹 사이트에서 다양한 목적으로 사용되고 있다.

 

다만 리액트에는 한 가지 큰 문제점이 있다. 

바로 리액트가 기본적으로 클라이언트 사이드에서만 작동한다는 점이다.

 

사용자의 웹 브라우저에서만 실행되기 때문에 리액트를 사용한 웹 애플리케이션은 검색 엔진 최적화의 효과를 거의 볼 수 없으며, 첫 화면에 웹 애플리케이션을 제대로 표시하기 위해 애플리케이션 실행 초기에 성능 부담이 생긴다.

 

웹 앱을 완전히 표시하려면 브라우저가 전체 웹 애플리케이션 번들을 다운로드한 다음 그 내용을 분석하고 코드를 실행해서 결과를 얻어야 하기 때문이다. 그래서 아주 큰 웹 애플리케이션에서는 첫 화면을 표시하기까지 수 초가 소요되기도 한다.

 

이 문제를 해결하기 위해 많은 개발자들이 웹 애플리케이션을 서버에서 미리 렌더링해두는 방법을 연구하기 시작하였고, 서버 사이드 렌더링을 사용할 수 있다면 리액트 앱을 순수한 HTML 페이지로 미리 렌더링해둔 다음 브라우저가 이를 다운로드하여 즉각 화면에 표시하고, 클라이언트에서 자바스크립트 번들을 다 받으면 사용자가 웹 앱과 상호 작용할 수 있게 된다.

 

이러한 연구의 결과로 Vercel이 Next.js를 만들었다.

Next.js는 첫 릴리스부터 리액트가 제공하지 않는 다양한 기능을 제공하면서 리액트 웹 앱 개발 분야의 판도를 뒤흔들어 놓았다.

 

Next.js는 리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크다.

 

리액트에는 없는 서버 사이드 렌더링server-side rendering(SSR), 정적 사이트 생성static site generation(SSG), 증분 정적 재생성incremental static regeneration(ISR)과 같은 다양하고 풍부한 기능을 제공하고 있다.

 

수많은 내장 컴포넌트들과 플러그인 덕분에 소규모 웹 사이트부터 거대한 상용 애플리케이션에도 즉시 Next.js를 적용할 수 있다는 것이 장점이다. 확장 가능하고 유지 보수가 쉬운 웹 애플리케이션을 만들기 위한 여러 가지 방법을 제공한다.

 

코드 분할, 서버 사이드 렌더링, 파일 기반 라우팅, 경로 기반 프리페칭 등으로 개발자는 Next.js로 클라이언트와 서버 모두에서 아주 복잡한 작업을 별다른 노력 없이 쉽게 구현할 수 있게 되었다.

 

Next.js는 리액트가 규모에 상관없이 다양한 웹 애플리케이션을 만들 수 있는 훌륭한 도구라는 점을 널리 보여주고 있으며, 그 결과 아주 큰 회사든 스타트업이든 가릴 것 없이 Next.js를 사용하고 있다. 현재 넷플릭스, 트위치, 틱톡, 훌루, 나이키, 우버, 엘라스틱과 같은 유명 기업에서 사용되고 있을 정도로 인기가 많다.

 

물론 서버 사이드 렌더링을 지원하는 프레임워크가 Next.js 하나뿐인 것은 아니다. 아래에서 더 살펴보자 !

Next.js와 비슷한 프레임워크

Next.js 외에도 자바스크립트 영역에서 서버 사이드 렌더링을 지원하는 프레임워크들이 있다. 

Next.js가 아닌 다른 프레임워크를 선택한다면 해당 프레임워크가 프로젝트 목적에 얼마나 부합하는지를 고려해야 한다.

 

Gatsby

Gatsby는 Next.js 대신 사용할 수 있는 유명한 프레임워크다. 특히 정적 웹 사이트를 만들 수 있는 프레임워크를 찾는다면 더할 나위 없이 좋은 선택인데, Next.js와 달리 Gatsby는 정적 사이트 생성만 지원하는데, 그 때문인지 정말 놀랍도록 잘 만들어낸다고 한다.

 

모든 페이지를 빌드 시점에 미리 렌더링해서 정적 콘텐츠 형태로 만들기 때문에 어떤 콘텐츠 전송 네트워크(CDN)로도 제공할 수 있다.

 

동적 서버 사이드 렌더링을 지원하는 다른 프레임워크와 비교해보면 놀라운 성능을 확인할 수 있다. Next.js와 비교했을 때 Gatsby의 가장 큰 단점은 역시 동적 서버 사이드 렌더링을 지원하지 않는다는 점이다. 따라서 데이터에 따라 동적으로 변하는 복잡한 웹 사이트는 만들 수 없다.

 

Razzle

Razzle은 Next.js만큼 유명하진 않지만 서버 사이드 렌더링이 가능한 자바스크립트 애플리케이션을 만들 수 있다.

 

Razzle의 핵심은 create-react-app 도구를 쉽게 사용하면서도 서버와 클라이언트의 복잡한 애플리케이션 설정들을 추상화하고 단순하게 만들 수 있다는 점이다. 

 

Next.js나 다른 프레임워크 대신 Razzle을 썼을 때의 가장 큰 장점은 사용할 프레임워크에 관한 지식이 없어도 된다는 것인데, 리액트나 뷰, 앵귤러, Elm, Reason-React 등 어떤 프레임워크든 원하는 것을 쓸 수 있다.

 

Nuxt.js

뷰를 사용한 웹 애플리케이션 개발에서 리액트의 Next.js에 해당하는 것은 Nuxt.js다. 

 

서버 사이드 렌더링, 정적 사이트 생성, 프로그레시브 웹 앱 관리 등과 같은 기능을 제공하면서도 성능, SEO, 개발 속도 등에서 별다른 차이가 나지 않습니다. Nuxt.js나 Next.js 모두 같은 목표를 갖는 프레임워크지만 Nuxt.js는 좀 더 많은 설정을 필요로 한다. 

하지만 이런 부분은 그다지 큰 문제가 되지 않는다. Nuxt.js 설정 파일에서는 레이아웃, 전역global 플러그인과 컴포넌트, 라우트 등을 지정할 수 있다. 

 

반면 Next.js는 이런 설정을 리액트와 동일하게 처리한다. 이 부분을 제외하면 Nuxt.js와 Next.js는 많은 기능이 동일하다. 가장 큰 차이점은 바로 기저의 라이브러리가 무엇이냐는 것인데, 만약 뷰를 사용한다면 서버 사이드 렌더링을 위해 Nuxt.js를 사용해보는 것도 좋다고 한다.

 

Angular Universal

앵귤러에서는 서버에서 자바스크립트 코드를 실행하고 렌더링하는 기능을 제공하고자 Angular Universal을 공개했다.

 

이 역시 정적 사이트 생성과 서버 사이드 렌더링을 지원하지만 Nuxt.js나 Next.js와 달리 주목해볼만한 점은 가장 큰 소프트웨어 회사인 구글에서 만들었다는 점이다. 

앵귤러로 웹 애플리케이션이나 컴포넌트를 만들었다면 자연스럽게 Nuxt.js나 Next.js가 아닌 Angular Universal을 사용하게 될 것이다.

왜 Next.js 일까?

Next.js는 리액트에서 제공하지 않는 여러 기능을 지원하며 비단 컴포넌트뿐만 아니라 설정이나 개발 옵션 등 다양한 부분에서도 유용한 기능들을 제공한다.

 

Next.js는 활동적인 커뮤니티를 가지고 있으며 커뮤니티에서 열렬한 지지도 받고 있는데, 이를 사용해서 애플리케이션을 만들 때 단계별로 많은 지원을 받을 수 있다.

 

개발하고 있는 웹 애플리케이션 코드에 문제가 생겼을 때 GitHub나 스택 오버플로와 같은 다양한 커뮤니티에서 도움을 받을 수 있기 때문인데, Next.js를 만든 Vercel 팀에서도 이런 요청이나 토의에 적극 참여하고 있다고 한다.

 

리액트에서 Next.js로

리액트와 Next.js의 가장 큰 차이점이 무엇이냐 묻는다면 리액트는 자바스크립트 라이브러리이고 Next.js는 프레임워크라는 점이다. 

 

Next.js는 클라이언트와 서버에서 실행할 수 있는 코드에 풍부하고 다양한 기능을 제공하여 웹 애플리케이션을 만들 수 있다. 서버 사이드 렌더링 페이지나 정적으로 생성된 페이지 모두 Node.js에서 실행되기 때문에 fetch, window, document와 같이 웹 브라우저에서 제공하는 전역 객체나 canvas 같은 HTML 요소에는 접근할 수 없다.

 

대신 Next.js 페이지를 만들 때  전역 변수나 HTML 요소를 반드시 사용해야 하는 컴포넌트를 다루는 방법도 Next.js에서 제공한다.

 

반면 fs, child_process와 같이 Node.js에서만 사용할 수 있는 라이브러리나 API를 사용하려는 경우, Next.js는 각 요청별 데이터를 클라이언트로 보내기 전에 서버 사이드 코드를 실행하거나 페이지 생성 시점에 해당 코드를 처리하는 방식을 지원한다. (어떤 방식으로 지원하는지는 각 페이지가 어떤 렌더링 방식을 사용하느냐에 따라 결정됨)

 

Next.js는 프로그레시브 웹 앱이나 오프라인 웹 앱 역시 쉽게 만들 수 있을 뿐만 아니라 클라이언트 사이드 앱을 만들고자 할 경우에도 리액트의 create-react-app 대신 Next.js를 사용할 수 있다.  또한 많은 내장 컴포넌트와 최적화 기능을 사용할 수 있다.

 

Next.js 준비하기

Next.js를 시작하려면 개발 장비에 몇 가지 준비가 필요하다.

먼저 Node.js와 npm을 설치해야 한다.

 

Node.js와 npm 설치 방법

 

코드는 "한빛출판네트워크"에서 공유한 GitHub 저장소에서 확인할 수 있다. 

Next.js 시작하기

프로젝트 기본 구조

위 과정에서 개발 환경에 Node.js와 npm만 설치를 마쳤다면 Next.js에 대해 시작해볼 수 있다.

Vercel 팀에서 제공하는 아주 강력하고 직관적인 도구인 create-next-app이 기본적인 Next.js 앱을 시작할 수 있는 코드를 생성해준다. 따라서 다음과 같이 터미널에서 Next.js 개발을 간단하게 시작할 수 있다.

npx create-next-app <app-name>

 

이렇게 하면 필요한 의존성 패키지들이 설치되고 몇 개의 기본 페이지가 생성된다. 

그런 다음 npm run dev 명령을 실행하면 개발 서버가 시작되며, 3000번 포트로 접근해서 웹 페이지를 볼 수 있다.

yarn 패키지가 설치되어 있는 경우 Next.js는 yarn 패키지 관리자를 사용해서 프로젝트를 초기화한다. 

이 경우에도 npm을 기본으로 사용하고 싶다면 다음 명령으로 설정을 덮어쓸 수 있다.

npx create-next-app <app-name> --use-npm

 

Next.js GitHub 저장소에서 원하는 보일러플레이트 코드를 다운로드해서 새 Next.js 프로젝트를 시작할 수도 있다. 

Next.js 저장소에는 example 디렉터리가 있는데 이곳에는 다양한 기술이 사용된 훌륭한 예제 코드들이 많다.

만약 Next.js 앱을 도커 환경에서 실행하는 예시를 보고 싶다면 다음과 같이 --example 옵션으로 어떤 보일러플레이트 코드를 사용할 것인지 알려주면 된다.

npx create-next-app <app-name> --example with-docker

 

그럼 create-next-app이 웹 사이트에서 코드를 다운로드한 다음 필요한 의존성 패키지들을 설치할 것이다.

이제 다운로드한 파일을 수정하거나 커스터마이징하는 방법으로 개발을 시작할 수 있다.

 

그 외에도 웹 사이트에서 다양한 예제 코드를 살펴볼 수 있습니다. 이미 Next.js를 사용해봤다면 다른 서비스나 도구를 Next.js와 어떻게 함께 사용하는지 살펴보는 것도 도움이 된다.

다시 create-next-app 설치 부분으로 돌아가보자. 터미널을 열고 다음 명령을 실행해서 Next.js 앱을 시작한다.

npx create-next-app my-first-next-app --use-npm

 

기본 코드가 생성되고 나면 다음과 같은 구조의 my-first-next-app 디렉터리가 만들어진다. 

- README.md - next.config.js - node_modules/ - package-lock.json - package.json - pages/  - _app.js  - api/  - hello.js  - index.js - public/  - favicon.ico  - vercel.svg - styles/  - Home.module.css  - globals.css

 

리액트를 사용해본 경험이 있다면 클라이언트에서의 내비게이션을 위한 react-router 또는 이와 비슷한 라이브러리를 사용해보았을 것이다. 

Next.js에서의 내비게이션은 pages/ 디렉터리를 사용하기 때문에 훨씬 쉽다.

 

pages/ 디렉터리 안의 모든 자바스크립트 파일은 퍼블릭(public) 페이지가 되며, pages/ 디렉터리의 index.js 파일을 복사해서 about.js로 이름을 바꾸면 http://localhost:3000/about 주소로 접근했을 때 똑같은 페이지를 볼 수 있다.

 

public/ 디렉터리에는 웹 사이트의 모든 퍼블릭 페이지와 정적 콘텐츠가 있다. 이를테면 이미지 파일, 컴파일된 CSS 스타일시트, 컴파일된 자바스크립트 파일, 폰트 등이 있을 수 있다.

 

styles/ 디렉터리도 기본으로 생성된다. 웹 애플리케이션에서 사용하는 스타일시트를 여기에 둘 수 있지만 Next.js 프로젝트에 styles/ 디렉터리가 꼭 필요한 것은 아니다. 

 

반드시 있어야 하고 용도가 정해져 있는 디렉터리는 public/과 pages/뿐이며, 나머지 디렉터리는 필요에따라 다른 목적으로 사용하거나 지워도 상관없다. 또한 프로젝트 최상위 디렉터리에 필요한 디렉터리나 파일을 추가해도 Next.js의 빌드 및 개발 프로세스에는 아무런 영향을 주지 않는다.

 

컴포넌트를 components/ 디렉터리 아래에, 유틸리티 기능을 utilities/ 디렉터리에 두고 사용해도 아무 상관없다.

만약 보일러플레이트 코드 생성 방식을 사용하지 않는다면, 모든 의존성 패키지를 따로 추가한 다음 기본적인 디렉터리 구조를 추가하는 것만으로도 새로운 Next.js 애플리케이션을 만들 수 있다. 그 외에는 별도로 설정을 할 필요가 없다.

1부 끝

Next.js란 무엇인지부터 처음 프로젝트 구조를 만들어보는 시작단계까지만 적어보려고해도 굉장히 많았다.

정리에 대한 욕심이 많아지다보니 글이 중구난방이 된건아닐까 싶다.  추후에 다시 다듬어봐야겠다.

다음엔 Next.js 앱에서 기본 언어를 타입스크립트로 지정하는 방법과 바벨과 웹팩 설정 커스터마이징 등에 대해서 정리해보겠다.