关于ssr:React-ssr框架Nextjs-的生产实践

首先感叹一句，next 真是一个版本狂人啊，一周就一个下版本

默认初始化的框架款式反对 sass，组件级别的[name].module.css，但默认不反对 less，官网提供了配置 less 的办法

`yarn add @zeit/next-less less`
// next.config.js
const withLess = require('@zeit/next-less')
module.exports = withLess({webpack(config, options) {
      config.resolve = {
          alias: {
            ...config.resolve.alias,
            // 配置 alias 同时要在 tsconfig.json 配置 baseUrl，paths
            "@": path.resolve(__dirname, ".") 
          },
          extensions: [".ts", ".tsx", ".js", ".jsx", ".less", ".css"]
    };
    return config
  }
})

重新启动后会报 Error: Cannot find module 'webpack' 于是就装置 webpack 但默认装置的是 webpack@5.x，依照这个 issue，要替换成 webpack@4.x 才能够

Next.js 打包后动态资源门路中的 _next 目录哪来的？
参考此文
打包配置配置assetPrefix，相当于 webpack 外面的publicPath（将动态资源放在 cdn）
但打包后 html 引入的动态资源地址会多一层_next 目录，解决方案：
本人代码里创立 _next 目录太过繁琐，且耗费性能，故让运维在拷贝动态资源时，在 oss 目录上多加一层 _next 目录
ssr 框架 ajax 申请库的抉择 node-fetch、window, document 的应用注意事项
getInitialProps getStaticProps getStaticPaths getServerSideProps 的区别
clint Link 跳转时子页面款式文件获取不到（如同只有开发阶段有次问题，临时未解决）
当进行重构我的项目时，如果不想扭转老我的项目的 url（可能因为 url 曾经被百度 seo 收录），能够利用自定义 node 服务器，将老 url 转发到新的 url，参考文档，然而有个问题这种被转发的 url 为什么浏览器申请会是 404，但页面还是会失常显示，不晓得是为什么？？？

接入公司 cicd 标准，部署没有应用传统的 pm2，而是把服务放在一个容器内，服务重启靠 node 提供一个健康检查接口，容器来保障服务稳固，当该接口没有失常返回 docker 容器就会重启利用

因为公司标准启动 node 服务都是在容器内用 node app.js，但 next 默认启动是靠 next start 启动生产服务的。解决方案是：next 提供了自定义服务器，我这里采纳了 koa，将 next 作为一个中间件来解决参考

// https://www.nextjs.cn/docs/advanced-features/custom-server
const Koa = require('koa') // 引入 koa
const next = require('next') // nextjs 作为中间件
const routesMap = require('./route') // 新老 url 抵触时，将老 url 转发

const dev = process.env.NODE_ENV === 'development' // 判断是否处于开发者状态
const app = next({dev}) // 初始化 nextjs，判断它是否处于 dev：开发者状态，还是 production: 正式服务状态
const handle = app.getRequestHandler() // 拿到 http 申请的响应

console.log('next dev 环境 ===>', dev)

const port = 8080

// app.prepare：编译 pages 文件夹上面的页面文件，then 是保障 pages 下页面全副编译完了之后，咱们能力真正的启动服务来响应申请。// 如果这些内容咱们没有编译实现，那么启动服务响应申请的时候可能会报错。app.prepare().then(() => {const server = new Koa() // 申明一个 server

  /** 这是 Koa 的外围用法：中间件。通常给 use 外面写一个函数，这个函数就是中间件。* params:
   *  ctx: Koa Context 将 node 的 request 和 response 对象封装到单个对象中，为申请上下文对象
   *  next: 调用后将执行流程转入下一个中间件，如果以后中间件中没有调用 next，整个中间件的执行流程则会在这里终止，后续中间件不会失去执行
   */
  server.use(async (ctx, next) => {if (routesMap[ctx.path]) {
      // 老 url 转发~~~~，这种操作页面能够失常进去，但不晓得为什么浏览器状态码会是 404
      await app.render(ctx.req, ctx.res, routesMap[ctx.path])
    } else {await handle(ctx.req, ctx.res)
    }
    ctx.response = false
  })

  server.listen(port)
  console.log(` 请拜访：http://localhost:${port}`)

关于ssr:React-ssr框架Nextjs-的生产实践

1. 依照官网的形式初始化一个 Next.js 我的项目遇到的一些问题

2. 生产部署