如何阻止Next.js移除生成HTML段落中的换行符？

问题原因 #

Next.js的JSX编译阶段会自动将文本节点中的连续空白（包括换行、多个空格）合并为单个空格，这是React/Next.js的默认文本处理规则——即便你给p标签加了whitespace-pre-wrap样式，编译后的HTML文本已经丢失了换行信息，CSS自然无法生效。

可行解决方案 #

1. 使用模板字符串保留换行符

将文本内容用模板字符串包裹，模板字符串会保留内部的换行和空白，再通过whitespace-pre-wrap样式渲染出换行效果：

<p className="whitespace-pre-wrap">
  {`First line text

Third line text`}
</p>

编译后的HTML会保留文本中的\n换行符，whitespace-pre-wrap样式会解析这些换行符为页面上的换行，同时允许长文本自动换行（这是<pre>标签不具备的特性）。

2. 不推荐：使用dangerouslySetInnerHTML

如果必须直接插入带换行的原始文本，可以使用dangerouslySetInnerHTML，但注意这存在XSS风险，仅在内容完全可控时使用：

<p 
  className="whitespace-pre-wrap"
  dangerouslySetInnerHTML={{ __html: 'First line text\n\nThird line text' }}
/>

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