Next.js 가 뭘까?

Next.js의 궁금증

리액트로 프로젝트를 끝내고 이력서를 준비하며 회사를 알아보고
있었는데 프론트엔드 공고글에 React만큼 Next가 보였다
그리고 갑자기 문득 궁금증이 생겼다 실컷 React를 배웠더니
Next를 쓴다니 같은 프레임워크인데 대체 뭐가 다르길래?

본문에 들어가기 전에

사실 Nextjs에 아예 모르고 있던 건 아니었다
하지만 단순히 Nextjs SSR이라는 장점이 있기 때문에 사용한다는
큰 틀만 알고 있었고 다른 세세한 이야기들은 몰랐기 때문에
이번 김에 차이점을 알아보고 대체 왜 Next가 떠오르는지 알아보고 싶어서
글을 쓰게 됐다 그럼 한번 알아보자

Next.js 란?

Next.js 는 'The React Framework for the Web'이라고 설명되고 있다

React 를 이용한 Web application을 만들기 위한 framework 임을 나타낸다

Next가 왜 뜨는 건데?

웹개발할 때 CSR(Client-side Rendering) 말고 SSR(Server-side Rendering)의 시대가 오고 있어서 그렇다

html을 서버에서 만드는 짓을 Server-side Rendering라고 한다
최근 몇 년 사이엔 Client-side Rendering 라는게 유행이었는데
이게 뭐냐면 리액트나 뷰 같은 라이브러리를 써서 웹페이지를 서버가 아닌 유저 브라우저에서 실시간으로 만들어주는 것이다

그러면 페이지 전환이 좀 부드러워지고 앱 같이 예쁜 사이트를 만들 수가 있는데
크리티컬한 단점이 두 가지 정도가 있다 그것에 대해 알아보자

1. 구글 검색 노출이 어렵다

2. 첫 페이지 로딩속도가 느리다

문제는 이 두가지가 사이트 수입성에 아주 악영향을 끼친다
사이트를 왜 만드는가? 돈 벌려고 만드는 거 아닌가
그런데 React로 만들면 돈이 줄줄 세어 나간다

하지만 Sever-Side Rendering은 html웹 페이지를 서버에서
미리 다 만들어서 보내주는 개념이기 때문에 유저에게 자바스크립트를
많이 보낼 필요가 없어서 조금 더 가볍고 구글 검색 노출도 잘 되는 편이다

심지어 Nextjs에선 SSR을 하고 싶다? 그러면 그것도 선택적으로 가능하기 때문에 안 쓸 이유가 없다

그래서 여태까지 CSR이 유행이던 시절이 React나 Vue같은 걸 써서
state 관리니 useEffect니 비동기니 어려운 기술들로 html을 만들어서 썼는데

근데 SSR하면 그런 프론트엔드 전문성 같은 것들이 필요가 없어진다
그래서 예전보다 서버개발자나 풀스택 개발자 수요가 확실히 늘어나고 있다

그래서 미래에는 실제 코드 작성을 AI가 해줄텐데 누구나 큰 그림만 이해만 잘 하고 있으면
개발을 잘 하는 시대가 올 거라 앞으론 풀 스택이 기본인 세상이 올 것이다

그래서 서버 개발 모르던 사람도 미리 서버 개발하는 것을 맛보는 것도 나쁘지 않다 하지만 요즘 이런 것들이 크게 어렵지도 않다
Next.js가 하도 잘 나와서 이걸 쓰면 된다

Next.js 요약

Next.js는 풀스택 프레임워크다 프론트엔드 + 백엔드를 개발할 수 있다
기존 React 개발자들이 매우 쉽게 입문할 수 있기 때문에 Next.js를 가장 많이 선택하는 이유다

그리고 다른 장점들도 많다

Next.js의 장점?

1. 파일과 폴더만 만들면 html 페이지를 생성해줄 수 있다

2. 서버 기능만드는 것과 DB연결하는 것 회원 인증하는 것이 쉬워진 편

3. CSR도 자유롭게 할 수 있다

4. 서버 데이터 캐싱도 쉽다

5. 폰트/이미지 최적화도 가능하다

그럼 Next.js의 단점은?

역시 당연히 Next.js의 단점도 존재한다

1. 폴더 기반 라우팅을 해주고 있다보니깐 예약 파일이 너무 많아가지고 프로젝트가 커진다 그러면 복잡해진다

2. 아직 리액트의 미완성 기능들을 도입해놨다 보니까 아직 귀찮은 점이 많이 생긴다

3. 클라이언트 컴포넌트랑 서버 컴포넌트를 구분해서 코드를 짜는 것도 귀찮다

4. 그리고 websocket, webRTC같은 것을 만들고 싶으면 서버를 한대를 더 만들어야 한다

5. 풍부한 서버 기능들이 별로 없고 그냥 html 렌더링 하나를 잘하는 느낌인데 요즘은 그게 가장 중요하다

React와의 차이점은?

1. 서버 사이드 렌더링 및 정적 사이트 생성
   React : 클라이언트 측에서 실행되며, 초기 로드 시에 HTML 과 JavaScript 번들을 내려받아 클라리언트에서 동적으로 렌더링한다
   Next.js : SSR과 정적 사이트 생성을 지원하여, 초기 로드 시에 서버에서 HTML을 생성한 후 클라이언트에 전달한다
   이는 SEO(검색 엔진 최적화)를 향상시키고 초기 로딩 속도를 개선하는데 도움이 된다

2. 파일 시스템 기반의 라우팅
   React : 라우팅을 처리하기 위해 별도의 라우팅 라이브러리를 사용해야 한다
   Next.js : Next.js는 파일 시스템 기반의 라우팅을 지원하고, 페이지 구조를 폴더와 파일로 표현할 수 있다.
   예를 들어 '/pages/about.js' 파일은 /about 경로에 대한 페이지를 나타낸다 이를 통해 간단하게 라우팅을 구성한다

3. 데이터 미리 가져오기
   React : 데이터를 가져오기 위해 별도의 API호출 또는 라이브러리를 사용해야 한다
   Next.js : SSR과 정적 사이트 생성을 지원하기 때문에, 페이지 컴포넌트에서 데이터를 미리 가져올 수 있다

4. 개발 환경 설정의 용이
   React : 프로젝트 초기 구성 및 개발 환경 설정에 추가 작업이 필요하다 개발자가 직접 웹팩 또는 바벨과 같은 도구를 구성해야 한다
   Next.js : 프로젝트 구성과 개발 환경 설정을 간소화한다 기본적인 설정이 이미 포함되어 있으며, 웹팩, 바벨 등의 도구 설정을 대신 처리해 준다. 이로 인해 개발자는 더 빠르게 프로젝트를 시작할 수 있다

글을 마치며

React와 Next.js를 알아보면서 왜 요즘 Next.js가 빠른 속도로
지금 시장에서 확대가 되고 있는지 조금 더 이해할 수 있었고
Next.js의 호기심이 생기게 되었다 조만간 Next.js도 공부를 해야겠다