Next.js

Next.js
Next.js
The Next.js logo, a stylization of its name
Next.js 로고
원본 작성자기예르모 라우치[1]
개발자베르셀 및 오픈 소스 커뮤니티[2]
초기 릴리즈2016년 10월 25일; 5년 전(2016-10-25)[3]
안정적 해제
12.1.0 / 2022년 2월 17일; 23일 전(2022-02-17)
릴리스 미리 보기
12.1.1
리포지토리github.com/vercel/next.js
기록 위치JavaScript, TypeScript 및 Rust
플랫폼웹 플랫폼
크기17.0MB
유형웹 응용 프로그램 프레임워크
면허증MIT 라이선스
웹사이트nextjs.org

Next.js는 Node.js 위에 구축된 오픈 소스 웹 개발 프레임워크로, 서버 측 렌더링 및 정적 웹 사이트 생성과 같은 React based 웹 애플리케이션 기능을 가능하게 한다.리액션 문서는 "Node.js로 서버 렌더링 웹 사이트 구축"[4] 시 개발자에게 해결책으로 조언하는 "권장 툴체인" 중 Next.js를 언급한다.기존의 React 앱이 클라이언트측 브라우저에서만 콘텐츠를 렌더링할 수 있는 경우, Next.js는 서버 측에서 렌더링한 애플리케이션을 포함하도록 이 기능을 확장한다.

Next.js의 저작권 및 상표는 Vercel사가 소유하고 있으며, Vercel사의 오픈 소스 개발도 유지 및 주도하고 있다.[5]

배경

Next.js는 서버측 렌더링 및 정적 웹 사이트 생성을 포함한 몇 가지 추가 기능을 가능하게 하는 React 프레임워크다.[6]React는 JavaScript로 클라이언트의 브라우저에 렌더링된 웹 애플리케이션을 구축하는 데 전통적으로 사용되는 자바스크립트 라이브러리다.[7]그러나 개발자들은 JavaScript에 접근할 수 없거나 이를 비활성화한 사용자의 요구를 충족시키지 못하는 경우, 잠재적인 보안 문제, 페이지 로딩 시간을 크게 연장하는 등 이 전략의 몇 가지 문제를 인식하고 있으며, 이는 사이트의 전체 검색 엔진 최적화에 해를 끼칠 수 있다.[7]Next.js와 같은 프레임워크는 클라이언트로 전송되기 전에 웹 사이트의 일부 또는 전부를 서버 측에 렌더링하도록 허용함으로써 이러한 문제를 회피한다.[7][8]Next.js는 React의 가장 인기 있는 프레임워크 중 하나이다.[9]새로운 앱을 시작할 때 사용할 수 있는 몇 가지 권장 "툴체인" 중 하나이며, 이 모든 것이 일반적인 작업에 도움이 되는 추상화 계층을 제공한다.[10]Next.js는 Node.js가 필요하며 Node Package Manager를 사용하여 초기화할 수 있다.

구글은 넥스트js 프로젝트에 기부해 2019년 43건의 꺼내기 요청을 기부했는데, 이들이 사용하지 않는 자바스크립트를 가지치기하고, 로딩 시간을 단축하고, 메트릭스를 향상시키는 데 일조했다.[11]이 프레임워크는 2020년 3월 현재 넷플릭스, 깃허브, 우버, 티켓마스터, 스타벅스 등 많은 대형 웹사이트에서 사용되고 있다.[7]2020년 초, Vercel이 소프트웨어 개선을 지원하기 위해 2,100만 달러의 시리즈 A 자금을 확보했다고 발표되었다.[1]이 프레임워크의 원저자인 기예르모 라우치는 현재 베르셀의 CEO로 이 프로젝트의 주 개발자는 팀 뉴트켄스다.[12]

개발이력

넥스트.js는 5년 전인 2016년 10월 25일 GitHub에 대한 오픈소스 프로젝트로 처음 공개되었다.[3]초기에는 설치가 필요 없는 즉석 기능, 어디서나 자바스크립트, 모든 기능이 자바스크립트로 작성되며 자동 코드 분할 및 서버 렌더링, 구성 가능한 데이터 페치, 요청 예측, 배치 간소화 등 6가지 원칙을 바탕으로 개발되었다.[13]넥스트.js 2.0은 소규모 웹사이트와의 작업을 쉽게 할 수 있도록 몇 가지 개선사항을 포함하여 2017년 3월에 발표되었다.또한 빌드 효율을 높이고 핫모듈 교체 기능의 확장성을 개선했다.[14]버전 7.0은 향상된 오류 처리와 동적 경로 처리를 위한 리액션의 컨텍스트 API 지원으로 2018년 9월에 출시되었다.이것은 또한 웹팩 4로 업그레이드한 첫 번째 버전이었다.[15]버전 8.0은 2019년 2월에 출시되었으며, 서버 없는 애플리케이션 배포를 제공하는 첫 번째 버전으로, 코드는 필요에 따라 실행되는 람다 기능으로 분리된다.이 버전은 또한 정적 내보내기에 필요한 시간과 자원을 줄이고 프리페치 성능을 향상시켰다.[16]2020년 3월에 발표된 버전 9.3에는 다양한 최적화 및 글로벌 Sass 및 CSS 모듈 지원이 포함되었다.[17]2020년 7월 27일 Next.js 버전 9.5가 발표되었으며, 증분 정적 재생, 재작성, 리디렉션 지원 등의 새로운 기능이 추가되었다.[18]2021년 6월 15일에는 웹팩 5 지원, 실시간 협업 코딩 기능인 "Next.js Live"의 미리보기, Create React App에서 Next.js 호환 형태인 "Create React App Migration"[19]으로 자동 변환하는 실험 기능 등이 소개되었다.2021년 10월 26일 넥스트.js 12가 출시되어 러스트 컴파일러를 추가하여 컴파일을 더욱 빠르게 하고, AVIF 지원, Edge Functions & Middleware, Native ESM & URL Imports 등이 제공되었다.[20]

스타일링 및 기능

Next.js는 사전 컴파일된 Scss 및 Sass, CSS-in-JS, 스타일 JSX뿐만 아니라 CSS와 함께 스타일링을 지원한다.[10]또한, TypeScript 지원과 스마트 번들링으로 구축된다.[21]오픈 소스 트랜스필러 바벨은 브라우저에서 사용할 수 있는 자바스크립트로 코드를 변환하고 컴파일하는 데 사용된다.또 다른 오픈소스 도구인 웹팩은 그 후에 모듈을 묶는 데 사용된다.이 모든 도구들은 터미널에서 npm과 함께 사용된다.[11]

넥스트js의 주요 특징은 웹 브라우저의 부담을 줄이고 강화된 보안을[citation needed] 제공하기 위해 서버측 렌더링을 사용한다는 것이다.이 작업은 응용프로그램의 모든 부분 또는 전체 프로젝트에 대해 수행될 수 있으며, 서버 측 렌더링을 위해 콘텐츠가 풍부한 페이지를 선택할 수 있다.[7]그것은 또한 웹사이트의 자산을 아직 다운로드하지 않은 웹 브라우저의 부담을 줄이기 위해 처음 방문하는 사람들에게만 할 수 있다.[8]"핫 재로드" 기능은 변경사항이 작성될 때 이를 감지하고 적절한 페이지를 다시 렌더링하여 서버가 재시작할 필요가 없도록 한다.이렇게 하면 일부 브라우저에서는 페이지를 새로 고쳐야 하지만 애플리케이션 코드의 변경사항을 웹 브라우저에 즉시 반영할 수 있다.[7]소프트웨어는 개발자 편의를 위해 페이지 기반 라우팅을 사용하며 동적 라우팅을 지원한다.모듈을 라이브로 교체할 수 있도록 핫모듈 교체, 페이지 로딩에 필요한 코드만 포함하는 자동 코드 분할, 로드 시간을 줄이기 위한 페이지 프리페치 등이 그 밖의 특징이다.[7]

Next.js는 또한 증분 정적 재생(ISR)[22] 및 정적 사이트 생성(SSG)을 지원한다. 웹 사이트의 준수 버전은 보통 빌드 시간 동안 구축되며 .next 폴더로 저장된다.사용자가 요청을 하면 정적 HTML 페이지인 미리 작성된 버전이 캐시되어 전송된다.이는 로딩 시간을 매우 빠르게 만들지만, 자주 변경되고 사용자 입력을 많이 활용하는 인터랙티브 사이트는 적합하지 않기 때문에 모든 웹사이트에 적합한 것은 아니다.

참고 항목

참조

  1. ^ a b April 21, Matt Asay in Developer on; 2020; Pst, 9:51 Am. "How Next.js aims to simplify front-end development". TechRepublic. Retrieved 2020-10-20.{{cite web}}: CS1 maint: 숫자 이름: 작성자 목록(링크)
  2. ^ "vercel/next.js". GitHub. Archived from the original on 2019-03-16. Retrieved 2019-03-17.
  3. ^ a b "Next.js First Release". GitHub. 2019-03-14. Archived from the original on 2020-10-10. Retrieved 2019-03-17.
  4. ^ "Recommended Toolchains". React documentation. Retrieved 10 July 2021.
  5. ^ "Develop. Preview. Ship. For the best frontend teams – Vercel". vercel.com. Archived from the original on 2021-10-06. Retrieved 2020-09-22.
  6. ^ "Differences Between Static Generated Sites And Server-Side Rendered Apps". Smashing Magazine. 2020-07-02. Retrieved 2020-10-19.
  7. ^ a b c d e f g Thakkar, Mohit (2020), Thakkar, Mohit (ed.), "Next.js", Building React Apps with Server-Side Rendering: Use React, Redux, and Next to Build Full Server-Side Rendering Applications, Berkeley, CA: Apress, pp. 93–137, doi:10.1007/978-1-4842-5869-9_3, ISBN 978-1-4842-5869-9, retrieved 2020-10-20
  8. ^ a b Thakkar, Mohit (2020), Thakkar, Mohit (ed.), "Adding Server-Side Rendering to Your React Application", Building React Apps with Server-Side Rendering: Use React, Redux, and Next to Build Full Server-Side Rendering Applications, Berkeley, CA: Apress, pp. 139–152, doi:10.1007/978-1-4842-5869-9_4, ISBN 978-1-4842-5869-9, retrieved 2020-10-20
  9. ^ December 2, Matt Asay in Developer on; 2019; Pst, 11:58 Am. "Why front-end development may be the new frontier". TechRepublic. Retrieved 2020-10-20.{{cite web}}: CS1 maint: 숫자 이름: 작성자 목록(링크)
  10. ^ a b "Comparing Styling Methods In Next.js". Smashing Magazine. 2020-09-17. Retrieved 2020-10-20.
  11. ^ a b January 31, Matt Asay in Developer on; 2020; Pst, 6:33 Pm. "An insider's look at Google's web framework contributions to Next.js and more". TechRepublic. Retrieved 2020-10-19.{{cite web}}: CS1 maint: 숫자 이름: 작성자 목록(링크)
  12. ^ "Static site generation with single page app functionality? That's what's coming Next(.js)". Stack Overflow Blog. 2020-10-07. Retrieved 2020-10-20.
  13. ^ Krill, Paul (2016-10-31). "Next step after Node.js: Framework for 'universal' JavaScript apps". InfoWorld. Retrieved 2020-10-20.
  14. ^ Krill, Paul (2017-03-28). "Next.js 2.0 plays better with React and JavaScript". InfoWorld. Retrieved 2020-10-20.
  15. ^ Krill, Paul (2018-09-21). "Next.js 7 framework compiles faster, supports WebAssembly". InfoWorld. Retrieved 2020-10-20.
  16. ^ Krill, Paul (2019-02-14). "Next.js 8 now supports serverless apps". InfoWorld. Retrieved 2020-10-20.
  17. ^ Krill, Paul (2020-03-12). "Next.js upgrade emphasizes static site generation". InfoWorld. Retrieved 2020-10-20.
  18. ^ Krill, Paul (July 27, 2020). "Next.js adds incremental static pages regeneration". InfoWorld. Archived from the original on October 2, 2020. Retrieved September 22, 2020.
  19. ^ "Next.js 11". Retrieved 2021-07-10.
  20. ^ "Next.js 12". nextjs.org. Retrieved 2021-10-27.
  21. ^ Krill, Paul (February 14, 2019). "Next.js 8 now supports serverless apps". InfoWorld. Archived from the original on October 2, 2020. Retrieved September 22, 2020.
  22. ^ "Incremental Static Regeneration with Next.js". Vercel. Retrieved 2022-03-06.{{cite web}}: CS1 maint : url-status (링크)

외부 링크