새로운 범용 JavaScript 프레임워크인 Next.js는 이제 오픈 소스로, React 및 서버 기반 웹 애플리케이션을 위한 새로운 대안을 제공합니다.
Zeit 팀은 React의 기초 및 구성 요소 모델을 기반으로 Next.js를 구축하는 동시에 주요 확장도 제공합니다. getInitialProps()라는 구성 요소 수명 주기 후크 메서드를 사용하여 프레임워크에서 초기 렌더링이 수행됩니다. 필요한 경우 클라이언트 측에서 렌더링을 계속할 수 있습니다. 하지만 이 고급 기능은 작지만 강력한 프레임워크와 함께 제공됩니다.
Next.js의 최소 기능 세트에 따르면 새로운 웹 애플리케이션을 생성하는 편리한 방법을 제공합니다. 이 프로세스에는 많은 도구 세트 구성이 필요하지 않습니다. create-react-app과 유사하게 이 프레임워크를 설치하면 React, Webpack 및 Babel을 기반으로 하는 빌드 프로세스가 설정됩니다. 과거에는 React 컴포넌트를 작성하는 개발자가 React 구문을 기반으로 페이지를 만들었습니다. 각 페이지는 다음과 같은 렌더링 기능을 제공했습니다.
'react'에서 React 가져오기export default () => 🎜>
Next.js는 파일 시스템을 API로 사용하므로 페이지 폴더에 있는 모든 구성 요소는 자동으로 서버 기반 경로에 매핑됩니다. 예를 들어 디스크의 페이지/about.js 구성 요소는 자동으로 /about URL을 제공합니다.
Express를 기반으로 구축된 뷰 엔진인 express-react-views와 같은 프로젝트와 달리 next.js는 JavaScript 기능의 결과만 렌더링하는 최상위 서비스 레이어입니다. 이를 달성하기 위해 프로젝트에서는 별도의 CSS 파일에 의존하는 대신 Glamour를 사용하여 CSS를 처리합니다.
Next.js에 대한 이러한 본질적인 경향에는 몇 가지 미묘한 이점이 있으며, 그 중 하나는 개발자가 Webpack 또는 Babel 구성을 설정하는 데 시간을 소비할 필요가 없다는 것입니다. 과거에는 이 두 단계에 많은 개발자 시간이 소요되었습니다. 사이트의 개발 버전을 실행하려면 npm run dev를 실행하세요.
일부 개발 팀의 경우 Universal JavaScript는 여전히 고급 기술이며 많은 프레임워크에는 자체 구현이 있습니다. Angular 2에는 Universal Angular 2가 있고 Ember에는 Fastboot가 있습니다. React 분야에는 Walmart의 Electrode, Redfin의 React Server 등 다양한 옵션이 있습니다. 이제 Next.js는 많은 잠재력을 지닌 간단한 대안이 되었습니다. 이 프로젝트는 GitHub의 오픈 소스입니다.