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

前言

本文將會介紹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, 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

  

• 咱們會在瀏覽器中看到404，這是由於咱們再pages目錄中什麼都沒放，顯示這種樣子已經ok了

  

建立pages/index.js

• 在pages目錄中建立index.js文件

export default () => <h1>hello this is my first next.js page</h1>
複製代碼

此時瀏覽器中應該能夠顯示咱們所寫的信息了

使用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打開項目看看效果

加入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"啓動服務

頁面正常訪問

而後你們就能夠按照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測試一下，這裏我更改了標題的顏色

安裝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+koa+antd的組合方式，若是你們有興趣，能夠嘗試本身喜歡的其餘組合方式

寫在最後

筆者是一位前端實習生，懂得的也不是不少，之前學習中遇到的問題或者學習筆記一直都存在印象筆記中，沒有發表過，存了上百篇，如今以爲仍是邊寫東西邊分享出來吧，畢竟以前找工做過程當中你們都問有沒有寫過技術博客，而後我只能尷尬的說我寫的都存在印象筆記中，建議你們之後也能夠邊學習邊分享，別像我以前同樣把寫的東西都藏起來。

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