Next.Js 란?
Next.js는 React 기반의 오픈 소스 JavaScript 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 그리고 최근에는 Incremental Static Regeneration(ISR)과 같은 기능을 제공하여 웹 애플리케이션의 성능을 향상시키고, SEO(검색 엔진 최적화)를 개선하는 데 도움을 준다.
여기서 seo 란
SEO(Search Engine Optimization, 검색 엔진 최적화)는 웹 사이트나 페이지를 검색 엔진에서 더 높은 순위에 나타나게 하기 위한 기술이다. 검색 엔진은 Google, Bing, Yahoo!와 같은 서비스를 말하며, 사용자가 특정 키워드나 질문을 검색했을 때 가장 관련성 높고 유용한 결과를 제공하려고 한다.
React 와 비교 했을 때 Next.js 를 사용하는 이유는?
1. 서버 사이드 렌더링(SSR)
React는 기본적으로 클라이언트 사이드에서만 렌더링을 처리한다.
이는 초기 페이지 로딩 시간이 길어지고, 검색 엔진 최적화(SEO)에 불리할 수 있다.
Next.js는 서버 사이드 렌더링을 기본으로 지원한다.
이는 초기 페이지 로드 시 서버에서 HTML을 생성하고 전송하여 더 빠른 페이지 로딩 시간과 검색 엔진 친화적인 구조를 제공한다.
2. 정적 사이트 생성(SSG)
Next.js는 빌드 타임에 페이지를 HTML로 미리 생성하는 정적 사이트 생성 기능을 제공한다.
이를 통해 서버의 부하를 줄이고, CDN을 통해 콘텐츠를 제공함으로써 전 세계적으로 빠른 콘텐츠 전송이 가능해진다.
React 단독으로는 이와 같은 정적 사이트 생성 기능을 직접 구현하기 어렵다.
3. 파일 시스템 기반 라우팅
Next.js는 페이지와 라우팅 구조를 파일 시스템을 기반으로 자동으로 설정한다.
페이지를 pages 디렉토리에 추가하기만 하면 해당 파일 경로에 맞는 라우트가 자동으로 생성된다.
React에서는 일반적으로 라우팅을 위해 별도의 라이브러리(예: React Router)를 사용하고, 라우트를 수동으로 설정해야 한다.
4. 이미지 최적화
Next.js는 next/image 컴포넌트를 통해 이미지 로딩을 자동으로 최적화한다.
이는 이미지의 크기 조정, 지연 로딩, 현대적인 이미지 포맷으로의 자동 변환 등을 포함한다.
React 단독으로는 이러한 종류의 이미지 최적화 기능을 직접 구현해야 한다.
5. API 라우트
Next.js는 API 라우트를 쉽게 생성할 수 있는 기능을 제공한다.
이를 통해 서버리스 함수를 작성하고, API 엔드포인트를 쉽게 관리할 수 있다.
React에서는 별도의 백엔드 서버나 서버리스 함수를 직접 관리하고 설정해야 한다.
6. 개발 편의성
Next.js는 핫 리로딩, 환경 변수 관리, 웹팩 설정 등 개발에 필요한 다양한 기능을 기본으로 제공한다.
React 프로젝트에서는 이러한 개발 환경을 직접 설정하고 관리해야 한다.
마지막으로 React를 사용하는 유명한 회사들과 Next를 사용하는 회사들을 찾아봤다.
Next.js를 사용하는 유명한 회사들:
React를 사용하는 유명한 회사들:
