next.js+koa2+antd環境輕鬆搭建

king帥帥發表於2019-04-20
JS

前言

本文將會介紹next.js環境的搭建,這裡將會以next+koa2+ant desin為例,搭建全棧開發的環境,看完後我想大家應該也會知道如何將next與express,egg.js等框架和element UI等UI元件庫進行自由組合，選擇出適合自己的方案。

適合人群: 對於node.js有了解,對於react有了解，聽過服務端渲染但並沒有實踐過，知道next.js但是不會將其與後端框架與UI元件庫組合的小夥伴。

Tips: 本文作者也是一個菜鳥,寫文章的意圖一方面為了加強自己對next的掌握程度，另一方面希望可以幫到真有這樣需求的小夥伴。

使用自定義的方式搭建next環境

建立專案目錄

  • mkdir next-learn
  • cd next-learn

如果使用windows的小夥伴,可以下載git，通過git bash來使用以上命令，或者去通過桌面環境去建立next-learn資料夾，這裡希望大家都可以儘量使用命令列來進行操作。

npm/yarn初始化

這裡我想大家對於npm都比較瞭解,但是可能有很多小夥伴聽說過yarn但並沒有去了解過。這裡簡單說一下: npm的下載速度有時候真的很讓人難受，yarn的出現可以使這種情況有很大的緩解,甚至很多情況它比使用淘寶映象還要快，感興趣的小夥伴可以去官網簡單瞭解並下載使用。

  • npm進行初始化：npm init
  • yarn進行初始化: yarn init

大家可以一直回車,這裡我將使用yarn

next.js+koa2+antd環境輕鬆搭建

next, react, react-dom的安裝

這一步next.js官網介紹的也很詳細

  • npm安裝 npm install next react react-dom --save
  • yarn安裝 yarn add next react react-dom

更改package.json檔案

通過npm init的小夥伴開啟package.json會有"scripts"欄位 但通過yarn init初始化的package.json沒有"scripts"欄位，因為yarn初始化後會刪除package.json中空物件，我們可以自行增加

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
},
複製程式碼

next專案的執行

  • 在專案根目錄建立pages目錄
  • 在根目錄開啟命令列工具執行npm run dev或yarn dev開啟專案，專案預設在3000埠開啟，然後chrome中進入http:localhost:3000
    next.js+koa2+antd環境輕鬆搭建
  • 我們會在瀏覽器中看到404，這是因為我們再pages目錄中什麼都沒放，顯示這種樣子已經ok了
    next.js+koa2+antd環境輕鬆搭建

建立pages/index.js

  • 在pages目錄中建立index.js檔案
export default () => <h1>hello this is my first next.js page</h1>
複製程式碼

此時瀏覽器中應該可以顯示我們縮寫的資訊了

next.js+koa2+antd環境輕鬆搭建

使用create-next-app腳手架搭建next環境

這種方式是自動化的，所做的工作與我們上面的差不多

  • 全域性安裝 npm install -g create-next-app

create-next-app的三種使用方式

  1. 通過npx進行安裝npx create-next-app next-learn2（npx在node.js8以上版本預設已安裝）
  2. 通過yarn create安裝yarn create next-app next-learn2 （我使用的方式）
  3. 通過create-next-app進行安裝 create-next-app next-learn

腳手架方式與手動安裝的區別

  • 腳手架的方式更加自動化，比較簡單
  • 腳手架工具安裝之後會比我們手動安裝多一個components目錄和static目錄,components目錄中放了兩個元件,static目錄中放了一個favicon.ico，我們可以將其替換為自己專案的favicon.ico

其他地方跟我們手動方式建立的是一樣的,通過yarn dev開啟專案看看效果

next.js+koa2+antd環境輕鬆搭建

加入koa2

next.js自帶伺服器，但是它可以做的事情很有限，只能處理ssr渲染。 我們可以將next.js作為koa的一箇中介軟體來使用，當然您也可以選擇express和egg.js，使用方式都很類似。

安裝koa

  • npm安裝 npm install koa --save
  • yarn安裝 yarn add koa

在根目錄建立server.js

const Koa = require('koa')
const next = require('next')

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

app.prepare().then(() => {
  const server = new Koa()
  server.use(async (ctx, next) => {
    await handle(ctx.req, ctx,res)
    ctx.respond = false
  })

  server.listen(3000, () => {
    console.log('server is running at http://localhost:3000')
  })
})
複製程式碼

這裡說一下app.prepare(),我們需要等待pages目錄下的所有頁面被編譯完成，然後再啟動koa的服務。 這裡的handle(ctx.req, ctx.res)這裡傳入的req和res都是nodejs原生的http模組中的內容，如果使用express或egg.js，請注意這裡的引數

更改package.json

我們要講package.json中"scripts"欄位中的"dev"改為"dev": "node ./server.js",因為我們現在要啟動koa伺服器了 然後在命令列輸入"yarn dev"或"npm run dev"啟動服務

頁面正常訪問

next.js+koa2+antd環境輕鬆搭建

然後大家就可以按照koa或其他node.js框架進行後端開發了

加入ant design

設定next.js正常解析CSS

next.js預設配置是無法解析css檔案的，我們需要再根目錄建立一個next.config.js的配置檔案 安裝一個外掛@zeit/next-css npm安裝npm install @zeit/next-css --saveyarn安裝yarn add @zeit/next-css

在配置檔案中使用：

const WithCss = require('@zeit/next-css')

if(typeof require !== 'undefined') {
    require.extensions['.css'] = file => {}
}

module.exports = WithCss({})
複製程式碼

如果要支援sass，可以使用WithSass(WithCss({}))，具體方式大家可以親自動手查一查

大家可以隨便寫個css測試一下，這裡我更改了標題的顏色

next.js+koa2+antd環境輕鬆搭建

安裝antd和babel-plugin-import

  • npm安裝npm install antd babel-plugin-import
  • yarn安裝yarn add antd babel-plugin-import

新增babel配置 在根目錄建立.babelrc檔案

{
    "presets": ["next/babel"],
    "plugins": [
        [
            "import",
            {
                "libraryName": "antd"
            }
        ]
    ]
}
複製程式碼

presets中新增["next/babel"]讓babel支援next中的所有用到的babel配置的外掛 plugins中引入antd以支援antd按需引入

引入antd的css檔案

在pages目錄中建立_app.js檔案,這裡是覆蓋next中App元件的地方，這裡我們暫不對App元件進行更改，只是引入，然後原樣匯出，順便引入antd的css檔案

import App from 'next/app'
import 'antd/dist/antd.css'

export default App
複製程式碼

Tips: 沒有在.babelrc中進行css配置是因為mini-css-extract-plugin使用會存在bug

嘗試 我在index.js中引入一個Button元件，成功按預期進行顯示

import { Button } from 'antd'

......
<Button>Antd Button</Button>
......
複製程式碼

next.js+koa2+antd環境輕鬆搭建

總結

好了，這裡介紹了next.js+koa+antd的組合方式，如果大家有興趣，可以嘗試自己喜歡的其他組合方式

寫在最後

筆者是一位前端實習生，懂得的也不是很多，以前學習中遇到的問題或者學習筆記一直都存在印象筆記中，沒有發表過，存了上百篇，現在覺得還是邊寫東西邊分享出來吧，畢竟之前找工作過程中大家都問有沒有寫過技術部落格，然後我只能尷尬的說我寫的都存在印象筆記中，建議大家以後也可以變學習變分享，別像我之前一樣把寫的東西都藏起來。

後續將會持續更新一些學習與生活中的感想與學習筆記，目前還有點畢設和畢業論文以及工作壓力，可能更新會慢點

相關文章