Next.js

NestJS website = 공식 URL **Next.js**는 Vercel에서 개발한 오픈 소스 웹 개발 프레임워크로, 리액트 기반 웹 애플리케이션에 서버 사이드 렌더링과 정적 렌더링을 제공한다. 리액트 문서에서는 Next.js를 "권장 도구 모음" 중 하나로 언급하며, Node.js를 사용하여 서버 렌더링 웹사이트를 구축할 때 개발자에게 권장한다.format=HTML 전통적인 리액트 앱은 클라이언트 측 브라우저에서만 콘텐츠를 렌더링할 수 있지만, Next.js는 이 기능을 확장하여 서버 측에서 렌더링되는 애플리케이션을 포함한다. Next.js에 대한 저작권과 상표는 Vercel이 소유하며,date=26 August 2022 Vercel은 또한 오픈 소스 개발을 유지하고 이끌고 있다.format=HTML
# 배경
Next.js는 리액트 프레임워크로, 서버 사이드 렌더링 및 정적 렌더링을 포함한 여러 추가 기능을 가능하게 한다.language=en 리액트는 전통적으로 클라이언트의 브라우저에서 자바스크립트를 사용하여 렌더링되는 웹 애플리케이션을 구축하는 데 사용되는 자바스크립트 라이브러리이다.access-date=2020-10-20 하지만 개발자들은 이 전략에 몇 가지 문제점이 있다고 인식한다. 예를 들어 자바스크립트에 접근할 수 없거나 비활성화한 사용자에게 서비스할 수 없고, 잠재적인 보안 문제, 현저히 길어진 페이지 로딩 시간, 그리고 사이트의 전체 검색 엔진 최적화에 해를 끼칠 수 있다는 점이다. Next.js와 같은 프레임워크는 웹사이트의 일부 또는 전체를 클라이언트에게 전송하기 전에 서버 측에서 렌더링하도록 허용함으로써 이러한 문제점을 회피한다.access-date=2020-10-20 Next.js는 리액트에서 가장 인기 있는 프레임워크 중 하나이다.language=en 이는 새로운 앱을 시작할 때 사용할 수 있는 여러 권장 "도구 모음" 중 하나이며, 이들 모두 일반적인 작업을 돕기 위한 추상화 계층을 제공한다.language=en Next.js는 Node.js를 필요로 하며, npm을 사용하여 초기화할 수 있다. 구글은 2019년에 43개의 풀 리퀘스트를 포함하여 Next.js 프로젝트에 기여했다.language=en-US 2024년 10월 현재 이 프레임워크는 월마트, 애플, 나이키, 넷플릭스, 틱톡, 우버, 리프트, 스타벅스 및 스포티파이를 포함한 많은 대형 웹사이트에서 사용되고 있다.access-date=15 October 2024 2020년 초, Vercel은 소프트웨어 개선을 지원하기 위해 시리즈 A 자금으로 2,100만 달러를 유치했다.url-status=dead 이 프레임워크의 원 저자인 Guillermo Rauch는 현재 Vercel의 CEO이며, 프로젝트의 주요 관리자는 Tim Neutkens이다.format=html
# 개발 역사
Next.js는 2016년 10월 25일에 깃허브에 오픈 소스 프로젝트로 처음 출시되었다. 이 프레임워크는 원래 다음 여섯 가지 원칙을 기반으로 개발되었다. 설정이 필요 없는 즉시 사용 가능한 기능, 어디에서나 자바스크립트 사용, 모든 함수는 자바스크립트로 작성, 자동 코드 분할 및 서버 렌더링, 구성 가능한 데이터 가져오기, 요청 예측, 배포 간소화.language=en Next.js 2.0은 2017년 3월에 발표되었으며, 소규모 웹사이트 작업을 더 쉽게 만드는 여러 개선 사항이 포함되었다. 또한 빌드 효율성을 높이고 핫 모듈 교체 기능의 확장성을 향상시켰다.language=en 버전 7.0은 2018년 9월에 출시되었으며, 향상된 오류 처리와 동적 라우팅 처리를 위한 리액트의 컨텍스트 API 지원이 포함되었다. 이 버전은 또한 웹팩 4로 업그레이드된 첫 번째 버전이었다.language=en-US 버전 8.0은 2019년 2월에 출시되었으며, 서버리스 애플리케이션 배포를 제공하는 첫 번째 버전이었다. 이 버전에서는 코드가 람다 함수로 분할되어 요청 시 실행된다. 또한 정적 내보내기에 필요한 시간과 리소스를 줄이고 미리 가져오기 성능을 향상시켰다.language=en-US 2020년 3월에 발표된 버전 9.3에는 다양한 최적화와 전역 Sass 및 CSS 모듈 지원이 포함되었다.language=en 2020년 7월 27일에는 Next.js 버전 9.5가 발표되었으며, 증분 정적 재생성, 재작성, 리다이렉트 지원과 같은 새로운 기능이 추가되었다.url-status=live 2021년 6월 15일에는 Next.js 버전 11이 출시되었으며, 특히 웹팩 5 지원, 실시간 협업 코딩 기능 "Next.js Live" 미리 보기, 그리고 Create React App을 Next.js 호환 형식으로 자동 변환하는 실험적 기능 "Create React App Migration"이 도입되었다.accessdate=2021-07-10 2021년 10월 26일에는 Next.js 12가 출시되었으며, 러스트 컴파일러를 추가하여 컴파일 속도를 높이고, AVIF 지원, Edge Functions & Middleware, Native ESM & URL Imports를 제공한다.language=en 2022년 10월 26일, Vercel은 Next.js 13을 출시했다. 이 주요 릴리스는 레이아웃, React Server Components, 스트리밍, 새로운 데이터 가져오기 메서드 세트를 지원하는 App Router의 추가와 함께 베타 버전의 새로운 라우팅 패턴을 도입했다. 또한 Vercel은 Webpack의 후속작인 Turbopack, 증분 빌드 시스템을 위한 Turborepo를 포함하는 Turbo라는 프론트엔드 개발을 위한 새로운 도구 모음을 발표했다.language=en-US 2023년 5월, Vercel은 Next.js 13.4를 출시했다. 이는 App Router의 안정적인 버전을 제공하여 개발자들이 프로덕션 환경에서 사용할 수 있도록 했다.language=en-US 2023년 10월, Vercel은 Next.js 14를 출시했으며, 이는 엣지 런타임을 사용하여 메모리 관리를 개선했다.language=en-US 2024년 10월, Vercel은 Next.js 15를 출시했다. 이는 Rust 기반 번들러 Turbopack(Webpack보다 빠름), React 19 지원, 비동기 요청 API를 도입한다.language=en-USlanguage=en-US 2025년 10월, Vercel은 Next.js 16을 출시했다. 오픈 소스 측면에서 가장 눈에 띄는 기능은 Build Adapters API로, Vercel이 2016년부터 자체 배포를 지원해왔음에도 불구하고 사용자 지정 요구 사항을 가진 호스팅 제공업체와 더 쉽게 통합할 수 있게 한다.language=en-USlanguage=en-US
# 스타일링 및 기능
Next.js는 CSS는 물론 미리 컴파일된 Scss 및 Sass, CSS-in-JS, styled JSX를 사용한 스타일링을 지원한다. 또한 타입스크립트 지원과 스마트 번들링 기능이 내장되어 있다.url-status=live 오픈 소스 트랜스파일러 SWC는 코드를 브라우저에서 사용할 수 있는 자바스크립트로 변환하고 컴파일하는 데 사용된다.language=en 또 다른 오픈 소스 도구인 웹팩은 이후 모듈을 번들링하는 데 사용되지만, 현재는 TurboPack으로 대체되고 있다.language=en 이러한 모든 도구는 터미널에서 npm과 함께 사용된다. Next.js의 주요 기능은 서버 사이드 렌더링을 사용하여 웹 브라우저의 부담을 줄이고 향상된 보안을 제공하는 것이다. 이는 애플리케이션의 어떤 부분이든 또는 전체 시스템에 대해 수행할 수 있으므로 콘텐츠가 풍부한 페이지를 서버 사이드 렌더링 대상으로 지정할 수 있다. 또한 웹사이트의 자산을 아직 다운로드하지 않은 웹 브라우저의 부담을 줄이기 위해 첫 방문자에게만 적용될 수도 있다. "핫 리로딩" 기능은 변경 사항이 있을 때 이를 감지하고 적절한 페이지를 다시 렌더링하여 서버를 다시 시작할 필요가 없도록 한다. 이를 통해 애플리케이션 코드에 대한 변경 사항이 웹 브라우저에 즉시 반영되지만, 일부 브라우저에서는 페이지 새로 고침이 필요할 수 있다. 이 소프트웨어는 개발자 편의를 위해 페이지 기반 라우팅을 사용하며 동적 라우팅을 지원한다. 다른 기능으로는 모듈을 실시간으로 교체할 수 있는 핫 모듈 교체, 페이지 로딩에 필요한 코드만 포함하는 자동 코드 분할, 로딩 시간을 줄이기 위한 페이지 미리 가져오기 등이 있다. Next.js는 또한 증분 정적 재생성language=en-US과 정적 사이트 생성을 지원한다. 웹사이트의 컴파일된 버전은 일반적으로 빌드 시 생성되어 .next 폴더로 저장된다. 사용자가 요청하면 미리 빌드된 정적 HTML 페이지가 캐시되어 사용자에게 전송된다. 이는 로딩 시간을 매우 빠르게 만들지만, 특히 자주 변경되고 많은 사용자 입력을 활용하는 대화형 사이트에는 적합하지 않다.