Skip to main content

[Next.js] 環境設定

next.config.js​

根目錄路徑alias​

Nuxt預設好像沒有根目錄的路徑寫法（？），所以要自己在 nuxt.config.js加入以下設定，設定好之後就可以用@符號來代表根目錄：

import Button from '@/components/Button.js'

const path = require("path");
module.exports = {
  webpack: (config) => {
    config.resolve.alias["@"] = path.resolve(__dirname);
    return config;
  },
}

https://blog.csdn.net/weixin_40532650/article/details/113119266

環境變數​

  • 基本設定方式：

第一種做法是建立 .env檔，第二種是在 next.config.js裡加入

module.exports = {
  env: {
    customKey: 'my-value',
  },
}
  • 依環境設定方式：

做法和 nuxt.js差不多，node.js 預設三種開發環境 development, test, production，分別對應以下三種檔名，建在根目錄下：

.env.production

.env.development

.env.test

取用環境變數寫法 process.env.[變數名稱]

環境變數預設只能在 node.js環境中執行，如果要在瀏覽器端上能夠取得的話，變數名稱必須要有前綴 NEXT_PUBLIC_

  • 自訂環境名稱

next.js 似乎是無法自訂 node.js預設的開發環境以外的名稱，否則會出現以下錯誤：

https://nextjs.org/docs/messages/non-standard-node-env

目前看起來比較好的解法是在 package.json的 script指令中代入變數，然後在 next.config.js裡依變數的名稱切換所需要的變數

比如 script指令如下：

APP_ENV=staging npm run build

然後在 config就可以使用 process.env.APP_ENV取到 staging，再依此取得 .env檔中的變數