what is Next.js?

what is Next.js? | official website

Next.js is the React framework for production. => 대규모의 상업용 리액트 어플리케이션을 구축할 수 있도록 돕는 리액트  framework이다. 

 

우선 React.js는 UI(User Interface)를 구축할 수 있도록 돕는 자바스크립트 라이브러리이다. 리액트는 오직 사용자의 화면(view)과 관련된 로직 만을 담당하기 때문에, 리액트로 대규모 어플리케이션을 구축하려면 추가로 여러 라이브러리를 설치해야만 한다. 예를 들어 routing, authentication 등과 관련된 라이브러리를 설치해야 한다. 

 

Next.js는 이러한 일부의 라이브러리 없이도 대규모의 리액트 어플리케이션을 더 쉽게 구축할 수 있도록, 리액트를 뒷받침(enhance)해 주는 프레임워크이다. 예를 들어 routung과 관련된 기능을 이미 Next.js가 제공하기 때문에, 이와 관련된 라이브러리를 추가로 설치할 필요가 없다. 

key features of Next.js

1. server side rendering 기능이 내장되어 있다. 
   • 리액트로만 구축된 웹 페이지(client side rendering 페이지)를 로드한 후에 마우스 우클릭으로 source 검사 탭을 확인해 보면, html 파일의 대부분이 비어있는 것을 확인할 수 있다. 즉 entry point(<div id="root">) 내부에 아무런 자식 요소도 없는 것을 확인할 수 있다. 
   • 처음에 서버에서 html의 뼈대를 보내주면, 클라이언트 측에서 때에 따라 필요한 내용을 렌더링하기 때문이다.
   • html이 비어있는 것은 SEO가 중요한 경우에 문제가 된다. 물론 관리자 대시보드 페이지와 같이 사용자에게 보여지지 않는 페이지의 경우에는, 문제가 되지 않는다. 
   • 뿐만 아니라, 화면이 렌더링 되는 동안 깜빡거리는 화면을 보게될 수 있다.
   • 서버에 요청이 도착했을 때, 요청한 페이지와 관련된 data fetching이 일어나고 페이지가 온전히 준비된 후에 사용자에게 페이지를 제공한다면(server side rendering), 화면의 깜빡거림이 없을 뿐만 아니라, SEO에도 도움이 된다. 
   • +) 리액트에도 ssr 기능이 내장되어 있지만, 직접 설정해야하는 단계가 복잡한 편이다. Next.js는 아무런 설정 없이도, 해당 프레임워크로 구축한 페이지에 방문했을 때 서버측에서 사전에 렌더링한 페이지를 응답한다. 
2. file based routing
   • routing이란 실제로 여러 개의 페이지가 존재하는 것이 아니라, 마치 여러 페이지가 존재하는 것처럼 사용자에게 착각을 일으키는 것을 말한다. next.js에서는 react.js에서와 달리 별도의 라이브러리 없이도 routing을 이용할 수 있다.
   • pages라는 이름의 폴더 내에 생성된 파일은 자동으로 route의 역할을 한다. 
   • 즉, ssr의 장점과 spa의 장점을 융합해서 사용할 수 있다. 
3. full-stack framework
   • next.js 프로젝트에 백엔드 코드를 쉽게 추가할 수 있다.

how to start Next.js? 

npx create-next-app@latest
yarn create next-app

# typescript
npx create-next-app@latest --typescript
yarn create next-app --typescript

 

명령어를 이용해 next 프로젝트를 생성하면 여러 개의 폴더를 확인해 볼 수 있다. 그 중 가장 중요한 것들은 pages, public, styles 폴더이다. 

 

1. pages | 파일 기반의 라우팅을 설정할 수 있는 폴더
   • 해당 폴더의 index.js 파일이 최초로 화면에 보이는 페이지가 된다. 
2. public | 이미지, 폰트와 같은 리소스를 저장하는 폴더
   • react.js 프로젝트의 public 폴더에는 index.html이 존재하는 것과 달리, next.js 프로젝트에는 index.html이 존재하지 않는다. => next.js 어플리케이션의 경우, 사용자의 요청이 발생했을 때 서버에서 렌더링을 시작하고, 이 작업이 완료되었을 때 페이지(pre-rendered page)를 응답으로 반환하기 때문이다. 
   • Next.js는 public 폴더의 리소스를 static data(변하지 않는 데이터)로 취급하기 때문에, html, css 코드에서도 참조할 수 있다.
   • Next.js는 사용자가 public 폴더 밖의 파일, 폴더를 다운로드 할 수(접근할 수) 없도록 해 준다.  
   • /로 시작하는 주소를 통해 폴더 내의 파일을 참조할 수 있다. => ex) public/favicon.ico === /favicon.ico
3. styles | css 파일을 저장하는 폴더 

 

# development server 실행
npm run dev
yarn run dev

# 배포용 코드 반환
npm run build
yarn run build

# 서버 최적화??? 
npm run start
yarn run start