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

vision1發表於2019-04-01
React服務端框架JS

寫在前面

next.js是react的同構庫，用它可以快速搭建一個react服務端渲染的框架，相比於直接用react配置服務端渲染簡單了不少。對於沒寫過SSR專案，想要嘗試一下的同學是個挺好的選擇。
next官方文件
原始碼

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

一、開工

本次專案基於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就好了。

二、配置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": []
}
複製程式碼

至此，基礎的配置工作就完成了。

三、試一試

接下來我們建立一個頁面試一試。
在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了。

四、小結

本節我們構建了next應用的基礎目錄結構，並配置了eslint，在下面章節裡，將繼續完善我們的next應用。下面附上到現在為止的目錄結構

|-- next-cnode
    |-- .babelrc
    |-- .editorconfig
    |-- .eslintrc
    |-- next.config.js
    |-- package.json
    |-- components
    |-- pages
    |   |-- index.js
    |-- static
複製程式碼

相關文章