NextJS는 풀 스택(Fullstack) 리액트 앱을 만들기 위한 리액트 프레임워크입니다. 리액트 컴포넌트를 사용하여 유저 인터페이스를 구성하고 추가적인 기능이나 최적화를 위해 Next.js를 사용할 수 있습니다. Next.js는 프론트 엔드와 백엔드를 혼합(blend)합니다.따라서 프론트 엔드와 백엔드가 같은 프로젝트에 존재하게 됩니다.
내부적으로 번들링, 컴파일 등과 같은 기능을 수행합니다. 이를 통해 프로 젝트 설정에 시간을 소비하는 대신에 애플리케이션 구축에 더욱 집중할 수 있다고 나와있습니다.
Next.JS의 장점
풀 스택 앱 개발
NextJs는 프론트 엔드와 백엔드를 혼합(blend)한다. 따라서 프론트 엔드 부분과 백엔드 부분이 같은 프로젝트에 존재
파일 기반 라우팅
파일 시스템(폴더 + 파일)을 통해서 경로를 설정할 수 있다. 코드 기반의 라우팅 경로 설정이나 추가적인 패키지가 필요 없음
Server-side Rendering
기본 적으로 Next.js는 서버측에서 모든 페이지를 렌더링 한다. 즉, 완성된 HTML 페이지가 클라이언트로 전송
Next.JS 설치 방법
npx create-next-app@latest 명령어를 터미널에서 실행
아래와 같은 사용할 설정에 대하여 No 또는 Yes 선택
위에 설정에서 App Router를 사용할 것이냐고 묻는 질문이 있습니다. Next.js 앱을 만드는 접근 방법은 App Router 방식과 Pages Router 방식 두 가지가 존재합니다.
Pages Router
- 오래 동안 사용된 방식
- 매우 안정적
- 많은 Next.js 프로젝트에서 사용
- 리액트를 사용하여 기능이 풍부한 앱 개발 가능
App Router
- Next.js 13에 도입
- 안정적이지만 부분적으로 버그 존재
- 최신 Next & React 기능 지원 (리액트 서버 컴포넌트, 서버 액션 등)
Next.js
이후에 생성된 Next.JS 기본 파일 구조
간략하게 Next.js에 대해서 적어보았고 다음에는 라우팅 처리를 실제로 어떻게 진행하는지 공부하겠습니다.
포기란 없습니다.