맨위로가기

Next.js

"오늘의AI위키"는 AI 기술로 일관성 있고 체계적인 최신 지식을 제공하는 혁신 플랫폼입니다.
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
목차

1. 개요

Next.js는 React 프레임워크로, 서버 측 렌더링과 정적 웹사이트 생성을 지원한다. 자바스크립트 기반 웹 애플리케이션의 문제점을 해결하기 위해 개발되었으며, Node.js와 npm을 사용하여 초기화한다. Next.js는 2016년 10월에 처음 출시되었으며, 구글, 넷플릭스, 우버 등 많은 대형 웹사이트에서 사용되고 있다. 주요 특징으로는 서버 측 렌더링, 페이지 기반 라우팅, 핫 모듈 교체, 자동 코드 분할, 페이지 사전 가져오기 등이 있으며, SWC와 TurboPack을 사용하여 코드 변환 및 번들링을 수행한다.

더 읽어볼만한 페이지

  • 자바스크립트 웹 프레임워크 - 제스트 (프레임워크)
    Jest는 다양한 JavaScript 환경을 지원하며 `test()`와 `expect()` 함수로 테스트 케이스를 작성하고 CLI를 통해 실행, 코드 커버리지 확인 등을 제공하는 테스팅 프레임워크이다.
  • 자바스크립트 웹 프레임워크 - 미티어 (웹 프레임워크)
    미티어는 실시간 웹 애플리케이션 개발을 위한 오픈 소스 JavaScript 프레임워크로, 분산 데이터 프로토콜(DDP)을 사용하며 GraphQL 기반의 Apollo 프레임워크를 통해 데이터 관리를 효율화하고 다양한 패키지와 도구를 지원한다.
  • 웹 프레임워크 - 드루팔
    드루팔은 드리스 바이테르트가 개발하여 2001년 공개된 PHP 기반의 오픈 소스 콘텐츠 관리 시스템으로, 모듈과 테마를 통해 기능 확장이 가능하며 다양한 기관에서 활용되고 활발한 커뮤니티를 가지고 있다.
  • 웹 프레임워크 - 실버스트라이프 CMS
    실버스트라이프 CMS는 PHP로 제작된 오픈 소스 콘텐츠 관리 시스템으로, 웹사이트 및 웹 애플리케이션을 개발하고 관리하는 데 사용되며, MVC 패턴과 Sapphire ORM 프레임워크를 활용하여 사용자 친화적이고 확장 가능한 플랫폼을 제공한다.
  • MIT 라이선스 소프트웨어 - MS-DOS
    MS-DOS는 마이크로소프트가 개발한 개인용 컴퓨터용 디스크 운영 체제로, IBM PC의 표준 운영 체제로 널리 사용되었으며, 단일 작업 환경과 명령줄 인터페이스를 특징으로 한다.
  • MIT 라이선스 소프트웨어 - Zcash
    Zcash는 존스 홉킨스 대학교 연구를 기반으로 개발된 익명성 강화 암호화폐로, zk-SNARK 영지식 증명을 통해 거래 당사자의 익명성을 보장하지만, 범죄 악용 우려와 규제 대상 가능성이 존재한다.
Next.js - [IT 관련 정보]에 관한 문서
개요
Next.js 로고, 이름의 양식화
Next.js 로고
개발자Vercel 및 오픈 소스 커뮤니티
최초 릴리스2016년 10월 25일
최신 안정화 버전14.1.0
최신 안정화 버전 출시일2024년 1월 18일
최신 평가 버전14.1.1
저장소vercel/next.js
프로그래밍 언어JavaScript
TypeScript
Rust
플랫폼웹 플랫폼
크기17.0 MB
종류웹 애플리케이션 프레임워크
라이선스MIT 라이선스
웹사이트공식 웹사이트

2. 배경

React는 전통적으로 클라이언트 측 렌더링만 지원하여 초기 로딩 속도가 느리고 검색 엔진 최적화(SEO)에 불리하다는 단점이 있었다. Next.js는 이러한 문제를 해결하기 위해 서버 사이드 렌더링 및 정적 사이트 생성 기능을 도입하였다. Node.js 환경에서 동작하며, npm을 통해 초기화할 수 있다.[9][10][11][12]

기존 JavaScript로는 웹 애플리케이션 개발이 어려워 React가 사용되기 시작했다. 기존 React 앱은 클라이언트 측 브라우저에서만 콘텐츠를 렌더링할 수 있지만, Next.js는 이 기능을 확장하여 서버 측에서 렌더링되는 애플리케이션을 포함한다. 이를 일반적으로 사전 렌더링이라고 하며, Next.js에서는 서버 사이드 렌더링(SSR)과 정적 사이트 생성기(SSG)로 나뉜다. React에서는 이 사전 렌더링이 불가능하여 첫 화면이 하얗게 표시되며 Next.js보다 속도가 느리므로, 검색 엔진 최적화(SEO) 등 속도를 중시하는 관점에서 Next.js가 유리하다.[34]

2. 1. React 프레임워크

Next.js는 서버 측 렌더링 및 정적 웹사이트 생성을 포함한 여러 추가 기능을 지원하는 React 프레임워크이다.[8] React는 전통적으로 자바스크립트를 사용하여 클라이언트 브라우저에서 렌더링되는 웹 애플리케이션을 구축하는 데 사용되는 자바스크립트 라이브러리이다.[9] 그러나 개발자들은 이 전략과 관련하여 JavaScript에 접근할 수 없거나 비활성화된 사용자를 고려하지 않는다는 점, 잠재적인 보안 문제, 페이지 로딩 시간의 현저한 증가, 사이트 전체 검색 엔진 최적화에 대한 피해 등 여러 가지 문제점을 인식하고 있다.[9] Next.js와 같은 프레임워크는 웹 사이트의 일부 또는 전부를 서버 측에서 렌더링한 후 클라이언트로 전송함으로써 이러한 문제를 해결한다.[9][10]

Next.js는 React용으로 가장 인기 있는 프레임워크 중 하나이다.[11] 새로운 앱을 시작할 때 사용할 수 있는 여러 권장 "도구 모음" 중 하나이며, 이들은 모두 공통 작업을 지원하기 위한 추상화 계층을 제공한다.[12] Next.js는 Node.js를 필요로 하며 npm을 사용하여 초기화할 수 있다.

2. 2. 개발 문제점 인식

리액트는 전통적으로 자바스크립트를 사용하여 클라이언트 브라우저에서 렌더링되는 웹 애플리케이션을 구축하는 데 사용되는 자바스크립트 라이브러리이다. 그러나 개발자들은 이 방식과 관련하여 다음과 같은 여러 문제점을 인식하고 있다.[9]

  • 자바스크립트에 접근할 수 없거나 자바스크립트를 비활성화한 사용자를 고려하지 않음
  • 잠재적인 보안 문제
  • 페이지 로딩 시간 증가
  • 검색 엔진 최적화(SEO)에 대한 피해


Next.js와 같은 프레임워크는 웹 사이트의 일부 또는 전부를 서버 측에서 렌더링한 후 클라이언트로 전송함으로써 이러한 문제를 해결한다.[9][10]

2. 3. 주요 기여자 및 사용자

구글은 2019년에 43개의 풀 리퀘스트를 통해 Next.js 프로젝트에 기여했다.[13] 이는 사용하지 않는 JavaScript 제거, 로딩 시간 단축, 개선된 지표 추가 등에 기여했다.[40]

2024년 10월 현재, Next.js는 월마트, 애플, 나이키, 넷플릭스, 틱톡, 우버, 리프트, 스타벅스, 스포티파이 등 다양한 대규모 웹사이트에서 사용되고 있다.[9][14]

한국에서는 Vue.js의 영향으로 Next.js와 유사한 Nuxt.js 사용이 많았으나, 최근에는 Next.js 사용이 증가하는 추세이다.

2. 4. 개발 및 지원

Next.js의 저작권과 상표는 Vercel(구 ZEIT)이 소유하고 있으며[42], 오픈 소스 개발 또한 유지 및 주도하고 있다[43]。Vercel은 소프트웨어 개선을 지원하기 위해 시리즈 A 자금으로 2100만달러를 유치했다[1]。 Next.js의 저자 기예르모 라우흐(Guillermo Rauch)는 현재 Vercel의 CEO이며, 프로젝트의 주임 개발자는 팀 뇌트켄스(Tim Neutkens)이다[45]。Vercel은 Next.js 등의 GitHub 등에서 일반 공개가 가능한 배포와, 템플릿을 복제할 수 있는 무상 및 유상 호스팅 서비스 등을 제공하고 있다.

3. 개발 역사

Next.js는 2016년 10월 25일 깃허브에서 오픈 소스 프로젝트로 처음 출시되었다.[3] 초기에는 설정이 필요 없는 즉시 사용 가능한 기능, 모든 곳에서 JavaScript 사용, 모든 함수는 JavaScript로 작성, 자동 코드 분할 및 서버 렌더링, 구성 가능한 데이터 가져오기, 요청 예측, 배포 간소화라는 6가지 원칙을 기반으로 개발되었다.[16]

이후 Next.js는 지속적으로 발전하여, 2017년 3월에는 빌드 효율성 및 핫 모듈 교체 기능이 개선된 2.0 버전이 발표되었다.[17] 2018년 9월에는 버전 7.0이 출시되어 오류 처리 기능이 향상되고, React의 컨텍스트 API를 지원하며, Webpack 4로 업그레이드되었다.[18] 2019년 2월에 출시된 8.0 버전에서는 서버리스 애플리케이션 배포를 처음으로 제공하고, 정적 내보내기에 필요한 시간과 리소스를 줄였다.[19]

3. 1. 버전별 주요 기능

Next.js는 2016년 10월 25일 GitHub에서 처음 오픈 소스 프로젝트로 출시되었다.[3]

버전출시일주요 기능
Next.js 2.02017년 3월빌드 효율성 향상, 핫 모듈 교체 기능 개선[17]
Next.js 7.02018년 9월향상된 오류 처리, React 컨텍스트 API 지원, Webpack 4로 업그레이드[18]
Next.js 8.02019년 2월서버리스 애플리케이션 배포 제공, 정적 내보내기 시간 및 리소스 감소[19]
Next.js 9.32020년 3월다양한 최적화, 글로벌 Sass 및 CSS 모듈 지원[20]
Next.js 9.52020년 7월점진적 정적 재생성, 재작성 및 리디렉션 지원[21]
Next.js 112021년 6월Webpack 5 지원, "Next.js Live" 미리 보기, "Create React App 마이그레이션" 기능[22]
Next.js 122021년 10월Rust 컴파일러 추가, AVIF 지원, Edge Functions & Middleware[23]
Next.js 132022년 10월새로운 라우팅 패턴 (App Router), 레이아웃, React 서버 컴포넌트, 스트리밍 지원, Turbopack 발표[24]
Next.js 13.42023년 5월App Router의 안정적인 버전 제공[25]
Next.js 142023년 10월엣지 런타임을 사용하여 메모리 관리 개선[26]


4. 스타일링 및 기능

Next.js는 CSS 뿐만 아니라 Scss, Sass, CSS-in-JS, 스타일 JSX 등 다양한 스타일링 방법을 지원한다.[12] TypeScript를 지원하며 스마트 번들링 기능이 내장되어 있다.[27]

4. 1. 주요 특징

Next.js의 주요 특징은 다음과 같다:

  • 서버 측 렌더링: 웹 브라우저의 부하를 줄이고 보안을 강화한다. 애플리케이션의 일부 또는 전체에 대해 서버 측 렌더링을 수행할 수 있으며, 콘텐츠가 풍부한 페이지를 선택적으로 서버 측에서 렌더링할 수 있다.[9]
  • 핫 리로딩: 변경 사항을 감지하고 적절한 페이지를 다시 렌더링하여 서버 재시작 없이 변경 사항을 즉시 반영한다. 일부 브라우저에서는 페이지 새로고침이 필요할 수 있다.[9]
  • 페이지 기반 라우팅: 개발 편의성을 위해 페이지 기반 라우팅 및 동적 라우팅을 지원한다.[9]
  • 자동 코드 분할: 페이지 로딩에 필요한 코드만 포함하여 로딩 속도를 개선한다.[9]
  • 페이지 사전 가져오기: 로딩 시간을 단축하기 위해 페이지를 미리 가져온다.[9]
  • 점진적 정적 재생성(ISR) 및 정적 사이트 생성(SSG): 빌드 시 정적 HTML 페이지를 생성하여 사용자에게 빠르게 제공한다.[30] 하지만 자주 변경되고 많은 사용자 입력을 활용하는 대화형 사이트에는 적합하지 않을 수 있다.

4. 2. 컴파일 및 번들링

Next.js는 오픈 소스 트랜스파일러인 SWC를 사용하여 코드를 브라우저에서 사용할 수 있는 자바스크립트로 변환하고 컴파일한다.[28] 모듈 번들링에는 Webpack이 사용되었으나, 현재는 TurboPack으로 대체되고 있다.[29] 이러한 도구들은 터미널에서 npm과 함께 사용된다.[13]

참조

[1] 웹사이트 How Next.js aims to simplify front-end development https://www.techrepu[...] 2020-04-21
[2] 웹사이트 vercel/next.js https://github.com/v[...] 2019-03-17
[3] 웹사이트 Next.js First Release https://github.com/v[...] 2019-03-14
[4] 웹사이트 Releases · vercel/next.js https://github.com/v[...] Vercel 2024-11-21
[5] 웹사이트 Recommended Toolchains https://reactjs.org/[...] 2021-07-10
[6] 웹사이트 Next.js Brand Guidelines https://vercel.com/d[...] 2022-08-26
[7] 웹사이트 Develop. Preview. Ship. For the best frontend teams – Vercel https://vercel.com/h[...] 2020-09-22
[8] 웹사이트 Differences Between Static Generated Sites And Server-Side Rendered Apps https://www.smashing[...] 2020-07-02
[9] 웹사이트 Next.js https://doi.org/10.1[...] Apress 2020
[10] 웹사이트 Adding Server-Side Rendering to Your React Application https://doi.org/10.1[...] Apress 2020
[11] 웹사이트 Why front-end development may be the new frontier https://www.techrepu[...] 2019-12-02
[12] 웹사이트 Comparing Styling Methods In Next.js https://www.smashing[...] 2020-09-17
[13] 웹사이트 An insider's look at Google's web framework contributions to Next.js and more https://www.techrepu[...] 2020-02-01
[14] 웹사이트 Spotify.com Technology Stack https://www.wappalyz[...] 2024-10-15
[15] 웹사이트 Static site generation with single page app functionality? That's what's coming Next(.js) https://stackoverflo[...] 2020-10-07
[16] 웹사이트 Next step after Node.js: Framework for 'universal' JavaScript apps https://www.infoworl[...] 2016-10-31
[17] 웹사이트 Next.js 2.0 plays better with React and JavaScript https://www.infoworl[...] 2017-03-28
[18] 웹사이트 Next.js 7 framework compiles faster, supports WebAssembly https://www.infoworl[...] 2018-09-21
[19] 웹사이트 Next.js 8 now supports serverless apps https://www.infoworl[...] 2019-02-14
[20] 웹사이트 Next.js upgrade emphasizes static site generation https://www.infoworl[...] 2020-03-12
[21] 웹사이트 Next.js adds incremental static pages regeneration https://www.infoworl[...] 2020-07-27
[22] 웹사이트 Next.js 11 https://nextjs.org/b[...] 2021-07-10
[23] 웹사이트 Next.js 12 https://nextjs.org/b[...] 2021-10-27
[24] 웹사이트 Next.js 13 https://nextjs.org/b[...] 2022-10-25
[25] 웹사이트 Next.js 13.4 https://nextjs.org/b[...] 2023-05-04
[26] 웹사이트 Next.js 14.0.0 https://github.com/v[...] 2023-12-08
[27] 웹사이트 Next.js 8 now supports serverless apps https://www.infoworl[...] 2019-02-14
[28] 웹사이트 Architecture: Next.js Compiler {{!}} Next.js https://nextjs.org/d[...] 2023-08-19
[29] 웹사이트 Architecture: Turbopack {{!}} Next.js https://nextjs.org/d[...] 2023-08-19
[30] 웹사이트 Incremental Static Regeneration with Next.js https://vercel.com/d[...] 2022-03-06
[31] 웹사이트 How Next.js aims to simplify front-end development https://www.techrepu[...] 2020-04-21
[32] 웹사이트 vercel/next.js https://github.com/v[...] 2019-03-17
[33] 웹사이트 Next.js First Release https://github.com/v[...] 2019-03-14
[34] 웹사이트 Create a New React App – React https://reactjs.org/[...] 2022-06-30
[35] 웹사이트 Differences Between Static Generated Sites And Server-Side Rendered Apps https://www.smashing[...] 2020-07-02
[36] 간행물 Next.js https://doi.org/10.1[...] Apress 2020
[37] 간행물 Adding Server-Side Rendering to Your React Application https://doi.org/10.1[...] Apress 2020
[38] 웹사이트 Why front-end development may be the new frontier https://www.techrepu[...] 2019-12-02
[39] 웹사이트 Comparing Styling Methods In Next.js https://www.smashing[...] 2020-09-17
[40] 웹사이트 An insider's look at Google's web framework contributions to Next.js and more https://www.techrepu[...] 2020-02
[41] 간행물 Next.js https://doi.org/10.1[...] Apress 2020
[42] 간행물 ZEIT is now Vercel https://vercel.com/b[...] 2020-04-21
[43] 웹사이트 Develop. Preview. Ship. For the best frontend teams – Vercel https://vercel.com/h[...] 2020-09-22
[44] 웹사이트 Static site generation with single page app functionality? That's what's coming Next(.js) https://stackoverflo[...] 2020-10-07
[45] 웹사이트 Next step after Node.js: Framework for 'universal' JavaScript apps https://www.infoworl[...] 2016-10-31
[46] 웹사이트 Next.js 2.0 plays better with React and JavaScript https://www.infoworl[...] 2017-03-28
[47] 웹사이트 Next.js 7 framework compiles faster, supports WebAssembly https://www.infoworl[...] 2018-09-21
[48] 웹사이트 Next.js 8 now supports serverless apps https://www.infoworl[...] 2019-02-14
[49] 웹사이트 Next.js upgrade emphasizes static site generation https://www.infoworl[...] 2020-03-12
[50] 웹사이트 Next.js adds incremental static pages regeneration https://www.infoworl[...] 2020-07-27
[51] 웹사이트 Next.js 11 https://nextjs.org/b[...] 2021-07-10
[52] 웹사이트 Next.js 12 https://nextjs.org/b[...]
[53] 웹사이트 Next.js 8 now supports serverless apps https://www.infoworl[...] 2019-02-14
[54] 웹사이트 Incremental Static Regeneration with Next.js https://vercel.com/d[...]
[55] 웹사이트 At Next.js Conf 2022, learn to build better and scale faster – Vercel https://vercel.com/b[...]
[56] 웹사이트 Next JS : The Game Changing Update - Trango Tech Blog https://trangotech.c[...] 2022-10-26
[57] 웹사이트 chore: proper description of turbo pack by ThePrimeagen · Pull Request #2414 · vercel/turbo https://github.com/v[...]
[58] 웹사이트 Next.js 13 https://nextjs.org/b[...]
[59] 웹사이트 Comparing Styling Methods In Next.js https://www.smashing[...] 2020-09-17
[60] 웹사이트 Next.js 8 now supports serverless apps https://www.infoworl[...] 2019-02-14
[61] 웹사이트 An insider's look at Google's web framework contributions to Next.js and more https://www.techrepu[...] 2020-02
[62] 간행물 Next.js https://doi.org/10.1[...] Apress 2020
[63] 간행물 Adding Server-Side Rendering to Your React Application https://doi.org/10.1[...] Apress 2020
[64] 웹사이트 Incremental Static Regeneration https://vercel.com/d[...]
[65] 웹인용 How Next.js aims to simplify front-end development https://www.techrepu[...] 2020-04-21
[66] 웹인용 vercel/next.js https://github.com/v[...] 2019-03-17
[67] 웹인용 Next.js First Release https://github.com/v[...] 2019-03-14
[68] 웹인용 Recommended Toolchains https://reactjs.org/[...] 2021-07-10


본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.

문의하기 : help@durumis.com