Next.js博客通过CMS富文本渲染时Link组件href属性不显示问题

问题原因 #

1. 链接渲染分支直接使用未定义的href变量，没有从CMS返回的配置对象中读取链接地址
2. switch判断存在重复的heading-three分支，导致三级标题渲染逻辑永远无法命中
3. 若控制台报Link is not defined错误，还需要补充Next.js Link组件的导入声明

修复代码 #

首先在文件顶部补充依赖导入：

import Link from 'next/link'
import React from 'react'
import moment from 'moment'

修复后的getContentFragment逻辑：

const getContentFragment = (index, text, obj, type) => {
    let modifiedText = text;
        
    if (obj) {
        if (obj.bold) {
            modifiedText = (<b key={index}>{text}</b>);
        }
    
        if (obj.italic) {
            modifiedText = (<em key={index}>{text}</em>);
        }
    
        if (obj.underline) {
            modifiedText = (<u key={index}>{text}</u>);
        }
              
    }
    
    switch (type) {
        case 'heading-one':
            return <h1 key={index} className="text-3xl font-semibold mb-4">{modifiedText.map((item, i) => <React.Fragment key={i}>{item}</React.Fragment>)}</h1>;
        case 'heading-two':
            return <h2 key={index} className="text-2xl font-semibold mb-4">{modifiedText.map((item, i) => <React.Fragment key={i}>{item}</React.Fragment>)}</h2>;
        case 'heading-three':
            return <h3 key={index} className="text-xl font-semibold mb-4">{modifiedText.map((item, i) => <React.Fragment key={i}>{item}</React.Fragment>)}</h3>;
        case 'paragraph':
            return <p key={index} className="mb-8">{modifiedText.map((item, i) => <React.Fragment key={i}>{item}</React.Fragment>)}</p>;
        case 'heading-four':
            return <h4 key={index} className="text-md font-semibold mb-4">{modifiedText.map((item, i) => <React.Fragment key={i}>{item}</React.Fragment>)}</h4>;
        case 'link':
            // 从obj中读取href属性，外部链接可按需加target="_blank" rel="noopener noreferrer"
            return <Link key={index} href={obj.href} className="text-md font-semibold mb-4 underline text-blue-600">{modifiedText.map((item, i) => <React.Fragment key={i}>{item}</React.Fragment>)}</Link>;
        case 'script':
            return <script key={index} className="text-md font-semibold mb-4">{modifiedText.map((item, i) => <React.Fragment key={i}>{item}</React.Fragment>)}</script>;
                
        case 'image':
            return (
              <img
                key={index}
                alt={obj.title}
                height={obj.height}
                width={obj.width}
                src={obj.src}
                className="max-w-full h-auto my-4"
              />
            );
        default:
            return modifiedText;
            
        }
    };

兼容说明 #

如果你使用的是Next.js 12及更早版本，需要在Link组件内部包裹一层<a>标签：

<Link key={index} href={obj.href}>
  <a className="text-md font-semibold mb-4 underline text-blue-600">
    {modifiedText.map((item, i) => <React.Fragment key={i}>{item}</React.Fragment>)}
  </a>
</Link>

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