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

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

• 因為業(yè)務需要分成多個項目（或者域名）
• 并且每個項目只有2-3個頁面
• 沒有SEO的需求
• 你只會next這個框架（總不能讓我用原生html手擼吧，那樣會被同事笑話的）

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

打包靜態(tài)文件

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

我這邊是直接在本地打包的，打包之前需要先安裝個依賴，因為是打包到正式環(huán)境的，你總不能在本地用本地的環(huán)境變量去打包吧？

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

npm install dotenv-cli --save-dev

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

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 重點是這里
  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"
  }
}

配置好了直接在本地運行就打包好了：

npm run package

nginx配置微調(diào)

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

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

比如：

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

所以線上訪問得用xxx.com/success.html才能訪問到對的頁面。

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

所以這個問題是用nginx來解決，大概像下面這樣寫：

server {
    listen 80;
    server_name xxx.com;

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

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

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

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

最新評論