개발/Next.js

[Docs]Next.js는 무엇일까

yoosmg 2023. 4. 18. 01:48

Next.js는 웹 애플리케이션을 제작하기 위한 빌딩 블록을 제공하는 flexible 한 React 프레임워크다.

이게 정확히 무엇을 의미할까? React와 Next.js가 무엇이며 어떻게 도움이 되는지 알아보자.

 

 

웹 애플리케이션의 빌딩 블록

최신 애플리케이션을 구축할 때는 고려해야 할 몇 가지 사항이 있다. 예를 들면 다음과 같다:

 

✔️ User Interface - 사용자가 애플리케이션을 소비하고 상호 작용하는 방식.

✔️ Routing - 사용자가 애플리케이션의 여러 부분을 탐색하는 방법.

✔️ Data Fetching - 데이터 위치 및 데이터 가져오는 방법.

✔️ Rendering - 정적 또는 동적 콘텐츠를 렌더링 하는 시기와 위치.

✔️ Integrations - 사용하는 타사 서비스(CMS, 인증, 결제 등) 및 연결 방법.

✔️ Infrastructure - 애플리케이션 코드를 배포, 저장 및 실행하는 위치(서버리스, CDN, 엣지 등).

✔️ Performance - 최종 사용자를 위해 애플리케이션을 최적화하는 방법.

✔️ Scalability - 팀, 데이터 및 트래픽이 증가함에 따라 애플리케이션이 어떻게 적응하는가.

✔️ Developer Experience - 팀의 애플리케이션 구축 및 유지 관리 경험.

 

상기 각 부분에 대해, 솔루션을 직접 구축할지 아니면 라이브러리 및 프레임워크와 같은 다른 도구를 사용할지 결정해야 한다.

 

 

React란?

React는 상호작용형 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리다.

사용자 인터페이스란 사용자가 화면에서 보고 상호작용하는 요소를 의미한다.

 

 

라이브러리라는 말은 React가 UI를 구축하는 데 유용한 기능을 제공하긴 하지만, 애플리케이션에서 해당 기능을 어디에 사용할지는 개발자에게 맡긴다는 의미다. React 성공 요인 중 하나는 이것이 애플리케이션 구축에 있어서 상대적으로 자유로운 선택권을 제공한다는 점이다. 이로 인해 서드파티 툴과 솔루션들로 구성된 생태계가 번성해 왔다. 하지만 이는 완전한 React 애플리케이션을 처음부터 구축하려면 약간의 노력이 필요하다는 것을 의미하기도한다. 개발자들은 일반적인 애플리케이션 요구사항에 맞게 툴을 구성하고 솔루션을 재창조하는 데 시간을 투자해야 한다.

 

 

Next.js란?

Next.js는 웹 애플리케이션을 만들기 위한 빌딩 블록을 제공하는 React 프레임워크다. 프레임워크라는 말은 Next.js가 React에 필요한 툴링과 설정을 핸들링하고, 애플리케이션을 위한 추가 구조, 기능 및 최적화를 제공한다는 의미다.

 

 

UI 빌드를 위해 React를 사용하고 Next.js 기능을 점진적으로 채택한다면, routing, data fetching, integrations와 같은 일반적인 애플리케이션 요구 사항을 해결하는 동시에 개발자와 최종 사용자 경험을 개선할 수 있다. 개인 개발자이든 대규모 팀의 일원이든 React와 Next.js를 활용하여 완전히 인터랙티브 하고 매우 동적이며 성능이 뛰어난 웹 애플리케이션을 구축할 수 있다.

 

React로 완전한 웹 애플리케이션을 처음부터 구축하려면, 고려해야 할 중요한 세부 사항이 많이 있다:

 

  • 웹팩과 같은 번들러를 사용하여 코드를 번들링 하고 바벨과 같은 컴파일러를 사용하여 변환해야 함
  • 코드 분할과 같은 프로덕션 최적화를 수행해야 함
  • 성능과 SEO를 위해 몇몇 페이지를 정적으로 프리 렌더링해야 할 수도 있음. 서버 사이드 렌더링이나 클라이언트 사이드 렌더링을 사용해야 할 수도 있음
  • React 앱을 데이터 스토어에 연결하기 위해 일부 서버 사이드 코드를 작성해야 할 수도 있음

 

프레임워크는 이러한 문제를 해결할 수 있다. 그러나 이러한 프레임워크는 적절한 수준의 추상화가 있어야 하며, 그렇지 않으면 그다지 유용하지 않다. 또한, 사용자와 팀이 코드를 작성하는 동안 놀라운 경험을 할 수 있도록 뛰어난 '개발자 경험'도 제공해야 한다.

 

 

Next.js: The React Framework

Next.js는 위의 모든 문제에 대한 해결책을 제공한다. 하지만 더 중요한 것은 React 애플리케이션 빌드를성공의 길로 안내한다는 점이다.

Next.js는 동급 최고의 개발자 경험과 다음과 같은 많은 기본 제공 기능을 목표로 한다:

 

  • 직관적인 페이지 기반 라우팅 시스템(다이나믹 라우팅 지원)
  • 프리 렌더링, 정적 생성(SSG)과 서버 사이드 렌더링(SSR)이 모두 페이지 단위로 지원.
  • 페이지 로딩 속도를 높이기 위한 자동 코드 분할.
  • 최적화된 프리페칭을 통한 클라이언트 사이드 라우팅.
  • CSS 및 Sass 기본 지원. CSS-in-JS 라이브러리 지원.
  • 빠른 새로 고침을 지원하는 개발 환경.
  • 서버리스 함수로 API 엔드포인트를 구축하기 위한 API 라우팅.
  • 완전한 확장성.

 

Next.js는 세계 최대 브랜드를 포함하여 수만 개의 프로덕션용 웹사이트와 웹 애플리케이션에서 사용되고 있다.

 

 

출처

https://nextjs.org/learn/foundations/about-nextjs

https://nextjs.org/learn/basics/create-nextjs-app