Next.js란? 간단하게 세팅하기

Next.js란 무엇일까?

Next.js는 별다른 설정 없이도 SSR(Server side rendering)과 검색 엔진 최적화라고 불리는 SEO를 제공하는 리액트 프레임워크이다.

Next.js를 쓰는 가장 큰 이유는 SSR 방식을 사용하기 때문이다. 서버 사이드 렌더링 방식을 사용함으로써 얻을 수 있는 이점은 다음과 같다.

• SEO (Search Engine Optimization)을 하는 것이 수월하다.
• CSR(Client side rendering)에 비해 페이지 로딩 속도가 빠르다.
  다시 말해서 사용자가 페이지를 보는 데 걸리는 시간이 짧다.

물론 CSR에 비하면 서버 부하가 심하고, 페이지 이동 시 화면 깜빡거림 등의 단점도 존재하지만 장점이 매우 강력하기 때문에 최근에 많이 쓰이고 있는 프레임워크이다.

검색 엔진 최적화(SEO) 필요성

CSR의 경우에는 Javascript가 로드될 때까지 사용자에게 아무런 정보를 주지 않는다.
다시 말해서 페이지 구현에 필요한 모든 코드가 로딩이 된 후 사용자에게 시각적으로 보여지는 렌더링 방식이다.

SSR이 검색 엔진 최적화를 제공한다는 것은 CSR 방식처럼 Javascript를 로딩할 때까지 기다리지 않는다는 것이다.
SSR 방식을 사용하는 Next.js는 서버에서 페이지 구성에 필요한 HTML 정보를 클라이언트에 미리 보내기 때문에 사용자는 해당 페이지를 읽을 수 있게 된다.

많은 검색 엔진들이 HTML을 크롤링하여 브라우저에 페이지를 노출하는 방법을 하고 있다.
따라서, HTML 코드를 미리 클라이언트에 보내는 SSR 방식은 검색엔진에 페이지를 노출 시키기에 최적화된 방법이다.

위 차트로 알 수 있듯이 많은 사람들이 React를 이용하여 프론트엔드 개발을 한다.
때문에 SSR, SEO를 고려하여 React 기반으로 개발을 하는 사람들은 Next.js 프레임워크가 좋은 대안이 될 수 있다.
실제로 Next.js 사용 추세를 보아도 3~4년 전에 비하면 많이 증가한 것을 볼 수 있다.

Next.js 특징

• Hot Reloading : 사용자가 수정하는 코드는 자동적으로 새로고침 되어 반영된다.
• Auto Routing : pages 폴더에 존재하는 파일 이름을 인식하여 라우팅 기능을 제공한다.
  예를 들어, pages/login.tsx 라는 파일이 있다면 localhost:3000/login 으로 요청을 보낼 수 있다.
• Pre-rendering, SSR은 페이지 단위로 지원하고 있다.
• 타입스크립트를 사용하기 위해 웹팩, 바벨 등을 수정할 필요가 없다. 자동으로 타입스크립트를 구성하고 컴파일 한다.
• 선택적으로 API 엔드포인트를 생성하여 백엔드 기능을 제공한다.

Next.js 세팅하기

Next.js를 사용하기 위해서는 create-next-app 을 이용한다.

npx create-next-app next-app
또는
yarn create next-app next-app

위와 같이 입력하면 next-app이라는 이름을 가진 폴더에 Next.js가 세팅된다.

타입스크립트 기반으로 프로젝트를 시작하고 싶다면 --typescript 플래그를 추가한다.

npx create-next-app --typescript next-app
또는
yarn create next-app --typescript next-app

필자는 타입스크립트 기반으로 프로젝트를 생성했다.

생성된 폴더의 구조는 다음과 같다.

. // next-app
├── README.md
├── next-env.d.ts
├── next.config.js
├── node_modules
├── package-lock.json
├── package.json
├── pages
│   ├── _app.tsx
│   ├── api
│   └── index.tsx
├── public
├── styles
└── tsconfig.json

Next.js 실행하기

실행하는 방법은 npm run dev 명령어로 실행할 수 있다.
실행한 뒤 localhost:3000/ 경로로 접속하면 아래와 같은 페이지를 결과로 얻을 수 있다.

출처

• https://www.bacancytechnology.com/blog/best-frontend-framework
• https://nextjs.org/