01. NextJS란 무엇이며, 왜 사용하는가?

◆ NextJS란?

: React 프레임워크의 확장판이며, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우팅 등을 쉽게 구현할 수 있도록 도와주는 도구입니다.

 

◆ NextJS의 필요성

: NextJS는풀스택 리액트 프레임워크이기 때문에 리액트로 풀스택 애플리케이션을 구축하는 과정을 단순화합니다.

풀스택 애플리케이션을 구축하는데 필요한 라우팅, 폼 제출, 데이터 처리, 인증 등의 기능을 제공합니다.

 

◆ NextJS 주요기능 및 장점

• 풀스택 애플리케이션 구축
  
  • 프론트엔드와 백엔드에서 실행되는 코드를 모두 작성할 수 있어 풀스택 애플리케이션을 쉽게 구축할 수 있습니다.
• 파일 시스템 기반의 경로 설정 (File-based Routing)
  • 파일 시스템을 사용하여 페이지의 경로를 설정할 수 있어 코드 기반 환경설정 또는 패키지가 추가로 필요하지 않다는 장점이 있습니다.
• 서버 사이드 렌더링 (SSR)
  • 페이지의 초기 로딩 속도를 개선하고 SEO를 향상시킵니다.

클라이언트 사이드 렌더링 (CSR)의 단점 : 검색 엔진 크롤러 등이 실제 페이지 내용을 첫 방문에서 볼 수 없다.
이것이 NextJSdhk React의 차이점. NextJS의 경우 화면 뿐만 아니라 실제 소스 코드에도 데이터를 확인할 수 있다.

 

◆ Page Router vs. App Router

Page Router

• 오랜 역사를 가지고 있으며, 매우 안정적입니다.
• 기존의 많은 NextJS 프로젝트에서 사용되고 있습니다.
• React를 활용하여 기능이 풍부한 풀스택 애플리케이션을 개발할 수 있습니다.

App Router

• NextJS 13에서 도입되었으며, 안정성이 보장되었지만 여전히 비교적 새로운 기능으로 일부 버그가 있을 수 있습니다.
• 최신 NextJS와 React 기능들을 지원합니다. (→ 풀스택 React 애플리케이션 개발에 적합)
  • ex) React 서버 컴포넌트,  서버 액션 등
• NextJS의 미래 지향적인 라우팅 시스템으로 주목받고 있습니다.