[공식문서] Next.js 란 무엇인가?

Next.js는 빠른 웹 애플리케이션을 생성하기 위한 구성 요소를 제공하는 유연한 React 프레임워크입니다.

하지만 정확히 무엇을 의미하는 걸까요? React와 Next.js가 무엇이며 어떻게 도움이 될 수 있는지에 대해 약간의 시간을 할애해 알아보겠습니다.

 

웹 애플리케이션의 구성 요소

 

현대적인 애플리케이션을 구축할 때 고려해야 할 몇 가지 사항이 있습니다. 

다음과 같은 내용들이 있습니다.

• User Interface (사용자 인터페이스) : 사용자가 애플리케이션을 어떻게 소비하고 상호작용하는지.
• Routing (라우팅) : 사용자가 애플리케이션의 다른 부분 간에 어떻게 이동하는지.
• Data Fetching (데이터 가져오기) : 데이터가 어디에 있으며 어떻게 가져올지.
• Rendering (렌더링) : 정적 또는 동적 콘텐츠를 언제 어디에 렌더링할지.
• Integrations (통합) : 어떤 타사(서드파티) 서비스를 사용하며(CMS, 인증, 결제 등) 어떻게 연결할지.
• Infrastructure (인프라) : 애플리케이션 코드를 배포, 저장 및 실행하는 위치(서버리스, CDN, 엣지 등).
• Performance (성능) : 어떻게 애플리케이션을 최적화하여 최종 사용자에게 제공할지.
• Scalability (확장성) : 팀, 데이터 및 트래픽이 성장함에 따라 애플리케이션이 어떻게 적응하는지.
• Developer Experience (개발자 경험) : 팀이 애플리케이션을 구축하고 유지하는 경험.

애플리케이션의 각 부분마다 해결 방법을 직접 구축할지 라이브러리 및 프레임워크와 같은 다른 도구를 사용할지를 결정해야 합니다.

 

React란 무엇인가요?

React는 대화형 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다.

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

 

출처 : Next.js 공식문서 - 화면 구성

 

라이브러리라 함은 React가 UI를 구축하기 위한 유용한 함수를 제공하지만, 개발자에게 이러한 함수를 어떻게 사용할지는 개발자에게 달려있다는 것을 의미합니다.

React의 성공 요인 중 하나는 애플리케이션 구축의 다른 측면에 대해 상대적으로 주장하지 않는다는 점입니다. 이로 인해 타사 도구와 솔루션의 번성 생태계가 형성되었습니다.

하지만 이는 반대로 처음부터 완전한 React 애플리케이션을 구축하는 데 약간의 노력이 필요하다는 것을 의미합니다. 개발자는 도구를 구성하고 공통적인 애플리케이션 요구 사항에 대한 해결책을 새로 만들어야 하는 시간을 투자해야 합니다.

 

Next.js란 무엇인가요?

Next.js는 웹 애플리케이션을 생성하기 위한 React 프레임워크입니다.

여기서 프레임워크라 함은 Next.js가 React에 필요한 도구와 구성을 처리하며 응용 프로그램에 대한 추가적인 구조, 기능 및 최적화를 제공한다는 것을 의미합니다.

 

출처 : Next.js 공식문서 - Next.js 프레임워크 구조

React를 사용하여 UI를 구축하고, 그런 다음 점진적으로 Next.js 기능을 채택하여 라우팅, 데이터 가져오기, 통합과 같은 공통 애플리케이션 요구 사항을 해결할 수 있습니다. 이를 통해 개발자와 최종 사용자의 경험을 향상시킬 수 있습니다.

개인 개발자이든 대규모 팀의 일원이든 React와 Next.js를 활용하여 완전히 상호작용적이고 높은 성능의 웹 애플리케이션을 구축할 수 있습니다.