nextjs 是一个server端渲染react组件的开源库 想要了解它的原因是

  • 这周nextjs作者会作分享，提前温习，憋要浪费门票
  • 服务器端渲染道听途说多，有必要实际了解下
  • 多学总没有坏处

打怪升级

next专门做了个网站，提供轻松愉悦的学习路径。 章节内容安排的很下心，对react不熟悉的同学也很友好。

  • 有详细的解释
  • 有对应的demo项目
  • 阶段性小测验（单项解答），答对了会计分

console on browser or server side ?

关键看是在哪里render， 这不是废话吗? 举个例子:
Fetch Batman Shows, index 页面可以跳转到post页面，通过点击链接到post页面的时候，是client端fetch数据渲染的组件； 如果直接访问对应的post页面的url，则是server端监听请求，渲染和返回页面。

next build

会生成 .next 目录，包含bundle文件和压缩的源码;

next start -p 8000

端口随便开，可以同时开启任意多的实例, 可以和其他的node server集成使用, 下面是express的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
const express = require('express')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare()
.then(() => {
  const server = express()

  server.get('/p/:id', (req, res) => {
    const actualPage = '/post'
    const queryParams = { title: req.params.id }
    app.render(req, res, actualPage, queryParams)
  })

  server.get('*', (req, res) => {
    return handle(req, res)
  })

  server.listen(3000, (err) => {
    if (err) throw err
    console.log('> Ready on http://localhost:3000')
  })
})
.catch((ex) => {
  console.error(ex.stack)
  process.exit(1)
})

now ?

next 推荐使用的部署工具,总是会映射到80端口，不管start脚本配置的是什么端口

导出静态文件

需要依赖nextjs 3.0以上版本, 需要配置next.config.js:

1
2
3
4
5
6
7
8
9
10
11
module.exports = {
  exportPathMap: function () {
    return {
      '/': { page: '/' },
      '/about': { page: '/about' },
      '/p/hello-nextjs': {page: '/post', query: { title: "Hello Next.js" } },
      '/p/learn-nextjs': { page: '/post', query: { title: "Learn Next.js is awesome" } },
      '/p/deploy-nextjs': { page: '/post', query: { title: "Deploy apps with Zeit" } }
    }
  }
}

可以跑下面的命令

1
2
3
4
5
6
7
8
# next build
npm run build
# next export
npm run export
# default export to out
cd out
# 使用其他的server也可以
serve -p 8080

后续

JS 大会第一个就是讲的这个，主讲人现场演示中文名’寞晓墨’, 介绍了nextjs, 现场打码建工程，科普了ssr的很多特点和nextjs的牛逼之处。
用例子(Hello world, Hacker News, Chat Room)讲解了, dynamic modules, …；谈到的东西比较多，因为全是英文，只能几个大概了。总计就是nextjs可以适应不同lazy load， prefech, dynamic import的需求, 而且安利了一波antd……
在他做演示的时候我还留意到他使用的一个类似terminal的东西是叫hyper, 这个是基于web开发的一个terminal程序，回来后自己也安装了试用了下；
很尴尬。。网络不好，下了半天没下下来。等之后再写个使用说明吧