Strapi+Next.js前端提交文章时slug未自动生成的原因及解决办法

问题原因 #

• Strapi后台的UID字段自动生成逻辑仅在管理后台操作时触发，前端直接调用REST/GraphQL API提交时，不会自动执行该生成逻辑。管理后台有内置表单处理流程，会在提交前根据标题计算slug，但API请求没有这个前置处理步骤。
• 前端POST请求未传入slug字段，且Strapi内容类型配置中，slug字段未开启“必填”选项，也没有设置服务器端自动填充逻辑，导致数据库中该字段值为null。

解决办法 #

1. 前端手动生成slug后提交 #

在Next.js前端处理提交逻辑时，根据文章标题生成符合规则的slug字符串，再和其他字段一起发送到Strapi接口。
示例代码：

// 生成slug的工具函数
const generateSlug = (title) => {
  return title
    .toLowerCase()
    .trim()
    .replace(/[^a-z0-9\s-]/g, '')
    .replace(/[\s-]+/g, '-')
    .replace(/^-+|-+$/g, '');
};

// 提交文章的函数
const submitArticle = async (title, content, userToken) => {
  const slug = generateSlug(title);
  const response = await fetch('http://your-strapi-domain/api/articles', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${userToken}`
    },
    body: JSON.stringify({
      data: {
        title,
        content,
        slug
      }
    })
  });
  const result = await response.json();
};

2. Strapi后端添加生命周期钩子自动生成slug #

利用Strapi的生命周期函数，在文章创建/更新前自动根据标题生成slug，确保所有提交渠道都能自动填充该字段。
步骤：

1. 进入Strapi项目的src/api/article/content-types/article/lifecycles.js文件（无则新建）
2. 添加以下代码：

const slugify = require('slugify');

module.exports = {
  // 创建文章前自动生成slug
  async beforeCreate(event) {
    const { data } = event.params;
    if (data.title && !data.slug) {
      data.slug = slugify(data.title, {
        lower: true,
        strict: true,
        remove: /[*+~.()'"!:@]/g
      });
    }
  },
  // 可选：更新标题时同步更新slug
  async beforeUpdate(event) {
    const { data } = event.params;
    if (data.title && !data.slug) {
      data.slug = slugify(data.title, {
        lower: true,
        strict: true,
        remove: /[*+~.()'"!:@]/g
      });
    }
  }
};

3. 重启Strapi服务，之后所有提交场景都会自动生成slug。

3. 配置Strapi字段为必填（辅助方案） #

在Strapi后台内容类型构建器中编辑slug字段：

• 开启**“必填”**选项，避免字段为空值
• 该方案建议配合生命周期钩子使用，单独设置无法实现基于标题的自动生成。

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