自訂伺服器
預設情況下,Next.js 會在使用 next start
時包含其自有的伺服器。如果您有現有的後端,您仍然可以使用 Next.js(這不是自訂伺服器)。自訂 Next.js 伺服器允許您 100% 以程式方式啟動伺服器,以便使用自訂伺服器模式。大多數時候,您不需要這樣做 - 但它可供您完全自訂。
須知:
請看以下自訂伺服器的範例
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 | 數字 | (選用)伺服器運作於其後的埠 |
httpServer | node: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
。
這有幫助嗎?