Prettify Slugs in dynamic Routes.- STRAPI V5

Questions and Answers
1

[details=“System Information”]

  • Strapi 5:
  • Windows 11:
  • ****:
  • node: 20 (NEXT):
  • Node 18 (Strapi)
  • npm: 10.1.0:

Hi Guys, does anyone have an recommendations for prettifying the URL’s that these new documentId values (formerly just 'id) produce?

Context: I have a dynamic route in Next JS app router, which is rendering the Strapi Data - in this case an ‘article’ using the new documentId value. This value is passed to this function:

// single article
export async function getArticle(id: string, revalidate = false) {
  console.log(`ID: ${id} passed ass prop on request`)
  console.log(API_URL);
  const res = await fetch(`${API_URL}/articles/${id}?[populate]=*`, {
    headers: {
      'Next-Cache-Tags': 'article'
    },
    next: { tags: ['article'] },
    cache: 'no-store'
  });

  if (!res.ok) {
    console.log('Failed to fetch article. Status:', res.status);
    return null;
  }

  const json = await res.json();
  // if (!json || !json.json) {
  //   console.log('No data in response:', json);
  //   return null;
  // }

  console.log(json.data)
  return json;
}

Data is fine, except it produces a rather ugly URL: http://localhost:4000/articles/si62ehyuskdkg6mfvq3potyf

Is there anything I can do to ‘prettify’ this url?

As far as I’m aware, I can’t change the value of the documentId for the dynamic page to [slug], for example, as this documentId is required for the fetch request.

Any help is appreciated,

Joe

2

Have a look at this thread:

In essence what you would need to do is something as follows using your own slug

/**
 * project controller
 */

import { Core, factories } from "@strapi/strapi"

export default factories.createCoreController("api::project.project", ({ strapi }: { strapi: Core.Strapi }) => ({
  async findOne(ctx) {
    const { id } = ctx.params;
    const sanitizedQueryParams = await this.sanitizeQuery(ctx);

    const project = await strapi.documents("api::project.project").findMany({
      ...sanitizedQueryParams,
      filters: { slug: id },
    });

    const sanitizedEntity = await this.sanitizeOutput(project[0], ctx);

    return this.transformResponse(sanitizedEntity);
  },
})
);