从React和Next.js开始强大

所以你尝试了 Create React App，也许你在想，“当然，这很好，但如果我想要代码拆分、通用架构和功能强大且配置成本为零的路由器怎么办？ ” 如果是这样，你很幸运。

输入来自 Zeit 的下一级工程师的 Next.js，这是一个非常简单的样板，用于运行 React 的一些最理想的功能，免税。

从通常的方式开始，即为您的项目创建一个目录并使用 package.json 对其进行初始化。您需要将以下脚本添加到该文件：

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

现在继续添加几个目录：pages、static 和 components。

最后一个不是严格要求的，但它会立即派上用场。 🐿

$ npm install next --save

就是这样。你已经配置好了所有的花里胡哨。让我们深入了解它是如何工作的。

首先要注意的是pages目录下的每个.js文件都会自动路由——index.js路由到/； bite.js 路由到 /bite；等等。这也是您的代码拆分发生的地方，每个离散页面都会获得一个离散的捆绑包，其中包含范围依赖和适用的服务器渲染。

Next 使用 CDN 来利用浏览器的缓存来提高服务 React 的效率。 🚀 它具有本地回退功能，可以关闭。

我们可以把它留在那里，事情会很酷，但是等等，还有更多。

import Link from 'next/link';
  ...
<Link href={`about?story=${assets.story}`}>About This Site</Link>

这就是你的延迟加载。在适用的情况下使用 Next 的 Link 组件，下面的机器将从那里获取它。此外，精明的观察者会注意到 href 上的查询字符串，并且精明的眼睛会得到回报。点击 Link 会收到一个名为 url 的道具，在该道具上可以访问 query。

这是重新访问 components 目录的好时机。随着页面完成所有这些繁重的工作，您将需要一个地方来存放更多模块化的零碎物品，以保持您的路由清洁。

Next 的另一个很酷的技巧是这个坏男孩：

import React from 'react';
import Head from 'next/head';

export default ({title}) => {
  return <Head>
      <title>{title}</title>
      <link rel="stylesheet" href="static/styles.css" />
    </Head>
}

Head 组件允许您动态重新配置文档头。很有用。

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

let p = css({
  color: '#858576',
  fontSize: 32
});

export default ({caption}) => <p {...p}>{caption}</p>

同样有用的是团队包含 Glamour 内联 CSS 模块。旧方法也适用，一直到香草对象和 require 语句，但它是一个很好的接触。

⚠️️ 值得注意的是，Next 即将发布一个主要版本 (2.xx)，它将改变其 API 的各个方面，并且 Github 上的自述文件与您通过 npm 安装的版本不同步 (^1.2.3)。

对于我们的最后一个技巧，让我们通过一些数据获取将它们结合在一起。 Next.js 在其所有 async/await 荣耀中为您的数据收集需求提供了 getInitialProps，但对您使用的其他工具没有规定。真正重要的是您使用同样适合浏览器和服务器的东西，因为它可以在两者上运行。

import React from 'react';
import axios from 'axios';

export default class extends React.Component {
  static async getInitialProps () {
    const res = await axios.get('https://api.npmjs.org/downloads/point/last-week/next');
    return {nextNpmDownloads: res.data.downloads};
  }
  render () {
    return <div>
      {`Did you know Next has had ${this.props.nextNpmDownloads} on npm in the last month?`}
    </div>
  }
}

剩下的就是启动 npm run dev 的开发服务器，将浏览器指向端口 3000，并以最复杂的形式向简单性问好。

👉 如果您认为这很酷，请等我们部署它。