[Next.js] - next를 공부하면서...

리액트를 사용하다보면 다들 리액트에서 리액트 네이티브나 넥스트도 다루는 것 같아서 굉장히 궁금했다. 리액트 네이티브는 공부하게 된다면 만들고 싶은 앱이 있어서 고민을 했지만, 결국 공부하다보면 웹에 대한 지식이 더욱 필요해 지는 것 같아서 백에 대한 개념도 배워 보고 싶어 넥스트로 정하게 되었다.

물론 리액트 짱!이 되어서 새로 공부하는건 아니지만 프로그래밍 공부 자체에 변화가 필요한 시점 같아서 더 딥한 자바스크립트 공부와 넥스트 공부에 새로운 뜻을 가져보기로 했다.

 

1. Next.js 등장 배경?

next를 알기 전에 역시 리액트에 대해 설명을 뺄 수 없을 것 같다.

리액트는 자바스크립트로 이루어진 라이브러리다. 그러다보니 개인적으로 프로젝트를 진행할 때 확장이 잘 되는 듯한 느낌이 들었지만, 반대로 단점을 말하자면 애초에 지원되는 기능이 많이 없다고 느껴졌다.

 

하지만 넥스트는 프레임워크로 기본적으로 지원되는 기능이 많다. 또한 SSR(서버 사이드 렌더링)로 기존 리액트의 CSR(클라이언트 사이드 렌더링)의 단점을 보완했다. CSR은 페이지 이동이 빠르고 쾌적하지만, 초기 접속 속도가 느리다는 단점이 있다. 빠른 인터넷 속도에 익숙해지고 중요하게 여기는 현대인에게 큰 리액트로 이루어진 큰 프로젝트는 처음 로딩 속도가 느려 사람들의 페이지 이탈이 잦게 일어날 수 있다. 또한 검색 엔진 최적화(SEO)도 가능해 포털 검색 기능에 좀 더 유리하다. 등등의 장점이 있다.

 

2. Next.js 란?

공식 홈페이지에 들어가면 가장 먼저 보이는 문구는 '웹을 위한 리액트 프레임워크' 라는 글자가 가장 먼저 보인다. 강의에서는 쉽게 비유하기 위해 '리액트의 확장판' 이라는 표현을 사용하는데, 그렇다면 어떤 점이 확장 되었다고 말할 수 있을까?

 

1. 늘어난 내부 기능

앞서 말했듯이, 리액트는 라이브러리로 확장과 다른 라이브러리 사용에 대해 굉장히 유연하게 사용할 수 있지만, 라우트 기능조차 리액트 라우터라는 라이브러리를 따로 설치해서 사용해야 할 정도로 기본적으로 제공되는 기능이 많지 않다. 하지만 넥스트는 라이브러리 설치가 리액트보다 유연하지 않지만, 넥스트에서 기본적으로 제공하는 기능이 많아져 추가적인 라이브러리 설치가 많이 필요하지 않다.

특히 Page Router와 App Router 특히 앱 라우터에서는 경이로움 마저 느껴졌다...

간단하게 말해보자면 둘 다 페이지를 라우팅하는 방식인데, 기존 Page Router로 화면을 렌더링했다면, Page Router의 단점을 보완한 App Router가 다시 세상에 나왔다.

2. 다양해진 사전 렌더링 방식

리액트는 CSR의 방식으로 화면을 보여주는데, 처음 다운로드를 마치면 다시 DOM을 형성하지 않아 화면간의 이동이 굉장히 빠르지만 처음에 모든 정보를 다운받아야해 로딩 속도가 느리다. 이러한 단점을 보완하기 위해 넥스트에서는 사전 렌더링 방식을 굉장히 다양하게 설정할 수 있다. 

3. 디비의 연결과 서버 설정

개인적인 생각으로, 리액트와 가장 두드러지게 나는 차이점, 특징은 주로 프론트 처리를 위한 리액트와 달리 백단 처리도 가능하여 풀스택으로 웹을 개발할 수 있다는 점이다. 특히 자체적으로 간단하게 서버로 요청하거나 DB의 처리가 가능하다.

3. Next에 대한 내 생각

사실 리액트를 공부할때는 라이브러리나 혹은 프레임워크를 거의 써본적이 없어서 (기껏해야 JQuery 정도?) 처음부터 너무 어렵고, 또 초보자에게는 Vue가 더 낫다는 말에 갈팡 질팡도 하며 Vue도 공부해봤지만, 결국 혼자 공부하다보면 정보가 더 많은 React에 대해 공부하기로 정했었다. 이렇게 시행착오를 겪어가면서 굉장히 어렵게 공부를 했는데, Next의 경우 React에 대한 기초적인 사전 지식만 있다면, 문법도 굉장히 유사하기 때문에 오히려 더 잘 쓰기 위한 백단 공부에 치중하게 된 것 같다. 

실제로 프로젝트를 진행해보니 'use client'를 쓰는 경우가 많아져서 이러면 리액트와 다른 점이 무엇이지? 하면서 코드도 고쳐보고 어느 쪽이 내가 진행하는 프로젝트에 더 맞는 방법일까 고민하게 되는 이 과정이 너무 재밌었던것 같다.

 

 

물론 이 글을 쓰는 지금도 아직은 기초적인 수준밖에 되지 않는 것 같아서 과정이 매우 더디게만 느껴지지만서도 아직은 배움이 즐겁고 기껍기 때문에 지금을 감사하며 더 열심히 공부해보려고 한다.

특히 지금은 마음에 들지 않는 부분이 많은데, 나중에 이 포스팅을 수정하면서 더 자세하게 글을 적을 수 있을 날을 기다려본다.

 

출처: 한 입 크기로 잘라먹는 Next.js(15+) - 이정환 , Next 공식 페이지