Next.js는 무엇인가? 내가 사용하면서 느낀 Next.js의 장점은?

 

✔️ Next.js는 무엇인가?

vercel에서 만든 리액트의 프레임워크!!

클라이언트 사이드 기술과 서버 사이드 기술을 모두 가지고 있는 올인원 솔루션입니다! 

 

api를 구현해서 프론트엔드인 리액트와 하이브리드하면 간단하게 서버 기능과 프론트엔드 기능을 모두 가지고 있는 애플리케이션 스택을 구축할 수 있습니다. 

 

** 라이브러리

공통으로 사용될 수 있는 특정한 기능들을 모듈화한 것을 의미합니다.

폴더명, 파일명 등에 대한 규칙이 없고 프레임워크에 비해 자유롭습니다.

ex) 무언가를 자를 때 '도구'인 '가위'를 사용해서 '내가' 직접 컨트롤하여 자른다. 

 

** 프레임워크

공통으로 사용될 수 있는 특정한 기능들을 모듈화한 것을 의미합니다. 

폴더명, 파일명 등에 대한 규칙이 있고 라이브러리에 비해 좀 더 엄격합니다.

ex) 다른 곳으로 이동할 때 '도구'인 비행기를 타고 이동하지만 '비행기'가 컨트롤하고 나는 가만히 앉아 있어야한다. 

 

 

 

✔️ React를 잘 쓰다가 왜 Next.js를 만든거지?

 

SEO(Search Engine Optimization)를 위한 Server-Side Rendering(SSR)을 가능하게 하기 위해서!

 

 

React는 Client Side Rendering(CSR)을 합니다. 웹사이트를 요청했을 때 빈 html을 가져와 script를 로딩하기 때문에, 첫 로딩 시간도 오래걸리고 Search Engine Optimization(SEO)에 취약하다는 단점이 있습니다. 그래서 대시보드나 로그인을 해야 쓸 수 있는 private한 사이트에 적합합니다.

 

이에 비해 Next.js는 pre-reloading을 통해 미리 데이터가 렌더링된 페이지를 가져올수 있게 해주므로 사용자에게 더 좋은 경험을 주고, 검색 엔진에 잘 노출 될 수 있도록 해주는 SEO에서도 장점을 얻을 수 있습니다. 

 

** Search Engine Optimization/검색엔진최적화(이하 “SEO”라 한다)

구글과 네이버와 같은 검색엔진의 문법에 맞게 웹 사이트 혹은 콘텐츠를 최적화하여 검색 결과 상위에 노출시키는 작업의 일련의 노력과 과정

 

 

✔️ ssr와 csr에 대해 더 알아보자!

 

SSR	CSR
서버에서 html 그려줌	클라이언트에서 html 그려줌
html 렌더링부터 한 다음에 js를 다운을 받는다. (js 다운받기 전에 html 를 다운 받아서 화면을 볼 수 있다. 그래서 검색엔진 클롤링이 가능)	js다운 받고 react를 돌리기 때문에 검색엔진 봇의 클롤링이 안된다.

 

 

✔️ Next.js를 사용하는데 있어서  React와 많은 차이가 있나?

NO!!

 

아래 공식문서에서 말하는 것처럼 React를 사용하여 UI를 구축한 다음 Next.js로 라우팅, 데이터 가져오기, integration과 같은 일반적인 애플리케이션 요구 사항을 해결하는 동시에 개발자 및 최종 사용자 경험을 개선할 수 있습니다!

 

You can use React to build your UI, then incrementally adopt Next.js features to solve common application requirements such as routing, data fetching, integrations - all while improving the developer and end-user experience.

 

https://nextjs.org/learn/foundations/about-nextjs

Learn | Next.js

 

 

✔️ 내가 사용하면서 느낀 Next.js의 장점은?

작은 프로젝트를 만들면서 Next.js를 사용해서 아직 모르는 것이 많지만 사용하면서 가장 큰 장점은 아래와 같습니다!

1️⃣ pages 폴더 안에 컴포넌트를 생성하면 자동으로 경로가 설정된다!

 

1. page 폴더에 페이지를 만들고

2. 아래처럼 href='' 안에 페이지 명을 쓰면 끝!!

 

2️⃣ Next/Image를 이용하면 이미지 최적화가 쉽다! 

1. lazyloading 

-> 즉 화면에 필요한 이미지만 먼저 불러오고 그 외의 이미지들의 로딩을 지연시키는 것을 의미합니다. 

2. 이미지 파일 포맷 최적화 

-> jpg, png파일을 webp형식으로 변환해 용량을 줄여줍니다.

* webp란 구글에서 만든 최적화된 이미지 파일 포맷 입니다. 

 

3️⃣ 페이지간 빠르고 매끄러운 전환이 가능하다!

React에서는 React Router를 사용해서 했는데 Next.js는 React Router를 따로 사용할 필요 없이 < Link /> 컴포넌트를 통해 페이지간의 빠르고 매끄러운 이동을 가능하게 합니다. 그래서 번들 크기를 줄일 수 있는 장점이 있습니다.

HTML의 a 태그와 달리 페이지를 리로딩하지 않고도 페이지간 이동이 가능하고, link 컴포넌트가 뷰포트에 보였을 때 관련 페이지를 백그라운드에서 미리 가져다 놓기 때문에 사용자가 링크를 클릭했을 때 매우 빠르게 해당 페이지로 이동할 수 있게 해줍니다. 

 

 

✔️ 개발환경 세팅은 어떻게 할까?

npx create-next-app@latest

 

이후 javascript를 사용할지, typescript를 사용하지 선택하면 바로 사용할 수 있습니다.