跳到內容

自訂伺服器

Next.js 預設包含自己的伺服器,透過 next start 啟動。如果您有現有的後端,仍然可以搭配 Next.js 使用(這不是自訂伺服器)。自訂 Next.js 伺服器允許您以程式化的方式啟動伺服器以進行自訂模式。大多數時候,您不需要這種方法。但是,如果您需要彈性調整,它仍然可用。

要知道:

  • 在決定使用自訂伺服器之前,請記住,只有在 Next.js 的整合路由器無法滿足您的應用程式需求時才應使用它。自訂伺服器將移除重要的效能最佳化,例如自動靜態最佳化
  • 自訂伺服器無法部署在 Vercel 上。
  • 當使用獨立輸出模式時,它不會追蹤自訂伺服器檔案。此模式會輸出一個獨立的最小 server.js 檔案。這些不能一起使用。

查看以下自訂伺服器範例

server.ts
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://127.0.0.1:${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 (範例)。自訂伺服器使用以下 import 將伺服器與 Next.js 應用程式連接

import next from 'next'
 
const app = next({})

上面的 next import 是一個函式,它接收具有以下選項的物件

選項類型描述
conf物件您將在 next.config.js 中使用的相同物件。預設為 {}
dev布林值選用)是否在開發模式下啟動 Next.js。預設為 false
dir字串選用)Next.js 專案的位置。預設為 '.'
quiet布林值選用)隱藏包含伺服器資訊的錯誤訊息。預設為 false
hostname字串選用)伺服器在其後方運行的主機名稱
port數字選用)伺服器在其後方運行的連接埠
httpServernode:http#Server選用)Next.js 在其後方運行的 HTTP 伺服器
turbo布林值選用)啟用 Turbopack

然後可以使用傳回的 app,讓 Next.js 根據需要處理請求。

停用檔案系統路由

預設情況下,Next 將在與檔案名稱相符的路徑名稱下,提供 pages 資料夾中的每個檔案。如果您的專案使用自訂伺服器,此行為可能會導致從多個路徑提供相同的內容,這可能會導致 SEO 和 UX 問題。

若要停用此行為並防止根據 pages 中的檔案進行路由,請開啟 next.config.js 並停用 useFileSystemPublicRoutes 設定

next.config.js
module.exports = {
  useFileSystemPublicRoutes: false,
}

請注意,useFileSystemPublicRoutes 會停用來自 SSR 的檔案名稱路由;客戶端路由仍然可以存取這些路徑。使用此選項時,您應該防止導航到您不希望以程式方式導航的路徑。

您可能也希望設定客戶端路由器以禁止客戶端重新導向到檔案名稱路由;為此,請參閱 router.beforePopState