Next.js作為一個(gè)服務(wù)端渲染的常用框架，是很少有人用來(lái)弄成靜態(tài)文件部署的。

這實(shí)在遇到一些極端情況了。如果你也和我一樣滿足以下條件，可以考慮下：

• 因?yàn)闃I(yè)務(wù)需要分成多個(gè)項(xiàng)目（或者域名）
• 并且每個(gè)項(xiàng)目只有2-3個(gè)頁(yè)面
• 沒有SEO的需求
• 你只會(huì)next這個(gè)框架（總不能讓我用原生html手?jǐn)]吧，那樣會(huì)被同事笑話的）

是的，如果沒有做SEO的需求的話，那么Next的SSR服務(wù)端渲染就成了雞肋了。用pm2去起個(gè)服務(wù)還占內(nèi)存，小一點(diǎn)的服務(wù)器放幾個(gè)這樣的服務(wù)就滿了，數(shù)量多的話真就比不過(guò)靜態(tài)文件部署了。

打包靜態(tài)文件

其實(shí)就是類似Vue那樣打包成一個(gè)dist包了，包里有index.html這些靜態(tài)文件可以直接訪問(wèn)。

我這邊是直接在本地打包的，打包之前需要先安裝個(gè)依賴，因?yàn)槭谴虬秸江h(huán)境的，你總不能在本地用本地的環(huán)境變量去打包吧？

這個(gè)依賴是用來(lái)指定打包的環(huán)境變量的，如果沒有用.env文件去控制環(huán)境變量，可以不用安裝這個(gè)依賴：

npm install dotenv-cli --save-dev

下面需要修改打包相關(guān)的配置文件，先是next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 重點(diǎn)是這里
  output: 'export'
};

module.exports = nextConfig;

接著是package.json，scripts加多一行package的命令:

{
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "eslint . --ext .ts,.tsx -c .eslintrc.json --fix",
    "package": "npx dotenv-cli -e.env.production --  next build && rimraf dist && move out dist"
  }
}

配置好了直接在本地運(yùn)行就打包好了：

npm run package

nginx配置微調(diào)

dist包放上去文件夾部署這部分不說(shuō)了，nginx的配置需要微調(diào)下。

因?yàn)閚ext本來(lái)是用來(lái)做服務(wù)端渲染的，突然被打包成靜態(tài)文件夾，文件夾下可以看到頁(yè)面都是.html結(jié)尾的，所以一旦線上指定了路徑訪問(wèn)沒加.html后綴就會(huì)出現(xiàn)訪問(wèn)不到的尷尬情況。

比如：

平時(shí)開發(fā)在本地 localhost:3000/success 訪問(wèn)頁(yè)面，正常服務(wù)端渲染部署也是 xxx.com/success，但是打包出來(lái)的dist包success變成了success.html。

所以線上訪問(wèn)得用xxx.com/success.html才能訪問(wèn)到對(duì)的頁(yè)面。

如果軟件里寫的跳轉(zhuǎn)頁(yè)面url是/success，線上就訪問(wèn)不到了，這樣本地開發(fā)和線上訪問(wèn)就會(huì)有割裂感了。

所以這個(gè)問(wèn)題是用nginx來(lái)解決，大概像下面這樣寫：

server {
    listen 80;
    server_name xxx.com;

    location / {
        root /path/to/your/dist;
        index index.html;
        # 訪問(wèn)沒有html后綴的頁(yè)面時(shí)加上.html文件
        try_files $uri $uri.html $uri/ =404;
    }
}

這種寫法會(huì)自動(dòng)帶上參數(shù)，可以放心嘗試。

到這里基本就成功部署了。

到此這篇關(guān)于Next.js靜態(tài)文件部署的實(shí)現(xiàn)步驟的文章就介紹到這了,更多相關(guān)Next.js靜態(tài)文件部署內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論