官网《Next.js —— 服务端对“整洁”路由的支持》

在前面一节中,我们学习了如何为我们的应用创建一个“整洁”的URLs,基本上我们可以得到如‘http://localhost:3000/p/my-blog-post’这样的url。

但是,这只能在我们的客户端运行。当我们重新加载这个页面时,它会返回一个404页面。这是因为实际上根本没有一个叫“p/my-blog-post”的页面目录。

运用Next.js cunstom server API 我们可以相当容易的解决这个问题,让我们看看如何做到。

首先,我们需要一个简单的Next.js事例去演示。下载如下事例的应用:

git clone https://github.com/zeit/next-learn-demo.git
cd next-learn-demo
cd 5-clean-urls-ssr

然后运行它:

npm install
npm run dev

然后就可以通过http://localhost:3000来访问这个应用

创建客户端服务

现在我们要用Express来为应用创建一个客户端的服务,这相当简单。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Next.js 中,你可以使用自定义的服务中间件来扩展默认的服务行为。中间件是一个函数,它可以在处理请求之前或之后执行一些操作。例如,你可以使用中间件来记录请求日志、验证用户身份、或者添加 CORS 头等。 为了创建一个自定义服务中间件,你需要在你的 Next.js 项目根目录创建一个 `server.js` 文件。在这个文件中,你需要导入 `next` 和 `http` 模块,然后使用 `next` 模块的 `createServer` 方法创建一个 HTTP 服务器。接着,你可以使用 `http` 模块的 `createServer` 方法创建一个 HTTP 服务器,并将 `next` 模块返回的处理函数作为回调函数传递给它。 在 `createServer` 方法中,你可以使用 `use` 方法来添加中间件。`use` 方法接受一个函数作为参数,这个函数会在处理请求之前或之后执行。例如,以下代码演示了如何添加一个简单的日志中间件: ```js const next = require('next') const http = require('http') const app = next({ dev: process.env.NODE_ENV !== 'production' }) const handle = app.getRequestHandler() app.prepare().then(() => { http.createServer((req, res) => { console.log(`[${new Date().toISOString()}] ${req.method} ${req.url}`) handle(req, res) }).listen(3000, (err) => { if (err) throw err console.log('> Ready on http://localhost:3000') }) }) ``` 在这个例子中,我们使用 `console.log` 方法记录了每个请求的方法和 URL。当请求到达时,日志信息会输出到控制台。然后我们调用 `handle` 方法来处理请求,并将结果发送回客户。 除了记录日志外,你还可以使用中间件来执行其他操作。例如,以下代码演示了如何添加一个简单的身份验证中间件: ```js const next = require('next') const http = require('http') const app = next({ dev: process.env.NODE_ENV !== 'production' }) const handle = app.getRequestHandler() function authenticate(req, res, next) { // 检查用户是否已经登录 if (!req.session.user) { // 如果用户未登录,重定向到登录页面 res.writeHead(302, { Location: '/login' }) res.end() } else { // 如果用户已经登录,继续处理请求 next() } } app.prepare().then(() => { http.createServer((req, res) => { // 在处理请求之前执行身份验证中间件 authenticate(req, res, () => { // 如果身份验证通过,继续处理请求 handle(req, res) }) }).listen(3000, (err) => { if (err) throw err console.log('> Ready on http://localhost:3000') }) }) ``` 在这个例子中,我们定义了一个名为 `authenticate` 的中间件函数。它检查用户是否已经登录。如果用户未登录,它会重定向到登录页面。否则,它会调用 `next` 方法继续处理请求。 在 `createServer` 中,我们将 `authenticate` 函数作为第一个参数传递给 `use` 方法。这意味着它会在处理请求之前执行。如果身份验证通过,我们将 `handle` 方法作为回调函数传递给 `authenticate` 函数的第三个参数。这意味着它会在身份验证通过后执行。 总之,使用自定义服务中间件可以方便地扩展 Next.js服务行为。你可以使用中间件来执行各种操作,例如记录请求日志、验证用户身份、添加 CORS 头等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值