Search code examples
routesnext.jsslugdirectusslugify

NextJS Slugify route but make normal api request

i have a dynamic NextJS Route based on a Title from a Directus CMS. But these Titles have sometimes Special Characters (like Spaces, Quotes, or something else), and the Data is fetched based on the URL-Title with a GraphQL Client. And i want to slugify it, but Directus doesnt have a Slug Feature. Is there any Solution for that on Directus or Next Side?

Solution

  • Directus does have a "slug" feature, although it depends on what you want to achieve.

    Directus can make a field "URL-friendly" - whatever you type into that field, will be automatically sanitized. It needs to be a separate field and it is not automatic. In other words, you need to fill it manually for every record that you want to have slugs, and you need that field on every collection that is required to have slugs. It is a basic input field, with proper settings:

    enter image description here

    Have in mind, that it would be good for slugs to be unique as well. It is also achievable in Directus.

    If you would like slug to be automatically generated on object save, in addition to slug field you can use hooks. By using (<collection>.)items.create and (<collection>.)items.update filter events (https://docs.directus.io/extensions/hooks/#filter-events) you can adjust the payload after entity has been modified through panel. Then you can use e.g. slugify and write such logic (pseudo code):

    const slugify = require('slugify');

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