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
複製代碼