所以你已经尝试了 Create React App,也许你正在想,当然,这很好,但如果我想要代码分割,通用架构和一个强大的路由器,零配置成本?如果你是这样,你很幸运。
输入 Next.js从下一个级别的工程师在 Zeit,一个死的简单的锅炉板,以打击地面运行一些React最受欢迎的功能,免税。
开始通常的方式,即为您的项目创建一个目录,并用package.json初始化它。
1"scripts": {
2 "dev": "next",
3 "build": "next build",
4 "start": "next start"
5}
现在继续添加几个目录:页面,静态和组件。
<$>[注意] 最后一个不是严格要求的,但它会立即到来。
1$ npm install next --save
你配置了所有的铃声和尖叫声,让我们来挖掘它是如何工作的。
首先要注意的是,页面目录中的每个.js文件都会自动路由 - index.js路由到/; bite.js路由到/bite;等等。
<$>[注] Next 使用 CDN 来利用浏览器的缓存以提高服务效率。
我们可以把它留在那里,事情会很酷,但等待,还有更多。
1import Link from 'next/link';
2 ...
3<Link href={`about?story=${assets.story}`}>About This Site</Link>
这就是你的懒惰加载。 使用下面的链接组件,如果适用,下面的机器将从那里拿走它。 此外,聪明的观察者会注意到这个href上的查询字符串,而聪明的眼睛将被奖励。
这是一个很好的时刻来重新访问那个组件目录. 随着页面做所有这些重大的提升,你会想要一个地方来储存你的更模块化的机会和结尾,以保持你的路由清洁。
另一个酷的伎俩下一个手套是这个坏男孩:
1import React from 'react';
2import Head from 'next/head';
3
4export default ({title}) => {
5 return <Head>
6 <title>{title}</title>
7 <link rel="stylesheet" href="static/styles.css" />
8 </Head>
9}
Head组件允许您动态重新配置文档头部,非常有用。
1import React from 'react';
2import css from 'next/css';
3
4let p = css({
5 color: '#858576',
6 fontSize: 32
7});
8
9export default ({caption}) => <p {...p}>{caption}</p>
同样有用的是团队的包含 Glamor inline CSS模块. 旧的方式工作,也,全方位的瓦尼拉对象和要求陈述,但这是一个很好的触摸。
值得注意的是,Next正在接近一个主要版本(2.x.x),它将改变其API的方面,并且Github上的阅读器与您通过npm(^1.2.3)安装的版本失灵。
对于我们最后的技巧,让我们把它带到一起,用一点数据采集。Next.js在所有的async/await荣耀中保持getInitialProps,以满足您的数据收集需求,但不会为您使用的其他工具做任何处方。
1import React from 'react';
2import axios from 'axios';
3
4export default class extends React.Component {
5 static async getInitialProps () {
6 const res = await axios.get('https://api.npmjs.org/downloads/point/last-week/next');
7 return {nextNpmDownloads: res.data.downloads};
8 }
9 render () {
10 return <div>
11 {`Did you know Next has had ${this.props.nextNpmDownloads} on npm in the last month?`}
12 </div>
13 }
14}
剩下的就是点燃你的npm run dev的开发服务器,指向您的浏览器端口3000,并在其最复杂的形式中向简单表示问候。
如果你认为这很酷,等到我们部署它。