next.config.js
Next.js 可以透過專案根目錄（例如，與 package.json 同層）中的 next.config.js 檔案進行設定，並預設匯出。
next.config.js
// @ts-check
/** @type {import('next').NextConfig} */
const nextConfig = {
/* config options here */
}
module.exports = nextConfigECMAScript 模組
next.config.js 是一個普通的 Node.js 模組，而不是 JSON 檔案。它會被 Next.js 伺服器和建置階段使用，並且不會包含在瀏覽器建置中。
如果您需要 ECMAScript 模組，您可以使用 next.config.mjs
next.config.mjs
// @ts-check
/**
* @type {import('next').NextConfig}
*/
const nextConfig = {
/* config options here */
}
export default nextConfig小知識：目前不支援使用
.cjs、.cts或.mts副檔名的next.config。
將設定作為函式
您也可以使用函式
next.config.mjs
// @ts-check
export default (phase, { defaultConfig }) => {
/**
* @type {import('next').NextConfig}
*/
const nextConfig = {
/* config options here */
}
return nextConfig
}非同步設定
自 Next.js 12.1.0 起，您可以使用非同步函式
next.config.js
// @ts-check
module.exports = async (phase, { defaultConfig }) => {
/**
* @type {import('next').NextConfig}
*/
const nextConfig = {
/* config options here */
}
return nextConfig
}階段
phase 是載入設定時的目前情境。您可以查看可用的階段。階段可以從 next/constants 匯入
next.config.js
// @ts-check
const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')
module.exports = (phase, { defaultConfig }) => {
if (phase === PHASE_DEVELOPMENT_SERVER) {
return {
/* development only config options here */
}
}
return {
/* config options for all phases except development here */
}
}TypeScript
如果您在專案中使用 TypeScript，則可以使用 next.config.ts 在設定中使用 TypeScript
next.config.ts
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
/* config options here */
}
export default nextConfig註解的行是您可以放置 next.config.js 允許的設定的地方，這些設定在此檔案中定義。
但是，這些設定都不是必要的，而且沒有必要了解每個設定的作用。相反地，請在本節中搜尋您需要啟用或修改的功能，它們會向您展示該怎麼做。
避免使用目標 Node.js 版本中不可用的新 JavaScript 功能。
next.config.js不會被 Webpack 或 Babel 解析。
此頁面記錄了所有可用的設定選項
單元測試 (實驗性功能)
從 Next.js 15.1 開始，next/experimental/testing/server 套件包含實用工具，可協助單元測試 next.config.js 檔案。
unstable_getResponseFromNextConfig 函式使用提供的請求資訊，從 next.config.js 執行 headers、redirects 和 rewrites 函式，並傳回包含路由結果的 NextResponse。
來自
unstable_getResponseFromNextConfig的回應僅考慮next.config.js欄位，而不考慮中介軟體或檔案系統路由，因此生產環境中的結果可能與單元測試不同。
import {
getRedirectUrl,
unstable_getResponseFromNextConfig,
} from 'next/experimental/testing/server'
const response = await unstable_getResponseFromNextConfig({
url: 'https://nextjs.dev.org.tw/test',
nextConfig: {
async redirects() {
return [{ source: '/test', destination: '/test2', permanent: false }]
},
},
})
expect(response.status).toEqual(307)
expect(getRedirectUrl(response)).toEqual('https://nextjs.dev.org.tw/test2')appDir
啟用 App Router 以使用版面配置、串流等功能。
assetPrefix
了解如何使用 assetPrefix 設定選項來設定您的 CDN。
authInterrupts
了解如何啟用實驗性的 `authInterrupts` 設定選項以使用 `forbidden` 和 `unauthorized`。
basePath
使用 `basePath` 在網域的子路徑下部署 Next.js 應用程式。
cacheLife
了解如何在 Next.js 中設定 cacheLife 設定。
compress
Next.js 提供 gzip 壓縮來壓縮渲染內容和靜態檔案，它僅適用於伺服器目標。在此處了解更多資訊。
crossOrigin
使用 `crossOrigin` 選項在 `next/script` 產生的 `script` 標籤上新增 crossOrigin 標籤。
cssChunking
使用 `cssChunking` 選項來控制 CSS 檔案在您的 Next.js 應用程式中如何分塊。
devIndicators
螢幕上指示器的設定選項，可在開發期間提供您目前檢視路由的相關資訊。
distDir
設定要使用的自訂建置目錄，而不是預設的 .next 目錄。
dynamicIO
了解如何在 Next.js 中啟用 dynamicIO 旗標。
env
了解如何在建置時期在您的 Next.js 應用程式中新增和存取環境變數。
eslint
Next.js 預設會在建置期間報告 ESLint 錯誤和警告。在此處了解如何選擇退出此行為。
expireTime
自訂啟用 ISR 頁面的過時重新驗證到期時間。
exportPathMap
自訂在使用 `next export` 時將匯出為 HTML 檔案的頁面。
generateBuildId
設定組建 ID，用於識別目前正在提供應用程式的組建。
generateEtags
Next.js 預設會為每個頁面產生 etag。在此處了解有關如何停用 etag 產生的更多資訊。
headers
將自訂 HTTP 標頭新增至您的 Next.js 應用程式。
httpAgentOptions
Next.js 預設會自動使用 HTTP Keep-Alive。在此處了解有關如何停用 HTTP Keep-Alive 的更多資訊。
images
next/image 載入器的自訂設定
cacheHandler
設定用於儲存和重新驗證資料的 Next.js 快取，以使用任何外部服務，例如 Redis、Memcached 或其他服務。
inlineCss
啟用內嵌 CSS 支援。
logging
設定在開發模式下執行 Next.js 時，如何將資料抓取記錄到主控台。
mdxRs
使用新的 Rust 編譯器在 App Router 中編譯 MDX 檔案。
onDemandEntries
設定 Next.js 將如何處置和保留在記憶體中開發時建立的頁面。
optimizePackageImports
optimizePackageImports Next.js 設定選項的 API 參考
output
Next.js 自動追蹤每個頁面所需的檔案，以便輕鬆部署您的應用程式。在此處了解其運作方式。
pageExtensions
擴充 Next.js 在 Pages Router 中解析頁面時使用的預設頁面副檔名。
poweredByHeader
Next.js 預設會新增 `x-powered-by` 標頭。在此處了解如何選擇退出。
ppr
了解如何在 Next.js 中啟用部分預先渲染。
productionBrowserSourceMaps
在生產環境建置期間啟用瀏覽器原始碼地圖產生。
reactCompiler
啟用 React 編譯器以自動最佳化元件渲染。
reactMaxHeadersLength
React 發出並新增至回應的標頭最大長度。
reactStrictMode
完整的 Next.js 執行階段現在符合 Strict Mode 標準，了解如何選擇加入
redirects
將重新導向新增至您的 Next.js 應用程式。
rewrites
將重寫新增至您的 Next.js 應用程式。
sassOptions
設定 Sass 選項。
serverActions
設定 Next.js 應用程式中的伺服器行為。
serverComponentsHmrCache
設定伺服器元件中的抓取回應是否在 HMR 重新整理請求之間快取。
serverExternalPackages
從伺服器元件捆綁中選擇退出特定依賴項，並使用原生 Node.js `require`。
staleTimes
了解如何覆寫用戶端路由器快取的失效時間。
staticGeneration*
了解如何在您的 Next.js 應用程式中設定靜態產生。
trailingSlash
設定 Next.js 頁面以解析帶有或不帶有尾部斜線的路徑。
transpilePackages
自動轉譯和捆綁來自本機套件（如 monorepos）或來自外部依賴項 (`node_modules`) 的依賴項。
turbo
使用 Turbopack 特定選項設定 Next.js
typedRoutes
啟用對靜態類型連結的實驗性支援。
typescript
Next.js 預設會報告 TypeScript 錯誤。在此處了解如何選擇退出此行為。
urlImports
設定 Next.js 以允許從外部 URL 匯入模組。
useCache
了解如何在 Next.js 中啟用 useCache 旗標。
useLightningcss
啟用對 Lightning CSS 的實驗性支援。
webpack
了解如何自訂 Next.js 使用的 webpack 設定
webVitalsAttribution
了解如何使用 webVitalsAttribution 選項來精確找出 Web Vitals 問題的來源。
這個有幫助嗎？