如何在 Next.js 中設定自訂伺服器

Next.js 預設包含自己的伺服器，透過 next start 啟動。如果您已有現有的後端服務，仍然可以與 Next.js 一起使用（這不屬於自訂伺服器）。自訂 Next.js 伺服器允許您以程式化方式啟動伺服器來實現自訂模式。大多數情況下您不需要此方式，但在需要時仍可使用。

須知事項：

在決定使用自訂伺服器前，請注意僅應在 Next.js 內建路由器無法滿足應用需求時才使用。自訂伺服器會移除重要的效能優化，例如 自動靜態優化 (Automatic Static Optimization)。

使用獨立輸出模式時，不會追蹤自訂伺服器檔案。此模式會輸出一個獨立的精簡版 server.js 檔案，因此兩者無法同時使用。

請參考以下自訂伺服器的範例：

import { createServer } from 'http'
import { parse } from 'url'
import next from 'next'

const port = parseInt(process.env.PORT || '3000', 10)
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url!, true)
    handle(req, res, parsedUrl)
  }).listen(port)

  console.log(
    `> Server listening at http://localhost:${port} as ${
      dev ? 'development' : process.env.NODE_ENV
    }`
  )
})

server.js 不會經過 Next.js 編譯器或打包流程。請確保此檔案所需的語法和原始碼與您當前使用的 Node.js 版本相容。查看範例。

要執行自訂伺服器，您需要更新 package.json 中的 scripts 如下：

package.json

{
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  }
}

或者，您可以設定 nodemon (範例)。自訂伺服器使用以下導入方式將伺服器與 Next.js 應用程式連接：

import next from 'next'

const app = next({})

上述的 next 導入是一個函式，接收包含以下選項的物件：

選項	類型	說明
`conf`	`Object`	與 `next.config.js` 中使用的相同物件。預設為 `{}`
`dev`	`Boolean`	(選填) 是否以開發模式啟動 Next.js。預設為 `false`
`dir`	`String`	(選填) Next.js 專案位置。預設為 `'.'`
`quiet`	`Boolean`	(選填) 隱藏包含伺服器資訊的錯誤訊息。預設為 `false`
`hostname`	`String`	(選填) 伺服器運行的主機名稱
`port`	`Number`	(選填) 伺服器運行的連接埠
`httpServer`	`node:http#Server`	(選填) Next.js 運行的 HTTP 伺服器
`turbo`	`Boolean`	(選填) 啟用 Turbopack

返回的 app 可用於根據需求讓 Next.js 處理請求。

如何在 Next.js 中設定自訂伺服器

On this page