Best approach to build a listing website with categories and sub-categories

[roljohntorralba]

Hello, newbie here, I'm trying to convert my old listing website to use Next JS.

It has a very basic page structure:

• Home
  -- Category 1
  ---- Sub Category 1
  ------ Listing 1
  ------ Listing 2
  ---- Sub Category 2
  ------ Listing 1
  -- Category 2
  ---- Sub Category 1
  ------ Listing 1

For each Parent Category, there is an index page that lists all the pages under all Sub Categories.
And for each Sub Category, it will list all the pages under it.

I've referred to the getting started docs and learn tutorial to build it as it seems easy enough.

The first approach I tried was to follow the learn tutorial's approach:

• use getStaticProps and getStaticPaths to get .md files and create the static paths from the /content folder
• use dynamic routes pages/[main]/[pid].js

So here's what I did:

• create all the contents in /content directory following the old website's directory structure in markdown.
• created /pages/[main]/[sub]/[pid].js to dynamically get the routes.
• for /pages/[main]/index.js I am able to retrieve all the contents of the current query and the contents of its sub-directory. It also returns 404 if the query->directory doesn't exist in the /content directory.
• for /pages/[main]/[sub]/index.js I tried the same approach above but wasn't successful on retrieving the [sub] query so I can generate a static path from it.

The second approach I did was to build everything as static pages in /pages.
So there's no more /content directory, no more markdown content, instead everything is inside /pages.

Now, I needed an index page for the parent and sub category, and since there are no markdown files, all the content is taken from the static pages e.g. /pages/service/plumbing/jaysplumbing.js in which is itself already a problem (performance issues with dynamically importing components).

I'm also adding a search function once I figured out the browse function.

What do you think is the best approach for this type of website?