React服務器端渲染框架next.js項目實戰及部署上下文context問題解決辦法

在前段時間折騰過搭建react服務器端項目架構，點擊這裏瞭解下，正好最近有個重構PC網站的需求，考慮SEO等因素。在作技術選型的時候決定採用nextjs。項目開發過程當中，nextjs的體驗很是棒，我的以爲比create-react-app開發體驗還要好，特別是HMR功能，雖然都有這個功能，可是nextjs作的更好一些。CRA裏面修改了代碼，格式化了文檔，會致使整個頁面刷新，這對於SPA項目的開發體驗就很很差了。我在使用nextjs的開發過程當中，若是不是本身主動去刷新瀏覽器，幾乎就沒有刷新過整個頁面，全部的修改都是在不刷新頁面的前提下就反映到了頁面上，這個體驗真的很棒。

入門體驗

nextjs的文檔我的以爲寫的不算特別詳細，好在github的examples目錄下有不少示例能夠參考，好比我沒有使用now來作部署，而是使用了express。很容易就找到參考的示例。開發過程編譯，打包等速度都很快，開發體驗一直很是愉悅。

 

項目中的幾個設置

1. 裏面用的三個依賴的左右：

① nextjs配置多個插件時使用next-compose-plugins很容易解決，要否則，寫起會有點麻煩

② 把圖片當成模塊同樣引入須要使用next-images

③ 樣式支持less須要next-less

 

2. BuildId我這裏就直接固定一個，若是之後開發新版改爲v2（或其也行）

3. 打包目錄distDir修改成build（默認爲.next)

部署時遇到的問題

1. 設置context來訪問的問題

部署時，我須要配置一個context，由於一個域名下有多個項目。本地開放時都是根路徑，沒啥問題，可是如今須要設置一個context（訪問格式：域名/context）。修改入口文件app.js（或者server.js，項目經過node app.js來啓動），在獲得以下結果以前，我仍是折騰了1天多，最終經過查看一些源碼，多方調試才成功。

 

修改下next.config.js

 

2. windows下開發部署到linux上的路徑中的’\\’問題

兩個辦法一個是手動替換pages-manifest.json文件裏面全部路徑下的’\\’,替換爲’/’

另一個辦法：（推薦）

在linux上面去打包，這樣一勞永逸，最省事。因此開發環境仍是mac好啊

小結

推薦使用nextjs來作基於React的服務器端渲染，雖然我的造輪子也重要，可是實際開發使用一個開源的，受歡迎的框架來提升開發效率，下降風險更明智。

做者： 張雪飛
出處： https://zhangxuefei.site/p/2195 版權說明：歡迎轉載，但必須註明出處，並在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。