How Create 5-Level Menu in Prismic with Nextjs15 + Typescript

Developing with Prismic
,
1

image
image126×946 22.8 KB

Question about Implementing a 5-Level Menu in Prismic with Next.js & TypeScript (Multi-language Support)

Issue

I'm using Next.js with Prismic to build a website with a 5-level menu while supporting multiple languages (lang ). However, I'm facing issues defining routes and link resolvers in Prismic to ensure child pages follow the correct structure.

Requirements

  1. Desired URL Structure
  • Support lang at the beginning (e.g., /en/ , /vi/ )
  • Multi-level menu:
/:lang/products-services
/:lang/products-services/network-services
/:lang/products-services/network-services/cloud-services
/:lang/products-services/software-applications
/:lang/products-services/software-applications/fintech/blockchain

const routes: prismic.ClientConfig["routes"] = [
    {
      type: "homepage",
      path: "/:lang?", //working
    },
    {
      type: "page",
      path: "/:lang?/:uid", //working
    },
    {
      type: "nested_page",
      path: "/:lang?/:uid/:pagePath", //not working
    },
  ];

Please guide how to organize routing properly and correctly at level 3 and above in nextjs15 and typscript

2

Hi @taichet2003,

For the route resolver, you would want resolvers in your third path, such as in the example of the documentation here: Route Resolver - Documentation - Prismic

  {
    type: "product",
    resolvers: {
      category: "category",
    },
    path: "/:lang/:category/:uid",
  },
  {
    type: "product",
    resolvers: {
      category: "category",
      section: "category.section",
    },
    path: "/:lang/:section/:category/:uid",
  },

Have you also had a look at this guide: How to Model a Multi-level 'Mega Menu' with Prismic? It's not for 5-levels, but it might give you some pointers as to how to proceed and how to get the structure right. Let me know if you have questions after you give it a read :slight_smile: