3 levels nested dynamic routes with Next.js

I’m trying to achieve a 3 levels dynamic routes in my next js application. So far I just obtain a 2 levels dynamic routes. All the data are coming from a headless CMS. I’m using graphlQL

So far I managed to obtain a 2 levels: blog/[category]/[post]. However I can’t make this working: blog/[category]/[subcategory]/[post]

This is the code for the category:

import Link from "next/link";
import { getCategories, getPosts } from "../../../utils/datocmsHelper";

export default function CategoriesPage({ category, subcategories, posts }) {
  
  return (
    <div>
      <h1>{category.categoryName}</h1>
      <h2>sub-categories inside Category:</h2>
      <ul>
        {subcategories.map((subcategory) => (
          <li key={subcategory.slug}>
            <Link href={`/blog/${category.slug}/${subcategory.slug}`}>
              {subcategory.slug}
            </Link>
          </li>
        ))}
      </ul>
      <h2>Posts:</h2>
      <ul>
        {posts.map((post) => (
          <li key={post.slug}>
            <Link href={`/blog/${category.slug}/${post.slug}`}>
              {post.slug}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  ); 
}

export async function getStaticProps(ctx) {
  const categoriesData = await getCategories();
  const postsData = await getPosts(); 

  const currentCategory = categoriesData.allCategories.find(
    (category) => category.slug === ctx.params.category
  );

  const subcategoriesInCategory = categoriesData.allCategories.filter(
    (subcategory) => subcategory.category.slug === currentCategory.slug
  );

  const postsInCategory = postsData.allPosts.filter(
    (post) => post.category.slug === currentCategory.slug
  );
  

  return {
    props: {
      category: currentCategory,
      subcategories: subcategoriesInCategory,
      posts: postsInCategory,
    },
  };
}


export async function getStaticPaths() {
  const categoriesData = await getCategories();

  return {
    paths: categoriesData.allCategories.map((category) => ({
      params: {
        category: category.slug,
        
      },
    })),
    fallback: false,
  };
}

this is the code for the subcategory:

import { getPosts, getCategories } from "../../../../utils/datocmsHelper";

export default function CategoriesPage({ subcategory }) {
  return (
    <div className="flex flex-col">
      <h1>title: {subcategory.slug}</h1>
      <p>Category: {subcategory.category.slug}</p>
      <p>subcategory general content</p>
    </div>
  );
}


export async function getStaticProps(ctx) {
  const subcatogoriesData = await getCategories();

  const currentsubcategory = subcatogoriesData.allCategories.find(
    (subcategory) => subcategory.slug === ctx.params.subcategory
  );

  return {
    props: {
      subcategory: currentsubcategory,
    },
  };
}


export async function getStaticPaths() {
  const catogoriesData = await getCategories();

  return {
    paths: catogoriesData.allCategories.map((category) => 
      category.children.map((subcategory, i) => ({
        params: {
        
        subcategory: subcategory.slug,
        category: category.category.slug,
      },
    }))),
    fallback: false,
  };
}

and this for the post:

import { getPosts } from "../../../../../utils/datocmsHelper";

export default function CategoriesPage({ post }) {
  return (
    <div className="flex flex-col">
      <h1>title: {post.title}</h1>
      <p>Category: {post.category.slug}</p>
      <p>post general content</p>
    </div>
  );
}


export async function getStaticProps(ctx) {
  const postsData = await getPosts();

  const currentPost = postsData.allPosts.find(
    (post) => post.slug === ctx.params.post
  );

  return {
    props: {
      post: currentPost,
    },
  };
}


export async function getStaticPaths() {
  const postsData = await getPosts();

  return {
    paths: postsData.allPosts.map((post) => ({
      params: {
        
        post: post.slug,
        category: post.category.slug,
      },
    })),
    fallback: false,
  };
}