问题描述：
在使用 Next.js 开发时，有时候刷新页面之后出现 404 的错误页面。这是因为 Next.js 的默认开发服务器是服务端渲染(SSR)，而在有些情况下，部分路由地址只存在客户端，服务端并不存在，导致刷新之后出现 404 的错误页面。
解决方案：
解决这个问题的方法很简单，我们只需要在 Next.js 中使用自定义服务器，使用 Express 或 Koa 等常用 Node.js 服务器框架实现客户端与服务器端渲染导航即可。这样我们可以在客户端访问的页面也可以通过服务端渲染的方式访问。
1. 创建自定义服务器(app.js)
在 Next.js 环境下，我们需要创建一个自定义的服务器，可以使用 Express 或 Koa 框架来创建。下面是使用 Express 框架创建的例子。
// javascriptcn.com 代码示例
const express = require('express')
const next = require('next')
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
app
.prepare()
.then(() => {
const server = express()
server.get('*', (req, res) => {
return handle(req, res)
})
server.listen(3000, err => {
if (err) throw err
console.log('> Ready on http://localhost:3000')
})
})
.catch(ex => {
console.error(ex.stack)
process.exit(1)
})2. 在 package.json 中添加 dev 命令
在 Next.js 应用程序的 package.json 文件中，我们需要添加一个 dev 命令，用于启动我们的自定义服务器。下面是 package.json 文件的一个示例：
{
"scripts": {
"dev": "node server.js"
}
}3. 运行自定义服务器
在终端中输入以下命令启动自定义服务器。
npm run dev
4. 部署到生产环境
在将应用部署到生产环境时，我们需要使用 PM2 进行进程管理，以保证应用的稳定运行。下面是一个使用 PM2 部署的例子：
首先全局安装 pm2：
npm install pm2 -g
然后在项目目录下运行：
pm2 start server.js --max-memory-restart 200M --watch
以上命令指定了最大内存使用量为 200MB，并启动了内部的监控系统以保证应用的稳定运行。
总结
在 Next.js 开发中，我们可以使用自定义服务器来解决页面刷新后出现 404 错误的问题。使用 Express 或 Koa 等常用 Node.js 服务器框架实现客户端与服务器端渲染导航即可。通过以上方法，我们可以更好地控制页面的路由和 SEO，也可以大幅提升网站的性能和用户体验。
示例代码
- 自定义服务器(app.js)
// javascriptcn.com 代码示例
const express = require('express')
const next = require('next')
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
app
.prepare()
.then(() => {
const server = express()
server.get('*', (req, res) => {
return handle(req, res)
})
server.listen(3000, err => {
if (err) throw err
console.log('> Ready on http://localhost:3000')
})
})
.catch(ex => {
console.error(ex.stack)
process.exit(1)
})- package.json
// javascriptcn.com 代码示例
{
"name": "next-demo",
"version": "0.1.0",
"scripts": {
"dev": "node server.js"
},
"dependencies": {
"next": "^11.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"express": "^4.17.1",
"pm2": "^4.5.5"
}
}来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65448d687d4982a6ebe660cd