迁移场景下如何让Next.js将组件/页面渲染为JSON格式？

Next.js 完全支持输出包含渲染后组件/页面内容的 JSON 格式，并非仅局限于 HTML，完全能满足你渐进式迁移的需求。以下是两种常用的实现方式：

1. 利用 API 路由自定义渲染端点 #

创建 Next.js API 路由文件（比如 pages/api/render-component.js），复用你熟悉的 ReactDOMServer 渲染逻辑，将组件内容转为字符串后包装成 JSON 返回：

import React from 'react';
import { renderToString } from 'react-dom/server';
import YourTargetComponent from '../../components/YourTargetComponent';

export default function handler(req, res) {
  // 根据请求参数传递组件 props
  const componentProps = req.query;
  // 渲染组件为 HTML 字符串
  const renderedHtml = renderToString(<YourTargetComponent {...componentProps} />);
  
  // 包装成 JSON 响应返回
  res.status(200).json({
    html: renderedHtml,
    // 按需添加元数据
    meta: {
      component: 'YourTargetComponent',
      renderTime: new Date().toISOString()
    }
  });
}

这种方式和你当前 Express + ReactDOMServer 的逻辑高度一致，其他服务只需请求该 API 端点，即可从返回的 JSON 中提取 HTML 片段嵌入自身 DOM。如果需要流式渲染（对应你使用的 renderToNodeStream），也可以在 API 路由中调用该方法，将流转换为字符串后纳入 JSON，或调整响应方式实现分块传输。

2. 在页面服务端逻辑中输出 JSON（页面级场景） #

如果需要渲染完整 Next.js 页面并输出 JSON，可以在 getServerSideProps 中直接控制响应：

import React from 'react';
import { renderToString } from 'react-dom/server';
import YourPage from './YourPage';

export async function getServerSideProps({ res }) {
  const pageHtml = renderToString(<YourPage />);
  
  // 修改响应头为 JSON 类型
  res.setHeader('Content-Type', 'application/json');
  // 直接返回 JSON 内容
  res.end(JSON.stringify({ html: pageHtml }));
  
  // 因已自定义响应，返回空 props 即可
  return { props: {} };
}

export default function YourPageWrapper() {
  // 该组件不会被渲染，因为 getServerSideProps 已直接返回响应
  return null;
}

总结 #

Next.js 没有强制要求必须输出 HTML，通过自定义 API 路由或服务端渲染逻辑，完全可以实现输出包含渲染内容的 JSON，完美适配你无法一次性完成页面迁移的场景。

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