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

Next.js 預設包含自己的伺服器，透過 next start 啟動。如果你有現有的後端，仍然可以將其與 Next.js 一起使用（這不是自定義伺服器）。自定義 Next.js 伺服器允許你透過程式設計方式啟動伺服器以實現自定義模式。大多數情況下，你不需要這種方法。但是，如果你需要“彈出”（eject），它仍然可用。

須知:

• 在決定使用自定義伺服器之前，請記住，只有當 Next.js 的整合路由器無法滿足你的應用程式需求時，才應該使用它。自定義伺服器會移除重要的效能最佳化，例如自動靜態最佳化。
• 當使用獨立輸出模式時，它不會跟蹤自定義伺服器檔案。這種模式會輸出一個單獨的最小 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 https://:${port} as ${
      dev ? 'development' : process.env.NODE_ENV
    }`
  )
})

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

要執行自定義伺服器，你需要更新 package.json 中的 scripts，如下所示

{
  "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 匯入是一個函式，它接收一個包含以下選項的物件

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

停用檔案系統路由

預設情況下，Next 會將 pages 資料夾中的每個檔案作為與其檔名匹配的路徑名提供。如果你的專案使用自定義伺服器，這種行為可能導致相同的內容從多個路徑提供，這可能會給 SEO 和使用者體驗帶來問題。

要停用此行為並防止基於 pages 中的檔案進行路由，請開啟 next.config.js 並停用 useFileSystemPublicRoutes 配置

module.exports = {
  useFileSystemPublicRoutes: false,
}

請注意，useFileSystemPublicRoutes 會停用 SSR 的檔名路由；客戶端路由可能仍會訪問這些路徑。使用此選項時，你應該防止導航到你不希望透過程式設計方式訪問的路由。

你可能還希望配置客戶端路由器以禁止客戶端重定向到檔名路由；為此，請參閱 router.beforePopState。