如何在Next.js应用中预处理JSX，添加 避免段落孤行？

方案一：自定义SSR友好的React组件 #

直接封装一个组件，在服务端渲染阶段完成文本处理，生成带 的HTML，完全避免客户端布局偏移。

组件代码示例：

import React from 'react';

const NoWidow = ({ children }) => {
  // 仅处理纯文本节点
  if (typeof children !== 'string') return children;
  
  const wordList = children.trim().split(' ');
  // 单词数少于3个无需处理
  if (wordList.length <= 2) return children;
  
  // 拼接最后两个单词为带&nbsp;的字符串
  const lastPair = wordList.slice(-2).join('&nbsp;');
  const processedContent = [...wordList.slice(0, -2), lastPair].join(' ');
  
  return <span dangerouslySetInnerHTML={{ __html: processedContent }} />;
};

export default NoWidow;

使用方式：用该组件包裹需要处理的段落文本即可：

<p>
  <NoWidow>这是一段可能会在页面换行时出现孤行的长文本，通过组件处理后能避免最后一个单词单独占一行的问题</NoWidow>
</p>

这个方案零配置、易维护，所有处理逻辑在SSR阶段完成，客户端拿到的已是处理好的HTML，不会有布局偏移问题。

方案二：自定义Babel插件全局处理 #

如果想全局自动处理所有JSX文本节点，无需手动套组件，可以写一个简单的Babel插件，在Next.js编译阶段修改文本内容。

首先创建Babel插件文件（比如babel-plugin-no-widow.js）：

module.exports = function() {
  return {
    visitor: {
      JSXText(path) {
        const rawText = path.node.value.trim();
        if (!rawText || rawText.split(' ').length <= 2) return;
        
        const words = rawText.split(' ');
        const lastTwoWords = words.slice(-2).join('&nbsp;');
        const finalText = [...words.slice(0, -2), lastTwoWords].join(' ');
        
        path.node.value = finalText;
      }
    }
  };
};

然后在next.config.js中配置这个插件：

module.exports = {
  babel: {
    plugins: ['./babel-plugin-no-widow.js'],
  },
};

这种方式会自动处理所有JSX中的纯文本节点，适合大型项目批量处理，但需要对Babel插件机制有基础了解。

方案三：MDX内容的remark插件处理（仅适用于MDX场景） #

如果内容用MDX编写，可以用remark插件在MDX编译阶段处理段落文本：

const remarkNoWidow = () => {
  return (tree) => {
    // 遍历所有段落节点
    tree.children.forEach(node => {
      if (node.type === 'paragraph') {
        node.children.forEach(child => {
          if (child.type === 'text') {
            const words = child.value.trim().split(' ');
            if (words.length <= 2) return;
            
            const lastPair = words.slice(-2).join('&nbsp;');
            child.value = [...words.slice(0, -2), lastPair].join(' ');
          }
        });
      }
    });
  };
};

在Next.js的MDX配置中引入该插件即可完成批量处理。

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