우리는 개원을 위한 Next.js는 서버가 렌더링한 유니버설 자바스크립트 웹 앱의 소형 프레임워크로 React, Webpack, Babel의 기초 위에 세워진 것을 매우 자랑스럽게 생각합니다.
그것을 사용하기 시작하려면 새 디렉터리에서 실행합니다:package.json

$ npm install next --save
$ mkdir pages

페이지/index를 채웁니다.js:

import React from 'react'
export default () => 
Hello world!

package.json은 다음과 같이 스크립트를 추가합니다.

{
  "scripts": {
    "dev": "next"
  }
}

다음을 실행합니다.

$ npm run dev

이 블로그 글은 프로젝트의 이념과 디자인 결정에 관련될 것이다.
Next를 사용하는 방법을 배워야 합니다.js, 자술 파일을 참고하십시오. 이 도구의 모든 기능을 몇 분 안에 이해할 수 있습니다.
먼저 우리는 프로젝트의 배경을 깊이 있게 파악한 다음에 6가지 기본 원칙을 설명할 것이다.

0 설정.파일 시스템을 API로 사용합니다

JavaScript만 있습니다.모든 것이 하나의 기능이다

자동 서버 구현과 코드 분할

데이터 획득은 개발자에 달려 있다

예상이 표현의 관건이다

간단한 배포

배경

여러 해 동안 우리는 일반적인 JavaScript 응용 프로그램의 소망을 추구해 왔다.
Node.js는 클라이언트와 서버 간의 코드 공유를 유도하고 세계 각지의 많은 개발자들의 공헌면을 넓혔다.
많은 시도들이 Node에서 응용 프로그램과 사이트를 개발하기 위해 설계되었다.많은 템플릿 언어와 프레임워크가 나타났습니다.그러나 전단과 후단 사이의 기술 격차는 여전히 존재한다.
예를 들어 Express와 Jade를 선택하면 일부 HTML은 서버에 렌더링되고 다른 코드 라이브러리 (jQuery 또는 유사한 라이브러리 지원) 가 연결됩니다.
이런 상황은 사실상 PHP보다 좋지 않다.여러 가지 측면에서 PHP는 실제로 HTML 구현 서버에 더 적합합니다.비동기식/대기 중에는 JS에서 데이터 서비스를 조회하기 어렵습니다.오류를 요청/응답의 범위에 제한하는 것도 매우 어렵다.
그러나 그 이후로 현저한 개념적 변화는 우리로 하여금 이 격차를 줄일 수 있게 했다.그 중에서 가장 중요한 것은 순수한 렌더링 함수를 도입했는데 이 함수는 당시의 사용 가능한 데이터에 따라 UI의 표현 형식을 되돌려준다.
이 모델은 매우 중요하지만 대부분의 템플릿 시스템의 작업 원리와 다르지 않다.또 다른 핵심 개념은 구성 요소의 생명 주기다.
라이프 사이클 갈고리는 서버의 일부 렌더링의 연장을 처리할 수 있도록 합니다.예를 들어 데이터의 정적 표시부터 서버의 실시간 업데이트에 구독하고 시간에 따라 변경할 수 있습니다.어쩌면 그것은 변하지 않을지도 모른다.
Next.js는 우리가 어떻게 이 소망을 추진할 것인가.

제로 설정.파일 시스템을 API로 사용

도구는 파일 시스템의 프로젝트 구조에 대해 약간의 가설을 했다.
예를 들어, 우리는 보통 새로운 디렉터리를 만들어서 패키지를 놓는다.json 내부에 모듈을 설치하여 Node를 시작합니다.js 프로젝트./node_modules.
Next.js는 페이지의 최고급 구성 요소가 있는 하위 디렉터리를 도입하여 이 구조를 확장합니다.
예를 들어, 페이지/index를 채우려면 다음 명령을 사용할 수 있습니다.js 노선의 어떤 지도/:

import React from 'react'
export default () => Hello world

그리고 페이지/about.js 매핑:/about

import React from 'react'
export default () => 
About us

우리는 이것이 매우 좋은 기본 시작이며, 프로젝트의 빠른 탐색을 허용할 것이라고 믿는다.더 높은 루트가 필요할 때, 우리는 개발자가 요청을 차단하고 통제할 수 있도록 허락할 것이다.
작업을 시작해야 하는 모든 항목이 실행됩니다.

$ next

필요하지 않으면 구성이 없습니다.자동 핫코드 다시 불러오기, 오류 보고, 원본 지도, 구판 브라우저 변환.

JavaScript만 있습니다.모든 것이 하나의 기능이다

Next.js의 모든 루트는 확장된 함수나 클래스 React를 내보내는 ES6 모듈입니다.Component.
이런 방법이 유사한 모델에 비해 장점은 전체 시스템이 여전히 고도로 조합되고 테스트할 수 있다는 것이다.예를 들어, 한 어셈블리를 직접 렌더링하거나 다른 최상위 어셈블리로 가져오거나 렌더링할 수 있습니다.
구성 요소도 페이지에 대한 변경 사항을 가져올 수 있습니다.

import React from 'react'
import Head from 'next/head'
export default () => (
  

    
      
    
    
Hi. I'm mobile-ready!
  
)

이 시스템을 완전히 테스트할 수 있도록 포장하거나 전환할 필요가 없다.테스트 세트는 노선을 간단하게 가져오고 렌더링할 수 있습니다.
우리도 CSS-in-JS를 채택하기로 결정했다.우리는 우수한 glamor 라이브러리를 사용하여 CSS의 해석과 컴파일이 필요 없이 완전히 제한되지 않는 CSS의 권한을 제공합니다.

import React from 'react'
import css from 'next/css'

export default () => 
Hi there!

const style = css({
  color: 'red',
  ':hover': {
    color: 'blue'
  },
  '@media (max-width: 500px)': {
    color: 'rebeccapurple'
  }
})

우리는 이 모델이 탁월한 성능, 조합성, 서버 렌더링 라인과의 통합을 제공했다고 생각한다.

자동 서버 구현 및 코드 분할

지금까지 두 가지 임무는 동시에 매우 어렵고 매우 취할 만하다.
서버 렌더링

응용 프로그램의 구축을 더 작은 패키지로 분할합니다

Next를 사용합니다.js, 모든 내부 구성 요소 페이지/서버를 자동으로 가져오고 스크립트를 연결합니다..

또는 라우터를 통해 동적으로 구성 요소를 로드할 때 JSON 기반 페이지 표시를 가져옵니다.
즉, 페이지에 광범위한 가져오기 목록이 있을 수 있습니다.

import React from 'react'
import d3 from 'd3'
import jQuery from 'jquery'

...다른 페이지의 성능에는 영향을 주지 않습니다.
이 세부 사항은 기술과 업무 수요가 확연히 다른 구성 요소에서 협업을 하는 대형 팀에게 특히 유용하다.단체나 개인의 표현 처벌은 조직의 나머지 부분에 영향을 주지 않는다.

데이터 획득은 개발자에게 달려 있다

정적 JSX의 서버 렌더링은 중요한 성과이지만 실제 세계의 응용 프로그램은 서로 다른 API 호출과 네트워크에서 요청한 동적 데이터를 처리한다.
Next.js는 React 구성 요소 계약에 매우 중요한 확장을 했습니다: getInitialProps.
일부 데이터를 추출하는 페이지는 다음과 같습니다.

import React from 'react'
import 'isomorphic-fetch'
export default class extends React.Component {
  static async getInitialProps () {
    const res = await fetch('https://api.company.com/user/123')
    const data = await res.json()
    return { username: data.profile.username }
  }
}

어떤 기능(비동기식/대기 등)에 대한 우리의 입장은 다음과 같이 요약할 수 있습니다. 우리의 목표는 V8의 기능입니다.우리의 목표는 서버와 클라이언트 간에 코드 공유를 하는 것이기 때문에 Node의 코드를 실행하고 Chrome이나 Brave에서 개발할 때 이것은 우리에게 좋은 성능을 가져다 주었다.
보시다시피 계약은 매우 간단하고 선택할 수 없습니다. 자바스크립트로 해석된 대상을 되돌려주고 구성 요소를 채워야 합니다.getInitialPropsPromise props
이것은 다음을 가능하게 한다.js는 REST API, GraphQL, 심지어 전역 상태 관리 라이브러리인 Redux에서 모두 역할을 잘 발휘할 수 있습니다. 우리wiki에서 그 예를 찾을 수 있습니다.
같은 방법으로 서로 다른 데이터를 불러올 수 있습니다. 이것은 구성 요소가 서버를 통해 나타나느냐 클라이언트를 통해 동적으로 나타나느냐에 달려 있습니다.

static async getInitialProps ({ res }) {
  return res
    ? { userAgent: res.headers['user-agent'] }
    : { userAgent: navigator.userAgent }
}

본문 번역:https://zeit.co/blog/next