[Next.js 13] Next.js란? 주요 기능과 역할

# Next.js란

Next.js는 React로 웹 서비스를 구축할 수 있는 풀스택 프레임워크이다.

구체적으로 Next.js는 다음과 같은 역할을 수행할 수 있다.

 

• Front-End Server: 브라우저의 요청을 받으면, React로 렌더링한 HTML페이지를 응답한다.
• API Server: 클라이언트의 API 콜을 받아서 JSON등을 응답한다.
• Back-End Server: Node.js 환경에서 구동되므로, 데이터 베이스 연동, 파일시스템 접근 등이 가능하다.

 

이 외에도 복잡한 번들링, 컴파일 등의 설정 작업을 Next.js 에서 기본적으로 제공해주기 때문에,

개발자는 좀더 웹 개발에만 집중할 수 있게 되어 아주 유용하다. (+성능 또한 좋다)

 

한마디로 Node.js의 Express와 유사한 프레임워크이지만, 바닐라JS가 아니라 React를 사용한다고 봐도 큰 무리는 없을 것 같다.

 

예전에는, React가 기본적으로 CSR(클라이언트 사이드 렌더링)로 작동하기 때문에,

SSR(서버 사이드 렌더링)과 Code Split 등을 위해 Next.js 를 사용하는 느낌이 강했다.

 

하지만 Next.js13 부터는 확실히, Exrpess+React 느낌이 드는 풀스택 웹개발 프레임워크로 자리를 잡으려는듯 하다.

(물론 서비스 규모 및 구조에 따라 백엔드는 따로 구축해야 할 경우가 많겠지만.)

 

React 공식문서에서도 Next.js 를 이용해 React를 사용할 것을 권고하고 있다.

(과거의 create-react-app은 이미 React 공식문서에서 사라졌다.)

---

# Next.js 의 주요 기능/역할

Next.js 13의 주요 기능과 역할에 대한 큰 그림은 대략 다음과 같다.

 

1. Routing(라우팅)
   • 웹사이트는 사실상 여러 웹페이지가 각 경로(라우팅)에 저장된 구조라고 볼 수 있다.
   • Next.js 는  File-system based router를 제공하여, 각 폴더명이 라우팅 경로로 작동한다.
   • 예를 들어, `app/board/page.js` 페이지는 브라우저에서 `http://doamin.com/board` 로 접속할 수 있다.
   • 이 외에도 Next.js 는 nested routing, layout, loading, error handling 등의 다양한 기능을 제공한다.
2. Rendering(렌더링)
   • 렌더링이란, 쉽게 말해서 React 코드를 HTML 페이지로 만드는 것을 의미한다.
   • Next.js 는 1) 서버에서 렌더링 하는 SSR(Server Side Rendering)과, 2) 브라우저에서 렌더링 하는 CSR(Client Side Rendering) 방식을 모두 제공하며, 개발자가 상황에 따라 선택할 수 있다.
   • 또한, 1) Build 할 때 미리 렌더링을 해두고 재사용하는 Static Rendering과, 2) 클라이언트의 Request가 있을 때마다 새로 렌더링 하는 Dynamic Rendering 방식을 제공한다.
3. Data Fetching(데이터 통신)
   • Next.js 13 부터 새로 도입된 Server Component는 async/await 을 통해 컴포넌트 내부에서 바로 fetch() 함수를 호출해 데이터 통신을 수행할 수 있다.
   • 또한, Next.js는 JS의 기본 fetch() 함수에 캐시 관련 기능(cache, next 옵션)을 추가하여 더욱 활용성을 높였다.
   • 물론 기존의 fetch 사용방식(useEffect 나 SWR, React Query)도 여전히 사용 가능하다.
4. Styling(스타일링)
   • CSS는 CSS-Module 방식을 기본으로 제공하며, CSS-in-JS와 Tailwind CSS 도 지원한다.
5. Optimizations(최적화)
   • Image: Next.js는 HTML의 <img> 엘리먼트를 확장하여, 이미지 로딩 성능을 개선한 <Image> 컴포넌트를 제공한다.
   • Link: Next.js는 HTML의 <a> 엘리먼트를 확장하여, 더욱 빠른 라우팅 기능을 제공하는 <Link> 컴포넌트를 제공한다.
   • Script: Next.js는 <script> 태그를 확장하여, JS 스크립트 로딩을 최적화한 <Script> 컴포넌트를 제공한다.
   • Font: 구글 폰트가 기본적으로 제공되며, 폰트 로딩 및 관련 기능 또한 최적화 되어 제공된다.
   • Meta Data: head 태그 안에 들어가는 title, content, og 등을 설정할 수 있는 API가 별도로 제공되어, 편리한 SEO 작업이 가능하다.
   • Static Assets: 이미지 등의 정적 파일은 `/public` 폴더에 저장해두고 사용하면, Next.js가 최적화 및 편의 기능을 제공한다.

또한 Next.js는 TypeScript를 거의 완벽하게 지원한다.

---

공식문서: https://nextjs.org/docs

 

다음 글 부터 Next.js 13의 설치부터 사용 방법과 개념까지, 공식 문서의 내용을 참고해 정리해 보려고 한다.