Listing categories on NextJS starter front-end

[sharp kayak]

I'm wanting to make a menu of categories (and sub-categories and sub-sub-categories) on the front-end of my NextJS storefront (I used the starter storefront).

I found this link in the docs: https://docs.medusajs.com/modules/products/storefront/use-categories#list-categories

However when I try this method I get this error:

Module not found: Can't resolve 'oracledb'

I noticed the documentation flags this code as in "Beta" (see attached image). Do I need to make some config changes to use this code?

Any help much appreciated as I'm pretty stuck right now (has asked the ai for help but no dice).

[native inlet]

https://github.com/medusajs/nextjs-starter-medusa/issues/226

[sharp kayak]

Thanks @native inlet — I found that link too but wasn't sure what I needed to do to get this working.

I have no "api" folder in my NextJS storefront's "src/app/" folder (so I've got nothing to delete there as per the comments on that Github ticket).

[sharp kayak]

Here's the contents of my /src/app folder

[sharp kayak]

Bumping this one — still struggling to call a category list.

Anyone got this working?

[thorn radish]

Hi,

In your screenshot you highlighted product module - this is a beta feature. In order to activate it you need to:

1. Set beta feature flag to true.
2. Have api folder (included with clean NextJS starter)
3. Run migrations

Please see the documentation here:

https://docs.medusajs.com/experimental/product/overview

Experimental Features (Beta):

https://docs.medusajs.com/experimental/#enabling-experimental-features

How to enable feature flag:

https://docs.medusajs.com/development/feature-flags/toggle

Beta Features Documentation.

---

So you have two options:

1. Use Beta Product Module.

You would need to activate feature flag for medusa_v2, also you need to have api folder for beta feature to work.

If you install clean copy of store Storefront Starter, and enable feature flags, and run migrations - it would work.

2. Use legacy Products and Categories - refer to other tabs from your screenshot.

[sharp kayak]

Hi @thorn radish — thanks so much for the tips. I suspected I needed to enable something like this.

In your message you said I should install a clean copy of the Storefront Starter.

Is it not possible to use the Storefront I already have installed and enable the Experimental Features there? I've put quite a lot of work into it so far and starting with a new storefront sounds like quite a bit set-back in terms of time/effort.

[thorn radish]

Not necessarily you have to install a clean one, if you already invested a lot of work into your storefront.

It’s just it has all necessary files and folders for product module to function. (Reading that you have no “api” folder in your NextJS)

You can trace and copy these files into your storefront, reading through product module documentation will help to understand how it functions and what dependencies you need to have.

BEWARE: if you haven’t used product module before and would want to activate it, and run migrations - this is a breaking change, you can’t really reverse back easily.

Also, you can use standard Medusa solution product solution. (Which is currently recommended for production) that doesn’t need “api” folder in your NextJS.

[sharp kayak]

Cool OK thanks @thorn radish — my site is quite far from being production-ready so I think I'll take the risk and enable the Experimental Features.

Wish me luck 🤞

[sharp kayak]

@thorn radish I gave it a good go but sadly stuck in an infinite loop of error misery (I pinged @lean leaf a lot 😆 )

I installed a fresh storefront to start again (and plan to copy my styling, components, etc across from my old broken one).

Weirdly there's no "api" folder in the fresh NextJS Storefont project's /src/app folder either.

Is that as expected? I installed the new clean storefront using this command:

npx create-next-app -e https://github.com/medusajs/nextjs-starter-medusa my-medusa-storefront

[thorn radish]

I will take a look when I arrive at the office.

[sharp kayak]

Bumping this one — I'm sort of back to square 1.

My goal is to build a navigavtion menu of my Categories. My category tree looks something like this:

• Parent cat
  -- Child cat 1
  --- Child-child cat 1
  --- Child-child cat 2
  -- Child cat 2
  -- Child cat 3
  --- Child-child cat 1
  --- Child-child cat 2
  -- Child cat 4

• Parent cat
  -- Child cat 1
  -- Child cat 2
  --- Child-child cat 1
  --- Child-child cat 2
  -- Child cat 3
  -- Child cat 4

Etc.

I've set up a new component that I'd like to fetch the categories.

I've looked into using import { getCategoriesList } from "@lib/data" but nothing has worked. I also saw in a separate thread (this one: https://discord.com/channels/876835651130097704/1201447032259366983) that using import { MedusaProvider } from "medusa-react" is no longer supported.

Has anyone managed to get a category list from the back-end to a NextJS front-end?

[native inlet]

It is in the starter nextjs footer

[eternal vector]

https://github.com/medusajs/nextjs-starter-medusa/blob/d025e1b853ce399cdd1727701f326193a2c946bf/src/modules/layout/templates/footer/index.tsx#L3

[sharp kayak]

Yeah I saw a partial category list there but can't seem to re-use that code. I've ended up in a "async function" mess

[eternal vector]

"async function" mess doesn't tell us much

[native inlet]

It is also in the csyegory page layout

[sharp kayak]

@eternal vector yeah sorry I'll show you what I mean.

[eternal vector]

If there is await, the function needs to be marked async. That's it.

[sharp kayak]

Ah OK – yes that's where the error is occurring. There are two uses of "await" in the code I borrowed from the footer.

Here's the code for my component:

`import { Text, clx } from "@medusajs/ui"
import { getCategoriesList, getCollectionsList } from "@lib/data"
import LocalizedClientLink from "@modules/common/components/localized-client-link"

const fetchCategories = async () => {
const { product_categories } = await getCategoriesList()
return product_categories
}

export default async function R58CategoryMenu() {
const productCategories = await fetchCategories().then(
(categories) => categories
)

return (
<ul className="grid grid-cols-1 gap-2">
{productCategories?.slice(0, 6).map((c) => {
if (c.parent_category) {
return
}

    const children =
      c.category_children?.map((child) => ({
        name: child.name,
        handle: child.handle,
        id: child.id,
      })) || null

    return (
      <li
        className="flex flex-col gap-2 text-ui-fg-subtle txt-small"
        key={c.id}
      >
        <LocalizedClientLink
          className={clx(
            "hover:text-ui-fg-base",
            children && "txt-small-plus"
          )}
          href={`/categories/${c.handle}`}
        >
          {c.name}
        </LocalizedClientLink>
        {children && (
          <ul className="grid grid-cols-1 ml-3 gap-2">
            {children &&
              children.map((child) => (
                <li key={child.id}>
                  <LocalizedClientLink
                    className="hover:text-ui-fg-base"
                    href={`/categories/${child.handle}`}
                  >
                    {child.name}
                  </LocalizedClientLink>
                </li>
              ))}
          </ul>
        )}
      </li>
    )
  })}
</ul>

)
}`

(The code in the "return" section I just lifted direct from the Footer — I'll fix that once the listing is working).

[thorn radish]

Looked at the latest repo on github, medusa updated storefront-starter, so you should be good.

[wide dragon]

Hi. There is no api folder under app in the last repo :

[young zodiac]

I have the same problem to implement it some days ago. Here's my solution:

1. Enable MEDUSA_FF_PRODUCT_CATEGORIES on your .env backend file

2. Create the category tree on your admin

In your database it will stay like this:

3. Implement it on your Nav Component Storefront

.

[native inlet]

This will not be recursive