相信大家在使用nextjs的時候，難免遇到一些坑。其實可能大部分原因在于 nextjs 做了很多封裝，我們可能不能第一時間搞清楚包括它相關的所有配置，比如其中的webpack配置。我前面也寫過 SSR 實作的文章和簡單的輪子《實作ssr服務端渲染》，也知道 SSR 要實作為 nextjs 這樣的三方架構，還是會需要經曆很複雜編碼的。
總歸有時候遇到問題，在網上也查不到一個正确的解決方案。比如，我為此頭痛幾天的 antd-mobile 按需加載,最開始我無法正常使用，就隻能全局引入 antd-mobile的min.css，這導緻我要在頁面加載 164k 的 css 檔案，我們使用 nextjs 就是為了提升加載速度，這種情況不能忍啊！
言歸正傳，先說說我遇到的問題，我使用了 antd-mobile 并且需要對它進行按需加載，下面是官方的文檔，推薦我們使用 babel-plugin-import。
按照 nextjs 官方文檔我們在 .babelrc 中添加插件
可當我運作的時候報錯了，報錯如下。最開始感到奇怪，我并沒有引入這個包，後來發現其實是 antd-mobile 中有引入它。但是為什麼會報錯呢， 便想到應該是 webpack loader 的問題，我認為是 loader 排除了node_modules。（這裡解釋一下，node_modules 中的包本應該都是打包好的，但是一些情況下，我們是直接引入源代碼中的子產品的，那這樣的話我們就需要讓我們的 loader 解析 node_modules 中的代碼，然而有些預設配置就是排除了 node_modules 的，這樣就會導緻無法解析）。
然後我在 next.config.js 中，定義 webpack 方法，列印出 webpack 配置。 nextjs 中的 webpack 配置大緻是引入了一個 next-babel-loader 這樣的 loader，而我們使用next-css、next-less或者next-sass等插件，相關的 loader 會被 push 到 rules 中。 核心的loader 就是 next-babel-loader。然而我在其參數中并沒有發現 exclude， 到是有 include，而後我往 include 裡添加 node_modules 下需要的元件正則，發現并沒有效果。而後我經曆了各種痛苦，嘗試過各種方面的辦法，網上也查不出解決方案。好，跳過心酸的部分。
再後來我開始仔細的一個個看官方的插件，我找到了它：next-transpile-modules，從名稱上來看似乎和我想要的有點關系。https://github.com/martpie/next-transpile-modules。
一看文檔果然，它就是我要找的，它就是解決 node_modules 中代碼不被 loader 解析的問題。我使用了它，這時報錯資訊變了（其實後來我弄比較清楚以後就沒有報錯了，可能當時配置改的比較多，哪裡影響到了），我覺得似乎起到作用了，但是還是會報錯。于是我便看了一下它的代碼，我終于發現了 webpack.externals 這個配置，原來是這個地方排除了解析外部依賴。如果我們使用插件 transpile 并配置好 transpileModules: ["antd-mobile"]，transpile 内部會生成 includes 正則，在 externals 執行時，會排除掉我們配置的 node_modules 子產品，是以 antd-mobile 就能被正常解析了，代碼如下
而後它又添加了一個 next-babel-loader 到 rules 中，現在其實有兩個 next-babel-loader 在 webpack 配置中。我認為這個配置是多餘的，并且就是之前我可能哪裡沒配置對，這個多餘的 loader 讓我編譯報錯了，我把它生成的多餘 loader 删除才沒有報錯的。
最後在我完全能正常運作的時候，還是嘗試删除了它，發現并沒有報錯，因為從理論上來說，這個重複的loader本身也沒有用，是以我給作者提了一個建議，建議去掉這個新loader， 對方說再認真看看。這裡：https://github.com/martpie/next-transpile-modules/issues/32。 （事實證明我了解錯了，請看文章後文詳情）
我目前使用的 next 是8.x，在6.x裡，我看了下它确實是用的 exclude 來排除的 node_modules，到 8 以後改為 externals 了，一定有它官方的道理吧。如果你用的是6.x，你可以嘗試修改 exclude，不過建議大家都更新為 8 吧，很平滑的。
第二個問題，可能也是大家比較常見的，那就是 cssModules。官方代碼是這樣的
完全沒有問題，可以正常使用。隻是 antd-mobile 的 class 名稱也被 cssModules 給改了，但是元件 dom 中的 class 名稱并沒有被修改，這樣樣式就不起作用了。ok，沒有問題，這個簡單，我們使用 css-loader api 中的 options.getLocalIdent，來控制修改 class 名稱。代碼大緻如下
通過閱讀 css-loader 源碼，發現其内部運作過程，它内部有一個 css-loader/lib/getLocalIdent.js 方法，如果使用者自定義了 getLocalIdent 方法，它在編譯 cssmodules 時，便會用使用者定義的方法，否則使用自帶的方法。我的想法就是通過自定義 getLocalIdent， 正則判斷 node_modules，也就是目前樣式如果是來自于 node_modules 中檔案的話，我傳回它本身的名稱，就是不改動它，而它是我們的源碼的話，我執行 css-loader 本身的 getLocalIdent 方法。這樣就既使我們自己的代碼能被 cssmodules，而三方庫的代碼不被 cssmodules 影響。
最後附上兩個配置檔案 .babelrc 、 next.config.js 和 postcss.config.js
後來我終于想清楚了，首先 next-transpile-modules 的目的就是讓 node_modules 中的包可以使用 next-babel-loader ，它的文檔第一句就是這個意思，我當時了解錯誤了。
其次我們再來說說 webpack.externals 這個配置，比如 nextjs 預設就是如下這樣配置的，它把 node_modules 下的 js 作為一個公共的js來處理，當這樣配置以後，webpack 就不會去分析 node_modules 下的 js 的依賴了。
比如我自己在 node_modules 裡寫一個檔案夾 @test，裡面是一個 index.js，index.js require了同級的 b.js，然後我們在 nextjs 的項目代碼裡引入 @test/index.js ，編譯時就會報錯，報錯的行就在 require('b.js') 這裡。
再來說說 next-transpile-modules, 它做了兩個事情，第一是從 nextjs 預設的 externals 中，排除掉我們定義的 transpileModules: ["antd-mobile"]，這樣 antd-mobile 中的 js 就會被 webpack 正常解析依賴了。而後建立了一個 next-babel-loader ，include 的值是 transpileModules 配置的 ["antd-mobile"]。 由于我們的 antd-mobile 中的代碼不需要被 next-babel-loader 解析，甚至如果使用 next-babel-loader 解析就會報錯，是以我前面的配置把它添加的 loader 的 include 給清空了，這樣所有的配置就 ok 了。是以我們隻需要它其中的 externals 功能，ok， next.config.js 最終代碼如下( .babelrc 和 postcss.config.js 參照上面不變
如果沒有實作按需加載，最終打包出來的檔案會很大，因為包含了整個antd庫。
需要安裝less，npm i --save less。本以為 next/less 應該有 less 依賴，結果還是需要安裝一下 less，否則 loader 會報錯！
1.頁面切換樣式問題
開發環境頁面 A 切換到 B 後，B 沒有樣式。這個情況是在開發模式下才有。
比如我初次啟動應用之後，通路 A，A 發現沒登入訪 B，這個時候 B 樣式加載不出來，頁面沒樣式。如果我在 B 頁面重新整理一次，讓服務端渲染一次，然後 A 再跳到 B 就有樣式了。我發現在第一次從 A 跳到 B 的時候，有一個類似這樣的一個請求：/_next/static/chunks/styles.js?ts=1557217006063，就是 B 樣式的熱更新檔案。但是實際 _next/static/css/styles.chunk.css 這個檔案裡沒有成功載入 B 的樣式。而當我們用服務端渲染一次 B 頁面，也就是在 B 的路由下重新整理一次。而後的 chunk.css 就有樣式了。
我們再看看生産環境，生産環境，nextjs 會把所有依賴的 css 打包到一個 chunk.css 檔案中，在首次渲染的時候，整個應用的所有樣式都已經被載入了，比如 A 和 B 的樣式都有了。是以在切換頁面的時候，樣式都沒問題。
依照這個情況看來，開發環境下，樣式是被加載到運作時的記憶體中的，一旦有用服務端渲染 A 頁面，A 的樣式就會被添加進服務端記憶體中，再用服務端渲染一次 B 頁面，而後請求 chunk.css 就才會有兩個頁面的樣式。問題在于開發環境下的熱更新沒有起到作用，應該是一個官方的bug。
此 issue 說不是 next 核心的 bug，是三方插件的問題，那麼問題應該在next-css， https://github.com/zeit/next.js/issues/4732 。
有沒有人打賞？沒有的話，那我晚點再來問問。
關注大詩人公衆号，第一時間擷取最新文章。
如果你有購買鋼琴的打算，可以從這裡了解到在售資訊，價格實惠品質保障。
---轉發請标明，并添加原文連結---