Nextjs12配置“伪静态”

伪静态

伪静态又名URL重写，是动态的网址看起来像静态的网址。换句话说就是，动态网页通过重写 URL 方法实现去掉动态网页的参数，但在实际的网页目录中并没有必要实现存在重写的页面。通常我们为了增强搜索引擎的友好面，都将文章内容生成静态页面，但是有的朋友为了实时的显示一些信息。或者还想运用动态脚本解决一些问题。不能用静态的方式来展示网站内容。但是这就损失了对搜索引擎的友好面。怎么样在两者之间找个中间方法呢，这就产生了伪静态技术。伪静态技术是指展示出来的是以html一类的静态页面形式，但其实是用PHP一类的动态脚本来处理的。

Web服务器

传统的Web服务器有IIS、apache、ningx等，他们均通过配置伪静态实现URL重写的目的，

现在，使用Nodejs中的核心模块http的API，就可以轻松创建也可以非常轻松的构建一个Web服务器了，并且运用其中的路由功能即可轻松实现URL重写的目的。

实现URL重写

众所周知，Nextjs 框架底层 HTTP 平台默认是基于 nodejs 实现的，因此可以通过自定义服务配置路由来重写URL，或者直接使用Nexjs封装好的重写方法(rewrites)来实现URL重写。

自定义服务

更新了 package.json 中的脚本。

{
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  }
}

在根目录创建server.js文件

const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')

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)
    const { pathname, query } = parsedUrl

    //下面这个例子使 /a.html 路由解析为./pages/b，以及/b.html 路由解析为./pages/a;
    if (pathname === '/a.html') {
      app.render(req, res, '/b', query)
    } else if (pathname === '/b.html') {
      app.render(req, res, '/a', query)
    } else {
      handle(req, res, parsedUrl)
    }
  }).listen(3000, err => {
    if (err) throw err
    console.log('> Ready on http://localhost:3000')
  })
})

自定义服务官方文档

配置rewrites路由分发

在next.config.js配置rewrites。rewrites官方文档

module.exports = {  
  ...
  async rewrites() {  
     return [  
         {  
               source: '/a.html',  
               destination: '/b',  
          },  
          {  
                source: '/b.html',  
                destination: '/a',  
           },     
     ]
  }
}

总结

上述方法均针对动态页面进行url重写，我们也可以利用nextjs的实现静态 HTML 导出（nextjs官方文档），或者直接创建a.html.js的文件，nextjs的路由即可自动识别路径为a.html。

文章来源：Nextjs12配置“伪静态” | 猿小莫的博客