摘要：踩坑入門(mén)系列一二添加三目錄重構(gòu)再談路由陸續(xù)更新個(gè)人對(duì)于腳手架的有一種執(zhí)念，如果搭建出來(lái)就是一個(gè)首頁(yè)標(biāo)簽跳轉(zhuǎn)，實(shí)在不是我這個(gè)處女座的風(fēng)格，因此第二步我就想引用框架，相信很多使用的開(kāi)發(fā)者用的也都是這個(gè)框架吧。

(一) Hello Next.js

(二) 添加Antd && CSS

(三) 目錄重構(gòu)&&再談路由

陸續(xù)更新...

個(gè)人對(duì)于腳手架的UI有一種執(zhí)念，如果搭建出來(lái)就是一個(gè)首頁(yè)＋a標(biāo)簽跳轉(zhuǎn)，實(shí)在不是我這個(gè)處女座的風(fēng)格，因此第二步我就想引用UI框架 —— ant-design，相信很多使用react的開(kāi)發(fā)者用的也都是這個(gè)UI框架吧。因?yàn)橐郧白约涸谂渲频臅r(shí)候也經(jīng)常采坑，所以還是在這里記錄一下~

既然是安裝ant-design，那么這兩個(gè)東西肯定是不能少的，一個(gè)是antd另一個(gè)就是antd官方的按需加載babel插件babel-plugin-import。

// 安裝依賴(lài)
yarn add antd babel-plugin-import 

因?yàn)楝F(xiàn)在開(kāi)發(fā)環(huán)境大部分過(guò)渡到ES6/ES7語(yǔ)法了，因此還需要安裝一個(gè)babel的裝飾器轉(zhuǎn)化插件babel-plugin-transform-decorators-legacy，說(shuō)實(shí)話這個(gè)插件具體是干啥的我還真沒(méi)太仔細(xì)看，不過(guò)裝上它在babel里配置就可以使用antd了。

當(dāng)然還有其他方法，我這里只是使用了這一種方法~

// 根目錄新建.babelrc文件
{
  "presets": ["next/babel"],
  "plugins": [
    "transform-decorators-legacy",
    [
      "import",
      {
        "libraryName": "antd",
        "style": "css"
      }
    ]
  ]
}

配置好了，我們來(lái)試一試，yarn dev啟動(dòng)項(xiàng)目，額，一大堆報(bào)錯(cuò)，為啥呢？好像是服務(wù)端渲染的時(shí)候node端的問(wèn)題吧，具體的我也不太清楚因?yàn)槭侨腴T(mén)有大神指導(dǎo)具體的可以留言教教小弟一下，不勝感激。反正查唄，因?yàn)樵驹谄渌_手架配置的時(shí)候需要在webpack里配置一些東西嘛，這個(gè)怎么可能沒(méi)有配置文件呢？
當(dāng)然有了，只不過(guò)改名了，叫做next.config.js了，上網(wǎng)查了一下，官方的解決方案就是引入一下next-css這個(gè)包，然后require.extensions[".css"]，還是那句話，我不理解，以后再深入研究一下，目前目的是可用~但是配置方案查到了就在這里寫(xiě)一下。

// 安裝依賴(lài)
yarn add @zeit/next-css

// 根目錄下創(chuàng)建next.config.js，內(nèi)容如下

/* eslint-disable */
const withCss = require("@zeit/next-css");

// fix: prevents error when .css files are required by node
if (typeof require !== "undefined") {
  require.extensions[".css"] = (file) => {}
}

module.exports = withCss();

好了，現(xiàn)在我們?cè)趩?dòng)，就沒(méi)有報(bào)錯(cuò)了，畢竟是官方解決方案，還是好使~把首頁(yè)的a標(biāo)簽換成antd的button試試效果,效果是下面這樣：

額，果然沒(méi)這么簡(jiǎn)單，這又咋的了，也沒(méi)有任何報(bào)錯(cuò)，也沒(méi)有任何提示，顯而易見(jiàn)就是樣式?jīng)]加載進(jìn)來(lái)吧。。。繼續(xù)查，OK，明白了，其實(shí)antd的樣式已經(jīng)有了，只不過(guò)在頁(yè)面上沒(méi)被引進(jìn)來(lái)。為什么這么說(shuō)呢？看下面兩幅圖：

可以看出來(lái)，第一個(gè)就是渲染出來(lái)的頁(yè)面head標(biāo)簽里沒(méi)有任何的CSS樣式，第二個(gè)就是antd的樣式文件已經(jīng)被打包放進(jìn).next文件夾的static文件夾里面了。
原因找到了，接下來(lái)就是解決問(wèn)題了

解決問(wèn)題就是我們需要把那個(gè)style.css放到頁(yè)面里，但是我翻遍了整個(gè)工程目錄，都沒(méi)有找到正常React SPA的那個(gè)index.html，尷尬了，有問(wèn)題還是得找官方文檔啊，查完過(guò)后發(fā)現(xiàn)了這個(gè)東西，Head，想看具體的可以點(diǎn)進(jìn)去看官網(wǎng)，寫(xiě)的挺詳細(xì)的~，就是我們可以使用這個(gè)head組件來(lái)為我們的頁(yè)面添加head信息。

// /pages/index.js
import React, { Fragment } from "react";
import { Button } from "antd";
import Link from "next/link";
import Head from "next/head";
const Home = () => (
  
    
      
      
      
      
    
    
      
我是Next的首頁(yè)
      
        用戶(hù)列表頁(yè)
      
    
  
);
export default Home;

OK,到現(xiàn)在而言是不是有點(diǎn)NB了，O(∩_∩)O哈哈~，真的是采坑系列啊，配置一個(gè)UI組件就這么麻煩。估計(jì)接下來(lái)有坑可踩啦！

一般的應(yīng)用都會(huì)有個(gè)菜單Menu導(dǎo)航條之類(lèi)的嘛，所以頁(yè)面就做頁(yè)面的事情，head放里面感覺(jué)怪怪的，還是按照習(xí)慣把Head抽離出來(lái)當(dāng)成一個(gè)高級(jí)父組件吧。個(gè)人習(xí)慣，就新建了一個(gè)components文件夾，里面新建Layout.js。

// /components/Layout.js
import Head from "next/head";
export default ({ children }) => (
  

    
      
      
      
      
    
    
    {children}
  
);

// /pages/index.js
import React, { Fragment } from "react";
import { Button } from "antd";
import Link from "next/link";
import Layout from "../components/Layout";
const Home = () => (
  
    
      
Hello Next.js
      
        用戶(hù)列表頁(yè)
      
    
  
);
export default Home;

講到這里，整個(gè)Antd的配置基本就完成了吧，哈哈，沒(méi)想到講個(gè)antd配置能寫(xiě)這么多，真實(shí)厲害了~既然UI框架嘛，順便我就把CSS也寫(xiě)了吧。看Next官網(wǎng)可以很明確了解到它推崇的是css-in-js，具體鏈接大家請(qǐng)點(diǎn)這里Next Css-in-Js，說(shuō)白了，可以把它理解成用類(lèi)Vue的形式寫(xiě)React，組件內(nèi)部使用下面這種形式來(lái)修改樣式

這里需要注意的是，組件內(nèi)部的css并不是子組件繼承父組件，就是組件內(nèi)部使用，如果想要子組件繼承父組件樣式，需要將style jsx改成style global jsx這種形式，說(shuō)實(shí)話，越看越像Vue，^_^
除了上面那種官方推薦的方法以外，還有其他很多種Css-in-Js的樣例，其中個(gè)人還是比較推薦styled-components的，大家感興趣可以去看官方文檔，寫(xiě)的真的很不錯(cuò)。

以前我在用antd的時(shí)候，都會(huì)根據(jù)重置一下自帶配色以及一些其他的默認(rèn)屬性，這里我才用了以前的方式結(jié)果出錯(cuò)了，以前的方式是依賴(lài)babel-plugin-import，在babelrc文件里將"style": "css"改成"style": true，這樣，babel-plugin-import會(huì)加載.less文件，然后在webpack里面配置less-loader的modifyVars變量進(jìn)行覆蓋：

config.module.rules.push({
        test: /.less$/,
        use: [
          {
            loader: "style-loader"
          }, {
              loader: "css-loader"
          }, {
              loader: "less-loader",
              options: {
                sourceMap: true,
                modifyVars: AntdTheme
              }
          }
        ]
    })

但是在next框架里如果使用less方式引入服務(wù)端渲染會(huì)過(guò)不去，這算是一個(gè)坑？還是有解決辦法我沒(méi)查到，總之暫時(shí)這樣吧，改的話其實(shí)也可以改，用下面這種方式就好了，無(wú)關(guān)痛癢~

你看，也可以改，不過(guò)個(gè)人覺(jué)得antd的配色還是挺不錯(cuò)的，哈哈，就別改了。我認(rèn)為官方后續(xù)會(huì)增強(qiáng)的吧！

可能官方早就有解決方案了吧，只不過(guò)我還是不太會(huì)用？因?yàn)槲铱闯薾ext-css包以外還提供了next-less包，這個(gè)包應(yīng)該就是用來(lái)加載less文件的吧我看了一下這個(gè)包還支持css-modules，不過(guò)我配置了一下還是不太對(duì)，并且我對(duì)目前這種寫(xiě)法還覺(jué)得挺舒服的，就不多浪費(fèi)時(shí)間了，大家感興趣的可以攻克一下，解決了可以留言個(gè)地址給我，萬(wàn)分感謝~

第二篇寫(xiě)完了，原本寫(xiě)之前以為很簡(jiǎn)單的兩下就完事了，沒(méi)想到中間踩了這么多坑，因?yàn)槲沂且贿叴铐?xiàng)目一邊寫(xiě)的，所以個(gè)人認(rèn)為還是比較詳細(xì)的，非常適合新手。像我這么良心的寫(xiě)手是不是很少了，哈哈。
代碼地址
下一篇：準(zhǔn)備好好講講路由然后簡(jiǎn)單的整理一下項(xiàng)目骨架為了接下來(lái)的redux做準(zhǔn)備~