如何在Next.js中修复API动态标题首字母大写及分页文本问题

原代码存在的问题 #

• 模板字符串语法错误，错误嵌套了{${}}结构
• 分页计数逻辑错误：parseInt(props.renderPage + 1)会先将数字转为字符串拼接再转数字，导致计算错误（比如renderPage为"2"时，会变成parseInt("21")得到21）
• 未实现动态标题首字母大写的逻辑

解决方案 #

1. 编写首字母大写工具函数

// 首字母大写处理函数
const capitalizeFirstLetter = (str) => {
  if (!str) return '';
  return str.charAt(0).toUpperCase() + str.slice(1);
};

2. 修正后的完整代码

{`${capitalizeFirstLetter(props.currentPath)} News${props.renderPage ? ` - Page ${parseInt(props.renderPage, 10) + 1}` : ''}`}

代码说明 #

• 用capitalizeFirstLetter处理API返回的currentPath，确保标题首字母统一大写
• 修正模板字符串写法，用反引号包裹整个动态文本
• 分页部分先将renderPage转为十进制数字后再加1，避免字符串拼接导致的计算错误
• 仅当renderPage存在时才显示分页后缀，否则只展示基础标题

内容的提问来源于stack exchange，提问作者Ashok Kumar Panthri