react服务端渲染框架Next.js踩坑（一）

写在前面

next.js是react的同构库，用它能够快速搭建一个react服务端渲染的框架，相比于直接用react配置服务端渲染简单了很多。对于没写过SSR项目，想要尝试一下的同窗是个挺好的选择。
next官方文档
源代码

react服务端渲染框架Next.js踩坑（一）
react服务端渲染框架Next.js踩坑（二）
react服务端渲染框架Next.js踩坑（三）
react服务端渲染框架Next.js踩坑（四）

1、开工

本次项目基于cnode社区API，实现一个完整的SSR项目，主要的技术用到了React 16，react-redux，express和eslint。
首先npm init初始化项目，安装next和Reactnpm install --save next react react-dom而后把下面脚本添加到package.json

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}
复制代码

在根目录建立文件夹pages，components，static ，这是next强制要求的目录，pages用来放页面，components用来放公共组件，static用来放静态资源。在next中路由配置文件不须要手动建立，/pages下默认会渲染为页面，文件名天然就是路由名，好比要实现路由/a咱们只须要在pages中建立文件/a/index.js就行了。

2、配置webpack和eslint

ESLint 是一个Javascript Linter，他能确保你的代码规范，强烈建议你们在本身的项目中配置上它，特别是在须要团队协做的时候。
接下来咱们在根目录下建立一个next.config.js文件，这个文件用于自定义配置一些next的功能，咱们配置webpack也要在这个文件里配置。
安装eslint和相关配置，这里咱们采用第三方airbnb的eslint配置，这也是目前比较受欢迎的。

// 这里须要安装的依赖比较多，咱们分开安装。
npm install eslint eslint-loader babel-eslint eslint-config-airbnb eslint-loader eslint-config-standard --save-dev
npm install eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-node eslint-plugin-promise eslint-plugin-react eslint-plugin-standard --save-dev
复制代码

安装完成后在next.config.js配置

const path = require('path')

module.exports = {
 webpack(config) {
   const eslintRule = {
     enforce: 'pre',
     test: /.(js|jsx)$/,
     loader: 'eslint-loader',
     exclude: [
       path.resolve(__dirname, '/node_modules'),
     ],
   }
   config.module.rules.push(eslintRule)
   return config
 }
}
复制代码

而后在根目录建立 .eslintrc 这个是eslint配置文件，在rules中能够配置一些在airbnb以外的规则

{
 "parser": "babel-eslint",
 "env": {
   "browser": true,
   "es6": true,
   "node": true
 },
 "parserOptions": {
   "ecmaVersion": 6,
   "sourceType": "module"
 },
 "extends": "airbnb",
 "rules": {
   "semi": [0],
   "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
   "jsx-a11y/anchor-is-valid": [0],
   "react/require-default-props": [0],
   "arrow-body-style": [0],
   "no-param-reassign": [0],
   "react/prop-types": [<enabled>, { ignore: <ignore>, customValidators: <customValidator> }]
 }
}
复制代码

这样eslint就配置完成了，若是代码不规范会在编辑器上直接报错。
接下来咱们配置一些其余配置，建立.editorconfig 和 .babelrc
在工做中咱们你们用的代码编辑工具不一样，所缩进的空格有也有所不一样，提交时就可能会产生diff。咱们就能够经过editorconfin来解决这个问题

root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
复制代码

.babelrc 是babel配置文件，这里咱们须要配置next/babel

{
  "presets": ["next/babel"],
  "plugins": []
}
复制代码

至此，基础的配置工做就完成了。

3、试一试

接下来咱们建立一个页面试一试。
在pages下建立一个文件index.js

import React from 'react'

const Home = () => {
  return (
    <div>hello world</div>
  )
}

export default Home
复制代码

在终端运行npm run dev，浏览器打开http://localhost:3000/，页面上就出现hello world了。

4、小结

本节咱们构建了next应用的基础目录结构，并配置了eslint，在下面章节里，将继续完善咱们的next应用。下面附上到如今为止的目录结构

|-- next-cnode
    |-- .babelrc
    |-- .editorconfig
    |-- .eslintrc
    |-- next.config.js
    |-- package.json
    |-- components
    |-- pages
    |   |-- index.js
    |-- static
复制代码