跳至內容

自訂伺服器

範例

預設情況下,Next.js 會在使用 next start 時包含其自有的伺服器。如果您有現有的後端,您仍然可以使用 Next.js(這不是自訂伺服器)。自訂 Next.js 伺服器允許您 100% 以程式方式啟動伺服器,以便使用自訂伺服器模式。大多數時候,您不需要這樣做 - 但它可供您完全自訂。

須知:

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

請看以下自訂伺服器的範例

server.js
const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')
 
const dev = process.env.NODE_ENV !== 'production'
const hostname = 'localhost'
const port = 3000
// when using middleware `hostname` and `port` must be provided below
const app = next({ dev, hostname, port })
const handle = app.getRequestHandler()
 
app.prepare().then(() => {
  createServer(async (req, res) => {
    try {
      // Be sure to pass `true` as the second argument to `url.parse`.
      // This tells it to parse the query portion of the URL.
      const parsedUrl = parse(req.url, true)
      const { pathname, query } = parsedUrl
 
      if (pathname === '/a') {
        await app.render(req, res, '/a', query)
      } else if (pathname === '/b') {
        await app.render(req, res, '/b', query)
      } else {
        await handle(req, res, parsedUrl)
      }
    } catch (err) {
      console.error('Error occurred handling', req.url, err)
      res.statusCode = 500
      res.end('internal server error')
    }
  })
    .once('error', (err) => {
      console.error(err)
      process.exit(1)
    })
    .listen(port, () => {
      console.log(`> Ready on http://${hostname}:${port}`)
    })
})

server.js 沒有經過 babel 或 webpack。請確定此檔案所需的語法和來源與您正在執行的目前節點版本相容。

若要執行自訂伺服器,您需要像這樣更新 package.json 中的 scripts

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

自訂伺服器使用以下匯入來將伺服器與 Next.js 應用程式連接

const next = require('next')
const app = next({})

上述的 next 匯入是一個函式,它接收一個包含以下選項的物件

選項類型說明
conf物件您會在 next.config.js 中使用的相同物件。預設為 {}
customServer布林值(選用)當伺服器是由 Next.js 建立時設為 false
dev布林值(選用)是否以開發模式啟動 Next.js。預設為 false
dir字串(選用)Next.js 專案的位置。預設為 '.'
quiet布林值(選用)隱藏包含伺服器資訊的錯誤訊息。預設為 false
hostname字串(選用)伺服器運作於其後的網域名稱
port數字(選用)伺服器運作於其後的埠
httpServernode:http#Server(選用)Next.js 運作於其後的 HTTP 伺服器

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

停用檔案系統路由

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

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

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

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

您可能還希望設定用戶端路由器以禁止用戶端重新導向至檔案名稱路由;有關這部分,請參閱 router.beforePopState