NextJS란 무엇이며, 왜 사용하는가?
📚 NextJS란?
NextJS는 React 프레임워크의 확장판이며, React 기반의 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우팅 등을 쉽게 구현할 수 있도록 도와주는 도구이다.
📚 NextJS의 필요성
NextJS는 클라이언트 측 단일 페이지 애플리케이션이 아닌 풀스택 애플리케이션을 구축하는 과정을 단순화한다. 풀스택 애플리케이션을 구축하는 데 필요한 라우팅, 데이터 처리, 인증 등의 기능을 제공하여 개발자가 더 빠르고 효율적으로 애플리케이션을 개발할 수 있다.
📚 NextJS의 주요기능 및 장점
- 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG)
NextJS는 페이지의 서버 사이드 렌더링과 정적 사이트 생성을 지원하여 초기 로딩 속도를 개선하고 SEO를 향상시킨다. - 파일 시스템 기반의 경로 설정
NextJS에서는 파일 시스템을 사용하여 페이지의 경로를 설정할 수 있어 라우팅을 단순화하고 가독성을 높인다. - 풀스택 애플리케이션 구축
NextJS를 사용하면 클라이언트와 서버에서 실행되는 코드를 모두 작성할 수 있어 풀스택 애플리케이션을 쉽게 구축할 수 있다.
📚 ReactJS와 NextJS 차이
ReactJS는 주로 클라이언트 사이드에서 실행되는 라이브러리로, 페이지가 로딩된 후에도 수정이 가능하지만 실제 화면의 내용을 소스 코드에서 확인할 수 없다.
반면에 NextJS는 서버 사이드 렌더링을 지원하여 페이지의 내용을 미리 렌더링하므로 초기 로딩 속도를 개선하고 SEO를 향상시키며 실제 화면의 내용을 소스 코드에서 확인할 수 있다.
📚 Pages Router vs App Router
NextJS에서는 Pages Router와 App Router를 선택하여 라우팅을 구현할 수 있다. Pages Router는 파일 시스템을 기반으로 경로를 설정하는 방식으로 간단하고 안정적입니다. 반면에 App Router는 더 유연하고 동적인 라우팅을 지원한다.
📚 NextJS 시작하기
npx create-next-app@latest
프론트엔드 개발자를 꿈꾸는