Next.js是一个新的通用JavaScript框架，它为基于React和服务器的Web应用提供了一个新的可选方案。
Next.js目前已经开源，https://zeit.co/blog/next
在上一节课中，我们学习了如何为我们的应用创建干净的url，基本上，我们可以有这样的url:
http://localhost:3000/p/my-blog-post
但它只与客户端导航一起工作。当我们重新加载页面时，它会给我们一个404页面。这是因为在页面目录中没有实际的页面，即p/my-blog-post。
Paste_Image.png
我们通过Next.js自定义服务器API可以很容易地解决这个问题。
我们来看看怎么做。
首先，我们需要一个简单的Next.js应用程序。试着下载下面的示例应用程序:
git clone https://github.com/arunoda/learnnextjs-demo.git
cd learnnextjs-demo
git checkout clean-urls
你可以执行以下命令：
git clone https://github.com/arunoda/learnnextjs-demo.git
cd learnnextjs-demo
git checkout clean-urls
现在，您可以通过导航到 http://localhost:3000 来访问该应用程序。
创建一个自定义的服务器
在我们将使用Express为我们的应用创建一个自定义服务器。这很简单。
首先，在你的应用中加入Express:
npm install --save express
然后创建一个名为 server.js 的文件在你的应用中，然后添加以下内容:
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)
})
现在将您的npm dev 脚本更新为:
"scripts": {
"dev": "node server.js"
}
现在，尝试再次使用npm运行dev再次运行你的应用程序。
你会得到什么样的体验?
创建自定义路由
正如您所经历的那样，该应用程序将与以前一样工作，因为我们编写的自定义服务器类似于“Next”二进制命令。
现在，我们将添加一个自定义路由，以匹配我们的博客文章url。
使用新的路由，我们的 server.js 会是这样的:
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('/p/:id', (req, res) => {
const actualPage = '/post'
const queryParams = { title: req.params.id }
app.render(req, res, actualPage, queryParams)
})
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)
})
看看下面的代码:
server.get('/p/:id', (req, res) => {
const actualPage = '/post'
const queryParams = { title: req.params.id }
app.render(req, res, actualPage, queryParams)
})
在这里，我们只是将一个自定义路由映射到我们现有的页面“/post”。我们还映射了查询params。
所以,就是这样。
现在，重新启动你的应用程序并访问以下页面:
http://localhost:3000/p/hello-nextjs
现在你不会看到 404 页面而是实际的页面。
但有一个小问题。你能确定吗?
URL的信息
我们的 /post 页面通过查询字符串参数 title 接受到了 title。在客户端路由中，我们可以很容易地用URL掩码来给它一个正确的值。
(通过链接中的属性)。
<Link as={`/p/${props.id}`} href={`/post?title=${props.title}`}>
<a>{props.title}</a>
</Link>
但是在服务器路由中，我们没有这个标题，因为我们只有一个ID在URL中。因此，在这种情况下，我们将ID设置为服务器端查询字符串param。
您可以在以下路由定义中看到它:
server.get('/p/:id', (req, res) => {
const actualPage = '/post'
const queryParams = { title: req.params.id }
app.render(req, res, actualPage, queryParams)
})
是一个问题。但在现实世界中，这并不是什么大问题，因为我们将使用ID从客户端和服务器端获取数据服务器的数据。
所以，我们只需要一个ID。
最后
这里我们只是简单使用了Next.js的自定义服务器API创建了路由。通过这一点，我们为干净的url添加了服务器端的支持。就像这样，您可以创建任意多的路由。
你不局限于使用Express。您可以使用任何 Node.js 服务器框架。你也可以看看Next.js用于定制服务器API的文档 https://github.com/zeit/next.js#custom-server-and-routing。
文本翻译自：https://learnnextjs.com/basics/server-side-support-for-clean-urls
网友评论