如何将基于.pug模板引擎的Express应用迁移为Next.js应用

不需要全部重新编码，可以按以下步骤分阶段迁移，大部分原有代码可直接复用：

整体迁移思路 #

保留原有Express逻辑的基础上，接入Next.js的路由和渲染能力，先跑通完整流程，再按需迭代优化，不需要一次性重构所有代码。

具体操作步骤 #

• 第一步：初始化Next.js基础项目
  新建Next.js项目，将原有项目的public目录静态资源、mongoose数据库连接逻辑、通用工具函数、中间件逻辑直接复制到新项目中，这部分代码完全不需要修改。
• 第二步：兼容Pug模板
  安装next-pug依赖，在项目根目录新增next.config.js配置对Pug的支持，原有views/pages下的Pug模板文件可以直接复用：

  // next.config.js
  const withPug = require('next-pug')
  module.exports = withPug({
    pugLoaderOptions: {
      basedir: './views'
    }
  })
  

  原有Pug模板需要的渲染参数（比如payload），对应Next.js的getServerSideProps方法获取即可，比如首页的参数获取逻辑可以写成：

  // pages/index.js
  export async function getServerSideProps(context) {
    // 复用原有获取session、组装payload的逻辑
    const payload = {
      pageTitle: "Home",
      userLoggedIn: context.req.session.user,
      userLoggedInJs: JSON.stringify(context.req.session.user),
    }
    return { props: payload }
  }
  

• 第三步：路由迁移
  原有页面路由（比如/login、/profile等）直接对应Next.js的pages目录下的文件结构即可，比如pages/login.js对应/login路由；原有登录校验中间件requireLogin可以直接复用逻辑，写到Next.js根目录的middleware.js中，全局拦截需要登录的路由。
  原有API路由（比如/api/posts等）对应Next.js的pages/api目录下的文件，原有Express接口逻辑只需要简单适配Next.js的req/res对象即可复用，改动量极小。
• 第四步：Socket.io逻辑适配
  直接采用Next.js自定义服务端的方案，原有Socket.io逻辑完全不需要修改，只需要调整原有的app.js代码接入Next.js即可：

  const express = require('express');
  const next = require('next');
  const port = process.env.PORT || 3000;
  const dev = process.env.NODE_ENV !== 'production';
  const nextApp = next({ dev });
  const handle = nextApp.getRequestHandler();
  const middleware = require('./middleware')
  const path = require('path')
  const bodyParser = require("body-parser")
  const mongoose = require("./database");
  const session = require("express-session");
  
  nextApp.prepare().then(() => {
    const app = express();
    const server = app.listen(port, () => console.log("Server listening on port " + port));
    const io = require("socket.io")(server, { pingTimeout: 60000 });
  
    // 原有所有app.use配置、路由配置直接粘贴到此处
    app.set("view engine", "pug");
    app.set("views", "views");
    app.use(bodyParser.urlencoded({ extended: false }));
    app.use(express.static(path.join(__dirname, "public")));
    app.use(session({
        secret: "#########",
        resave: true,
        saveUninitialized: false
    }))
    // 原有所有路由注册逻辑此处省略，直接粘贴即可
  
    // 所有未匹配的路由交给Next.js处理
    app.all('*', (req, res) => {
      return handle(req, res);
    })
  
    // 原有Socket.io逻辑直接粘贴到此处
    io.on("connection", socket => {
      // 原有Socket事件处理逻辑完全不变
    })
  })
  

• 后续增量优化
  项目跑通之后，可以按业务模块慢慢将Pug模板替换为React组件，也可以逐步将接口逻辑替换为Next.js的服务端组件、静态生成等能力优化性能，完全不影响线上正常使用。

常见问题 #

不需要全量重写，按上述步骤最快1~2天即可完成整体迁移，原有代码复用率可达80%以上，不需要一开始就重构所有逻辑。

内容的提问来源于stack exchange，提问作者Developer dayan