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.jsonscript指令中代入變數,然後在 next.config.js裡依變數的名稱切換所需要的變數

比如 script指令如下:

APP_ENV=staging npm run build

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