使用next.js完成从开发到部署

next.js 是一个非常棒的轻量级的react同构框架，使用它可以快速的开发出基于服务端渲染的react应用。在next.js 官网推荐的是使用now来部署应用，但是对于国内用户或者说是有特殊需求的用户来说，部署到自定义服务器也许是大多数人希望的。借着近期公司官网改版，顺便分享下自己从开发到部署过程中所经历的点点滴滴。

依稀还记得第一次使用next.js 是在去年（2017年），那个时候使用的是next.js 2.x版本，react还是15版本，一年过去，现在react已经发展到16版本，而next.js 已经发展到6.0版本了，迭代速度瞠目结舌，在使用新版本的过程中也是遇到不少的坑。

用到的技术

先说下这次用到了哪些技术，下面列举了项目中主要用到的技术或工具库。

• Koa 2

由express原班人马开发的下一代web框架，用来提供web服务。

• nginx

是一个高性能的HTTP和反向代理服务器，也是一个IMAP/POP3/SMTP服务器（摘自百度百科），由俄罗斯人开发。用来提供静态文件服务、https证书、代理服务。

• react 16.3

一个javascript ui库

• next.js 6.0.1

一个轻量级的react同构应用框架

• ant design

由蚂蚁金服开发的基于react的一套中后台产品组件库

• react-motion

基于react的动画解决方案

• react-waypoint

判断组件是否在当前可视区的react 组件

• pm2

一个带有负载均衡功能的Node应用的进程管理器

• isomorphic-fetch

同构WHATWG Fetch API

开发阶段

讲了这么多，让我们进入开发阶段，第一步构建项目架构，这里分享下自己的项目结构：

? .vscode

vscode 配置文件

? component

react组件

? common

公共部分，我放置的是导航栏信息、全局变量和全局样式等等

? pages

项目所有页面入口，也是next.js 各页面入口文件

? static

静态文件

? styles

各页面样式表

? index.js

node启动文件

? .babelrc

babel配置文件

? .gitignore

git 配置文件

? ecosystem.config.js

pm2配置文件

? next.config.js

next.js 配置文件

? postcss.config.js

postcss 配置文件

? nginx.conf

nginx配置文件

? package.json