自訂伺服器
Next.js 預設包含自己的伺服器,透過 next start
啟動。如果您有現有的後端,仍然可以搭配 Next.js 使用(這不是自訂伺服器)。自訂 Next.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 | 數字 | (選用)伺服器在其後方運行的連接埠 |
httpServer | node: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
。
這有幫助嗎?