NextJS Slugify 路由但发出正常 api 请求

Question

我有一个基于 Directus CMS 标题的动态 NextJS 路由。但这些标题有时有特殊字符（如空格、引号或其他内容），并且数据是基于 URL-Title 使用 GraphQL 客户端获取的。我想对它进行 slugify，但 Directus 没有 Slug 功能。在 Directus 或 Next Side 上有解决方案吗？

Answer 1

Directus 确实有一个“slug”功能，尽管这取决于您想要实现的目标。

Directus 可以创建一个字段“URL-friendly”——无论您在该字段中键入什么，都将被自动清理。它需要是一个单独的字段，并且不是自动的。换句话说，您需要为每个想要有 slug 的记录手动填充它，并且您需要在每个需要有 slug 的集合上使用该字段。这是一个基本的输入字段，具有适当的设置：

请记住，鼻涕虫也最好是独一无二的。它也可以在 Directus 中实现。

如果您希望在对象保存时自动生成 slug，除了 slug 字段之外，您还可以使用 hooks。通过使用 (<collection>.)items.create 和 (<collection>.)items.update 过滤器事件 (https://docs.directus.io/extensions/hooks/#filter-events)，您可以在通过面板修改实体后调整负载。然后你可以使用例如slugify 并写出这样的逻辑（伪代码）：

const slugify = require('slugify');

export onUpdate = (entity) => {
  entity.slug = slugify(entity.name);
}

NextJS Slugify 路由但发出正常 api 请求

NextJS Slugify route but make normal api request

routes

next.js

slug

directus

slugify