Next.js란?
Next.js는 서버 사이드 렌더링, 정적 웹 페이지 생성 등 리액트 기반 웹 애플리케이션 기능들을 가능케 하는 Node.js 위에서 빌드된 오픈 소스 웹 개발 프레임워크
출처: 위키백과
Next.js에 대해
📍 Next.js의 주요 특징
- 라우팅
- 리액트 라우터(React Router)를 별도로 구성하지 않아도 되는 파일 기반 라우팅 시스템을 제공
- 렌더링
- 클라이언트 사이드 렌더링(Client Side Rendering) 뿐만 아니라 서버 사이드 렌더링(Server Side Rendering)도 지원
- 성능 최적화
- 웹 성능 최적화를 위해 이미지, 폰트, 스크립트 등의 리소스를 최적화 해줌
📍 페이지 이동과 관련된 기능 목록
- Link
- Link 태그는 기본 HTML의 a 태그를 확장한 개념
- 브라우저가 새 페이지를 로드하기 위해 서버에 요청을 보내는 대신, 클라이언트 측에서 페이지를 바꾸어 주기 때문에 페이지 전환 시 매우 빠른 사용자 경험(UX)을 제공
- Link 태그는 a 태그를 만들어내기 때문에 SEO가 유리
- 예시 코드
<Link href="/">Home</Link>- useRouter
- useRouter를 사용할 때는 항상 코드 최상단에 “use client”를 삽입해야함
- a 태그를 알아차릴 수 없기 때문에 크롤러 입장에서는 해당 요소가 ‘이동을 원한다’라는 것을 알 수 없음 ⇒ SEO 불리
- router.push
- 새로운 URL을 히스토리 스택에 추가
- 사용자가 router.push로 페이지를 이동하면, 이동한 페이지의 URL이 히스토리 스택의 맨 위에 쌓임
- 이후 사용자가 브라우저의 '뒤로 가기' 버튼을 클릭하면, 스택에서 가장 최근에 추가된 URL로부터 이전 페이지(URL)로 돌아감
- router.replace
- 현재 URL을 히스토리 스택에서 새로운 URL로 대체
- 현재 페이지의 URL이 새로운 URL로 교체되며, '뒤로 가기'를 클릭했을 때 이전 페이지로 이동하지만, 교체된 페이지로는 돌아갈 수 없음
- 현재 페이지를 히스토리에서 완전히 대체
- router.back
- 사용자를 히스토리 스택에서 한 단계 뒤로 이동
- 마치 브라우저의 '뒤로 가기' 버튼을 클릭한 것과 같은 효과를 내며, 사용자를 이전에 방문했던 페이지로 돌아가게 함
- router.reload
- 현재 페이지를 새로고침
- 히스토리 스택에 영향을 미치지 않음.
- 페이지의 데이터를 최신 상태로 업데이트하고 싶을 때 사용할 수 있음
Next.js 설치 방법
npx create-next-app@latest
Next.js의 장단점
장점 😊
- 서버사이드 렌더링(SSR) 및 정적 사이트 생성(SSG) 지원
- SSR을 통해 초기 페이지 로딩 속도가 빠르고, SEO에 유리함
- SSG를 사용해 빌드 시점에 페이지를 생성하여 성능이 뛰어나고, CDN에 쉽게 배포 가능
- 라우팅
- 파일 기반 라우팅 시스템을 제공하여, 폴더 구조만으로 자동으로 라우트를 설정할 수 있음
- 동적 라우팅, 미들웨어 등을 통해 복잡한 라우팅 요구사항도 쉽게 처리 가능
- API Routes
- API를 쉽게 구현할 수 있어 백엔드와 프론트엔드를 한 프로젝트에서 관리할 수 있음
단점 😖
- 초기 학습 곡선
- Next.js는 강력한 프레임워크지만, React와 같이 사용되므로 React에 익숙하지 않다면 어려울 수 있음
- 복잡한 설정
- 프로젝트의 규모가 커질수록 설정이 복잡해질 수 있음
- SSR의 단점
- SSR을 사용할 때 서버 리소스가 필요하므로 서버 비용이 증가할 수 있으며, 서버가 느리면 웹사이트가 기하급수적으로 느려질 수 있다
프론트 개발자 꿈꾸는 중