creating dynamic routes with Next.js

Question

creating dynamic routes with Next.js

I am in the process of creating a Next.js application that showcases a product catalog sorted by categories and subcategories. The category and subcategory information is stored in an array of objects structured like this:

const categories = [
  {
    id: 1,
    name: "Category A",
    subcategories: [
      {
        id: 1,
        name: "Subcategory A1",
        subsubcategories: [
          {
            id: 1,
            name: "Sub-Subcategory A1.1",
          },
          {
            id: 2,
            name: "Sub-Subcategory A1.2",
          },
        ],
      },
      // Other subcategories and sub-subcategories within Category A
    ],
  },
  {
    id: 2,
    name: "Category B",
    subcategories: [
      // Subcategories and sub-subcategories within Category B
    ],
  },
  // Other categories with their respective subcategories and sub-subcategories
];

I aim to create dynamic paths for each product that adhere to the format category/subcategory/subsubcategory/productID. For instance, if a user selects a product with ID 123 in Category A, Subcategory A1, and Sub-Subcategory A1.1, the URL should appear as follows: /category-a/subcategory-a1/sub-subcategory-a1-1/123.

The product details are stored in a separate array of objects shown below:

const products = [
  {
    id: 123,
    name: "Product A1.1.1",
    category_id: 1,
    subcategory_id: 1,
    subsubcategory_id: 1,
    description: "Lorem ipsum dolor sit amet",
    price: 9.99,
    image: "/images/product-a1-1-1.jpg",
  },]

javascript next.js next.js13 dynamic-routing nextjs-dynamic-routing

Answer 1

Answer №1

Give this a shot:

// file:

/pages/[category]/[subcategory]/[subsubcategory]/[product].js

import React from 'react'
import { useRouter } from 'next/router'

    const items = [
      {
        id: 1,
        name: "Banana",
        category: 1,
        subcategory: 1,
        subsubcategory: 1,
      },
      {
        id: 2,
        name: "Foobar",
        category: 2,
        subcategory: 3,
        subsubcategory: 5,
      }
    ];
    
    
    const categories = [
      {
        id: 1,
        name: "Fruits",
        subcategories: [
          {
            id: 1,
            name: "Tropical fruits",
            subsubcategories: [
              {
                id: 1,
                name: "Berry fruits", // yes a banana is really a berry fruit
              },
              {
                id: 2,
                name: "Sub-Subcategory A1.2",
              },
            ],
          },
          {
            id: 2,
            name: "Subcategory A2",
            subsubcategories: [
              {
                id: 3,
                name: "Sub-Subcategory A2.1",
              },
              {
                id: 4,
                name: "Sub-Subcategory A2.2",
              },
            ],
          },
        ],
      },
      {
        id: 2,
        name: "Category B",
        subcategories: [
          {
            id: 3,
            name: "Subcategory B1",
            subsubcategories: [
              {
                id: 5,
                name: "Sub-Subcategory B1.1",
              },
              {
                id: 6,
                name: "Sub-Subcategory B1.2",
              },
            ],
          },
          {
            id: 4,
            name: "Subcategory B2",
            subsubcategories: [
              {
                id: 7,
                name: "Sub-Subcategory B2.1",
              },
              {
                id: 8,
                name: "Sub-Subcategory B2.2",
              },
            ],
          },
        ],
      },
    ];
    
    const slugify = str =>
      str
        .toLowerCase()
        .trim()
        .replace(/[^\w\s-]/g, '')
        .replace(/[\s_-]+/g, '-')
        .replace(/^-+|-+$/g, '');
    
    export default function Product() {
    
      const router = useRouter()
    
      const { category, subcategory, subsubcategory, product } = router.query
      console.log(category, subcategory, subsubcategory, product);
      // {category: 'fruits', subcategory: 'tropical-fruits', subsubcategory: 'berry-fruits', product: 'banana'}
    
    
      const found = items.find((item) => slugify(item.name) === product); // banana === banana
      console.log({ found });
      // {id: 1, name: 'Banana', category: 1, subcategory: 1, subsubcategory: 1}
    
      return (
        <div>{found.name}</div>
      )
    }
    
    export async function getStaticPaths() {
    
      const paths = items.map((item) => {
        // find the right categories for this product item
        let categoryFound = categories.find((c) => c.id == item.category);
        let subcategoryFound = categoryFound.subcategories.find((sc) => sc.id == item.subcategory);
        let subsubcategoryFound = subcategoryFound.subsubcategories.find((ssc) => ssc.id == item.subsubcategory);
    
        return {
          params: {
            product: slugify(item.name), // the slug
            category: slugify(categoryFound.name),
            subcategory: slugify(subcategoryFound.name),
            subsubcategory: slugify(subsubcategoryFound.name)
          }
        }
      });
    
      return {
        paths,
        fallback: false,
      };
    
    }
    
    export async function getStaticProps({ params }) {
    
      const { category, subcategory, subsubcategory, product } = params;
    
      return {
        props: {
          category,
          subcategory,
          subsubcategory,
          product,
        },
      };
    }

The building process also constructs the product pages with the accurate categories: image

You can access your products like this:

http://localhost:3000/fruits/tropical-fruits/berry-fruits/banana

Answer 2

Give this a shot:

// file:

/pages/[category]/[subcategory]/[subsubcategory]/[product].js

import React from 'react'
import { useRouter } from 'next/router'

    const items = [
      {
        id: 1,
        name: "Banana",
        category: 1,
        subcategory: 1,
        subsubcategory: 1,
      },
      {
        id: 2,
        name: "Foobar",
        category: 2,
        subcategory: 3,
        subsubcategory: 5,
      }
    ];
    
    
    const categories = [
      {
        id: 1,
        name: "Fruits",
        subcategories: [
          {
            id: 1,
            name: "Tropical fruits",
            subsubcategories: [
              {
                id: 1,
                name: "Berry fruits", // yes a banana is really a berry fruit
              },
              {
                id: 2,
                name: "Sub-Subcategory A1.2",
              },
            ],
          },
          {
            id: 2,
            name: "Subcategory A2",
            subsubcategories: [
              {
                id: 3,
                name: "Sub-Subcategory A2.1",
              },
              {
                id: 4,
                name: "Sub-Subcategory A2.2",
              },
            ],
          },
        ],
      },
      {
        id: 2,
        name: "Category B",
        subcategories: [
          {
            id: 3,
            name: "Subcategory B1",
            subsubcategories: [
              {
                id: 5,
                name: "Sub-Subcategory B1.1",
              },
              {
                id: 6,
                name: "Sub-Subcategory B1.2",
              },
            ],
          },
          {
            id: 4,
            name: "Subcategory B2",
            subsubcategories: [
              {
                id: 7,
                name: "Sub-Subcategory B2.1",
              },
              {
                id: 8,
                name: "Sub-Subcategory B2.2",
              },
            ],
          },
        ],
      },
    ];
    
    const slugify = str =>
      str
        .toLowerCase()
        .trim()
        .replace(/[^\w\s-]/g, '')
        .replace(/[\s_-]+/g, '-')
        .replace(/^-+|-+$/g, '');
    
    export default function Product() {
    
      const router = useRouter()
    
      const { category, subcategory, subsubcategory, product } = router.query
      console.log(category, subcategory, subsubcategory, product);
      // {category: 'fruits', subcategory: 'tropical-fruits', subsubcategory: 'berry-fruits', product: 'banana'}
    
    
      const found = items.find((item) => slugify(item.name) === product); // banana === banana
      console.log({ found });
      // {id: 1, name: 'Banana', category: 1, subcategory: 1, subsubcategory: 1}
    
      return (
        <div>{found.name}</div>
      )
    }
    
    export async function getStaticPaths() {
    
      const paths = items.map((item) => {
        // find the right categories for this product item
        let categoryFound = categories.find((c) => c.id == item.category);
        let subcategoryFound = categoryFound.subcategories.find((sc) => sc.id == item.subcategory);
        let subsubcategoryFound = subcategoryFound.subsubcategories.find((ssc) => ssc.id == item.subsubcategory);
    
        return {
          params: {
            product: slugify(item.name), // the slug
            category: slugify(categoryFound.name),
            subcategory: slugify(subcategoryFound.name),
            subsubcategory: slugify(subsubcategoryFound.name)
          }
        }
      });
    
      return {
        paths,
        fallback: false,
      };
    
    }
    
    export async function getStaticProps({ params }) {
    
      const { category, subcategory, subsubcategory, product } = params;
    
      return {
        props: {
          category,
          subcategory,
          subsubcategory,
          product,
        },
      };
    }

The building process also constructs the product pages with the accurate categories: image

You can access your products like this:

http://localhost:3000/fruits/tropical-fruits/berry-fruits/banana

Answer 3

Answer №2

Here's the concept:

Create pages for pages/ or app/ before building with NextJs (using a prepare script)
Rethink the nesting structure: excessive subcategories may not be ideal, consider using recursion for a cleaner and more efficient codebase

I'm thinking about proposing a prepare feature for NextJS to automate page generation, it seems like a missing piece.

Update: The code is error-free but hasn't been tested yet:

import mkdirp from "mkdirp";

type ArticleId = number;
type CategoryId = number;

interface Article {
  id: ArticleId;
  name: string;
  category: CategoryId[];
}

interface Category {
  id: CategoryId;
  name: string;
  categories?: Category[];
}

// @proposal consider a flattened structure
const articles: Article[] = [
  {
    id: 1000,
    name: "banana",
    category: [1, 1, 2],
  },
  {
    id: 2000,
    name: "strawberry",
    category: [1, 1, 1],
  },
];

// @proposal always use 'sub' or like here 'categories' (no subsubsub)
const categories: Category[] = [
  {
    id: 1,
    name: "fruits",
    categories: [
      {
        id: 11,
        name: "berries", // 🫐🍓
        categories: [{ id: 111, name: "swiss berries" }], // 🇨🇭🍓
      },
      {
        id: 12,
        name: "bananas",
        categories: [{ id: 121, name: "argentina bananas" }], // 🇦🇷🍌
      },
    ],
  },
];

const paths: string[] = [];

// Function to find deepest subCategory recursively
function recursive(category: Category, currentPath = ""): void {
  const subCategories = category.categories;

  if (!subCategories)
    return void paths.concat([`${currentPath}/[${category.name}]`);

  subCategories.forEach((subCategory) =>
    recursive(subCategory, `${currentPath}/[${subCategory.name}]`)
  );
}

categories.forEach((category) => recursive(category));

paths.forEach((path) => mkdirp.sync(`${path}/[productId]`));

The code can be optimized, but since it runs before NextJs build, it's not crucial right now. You may need to revisit it based on the number of articles in the future.

Depending on app/ or pages/, you can access req.query at:

[productId]/page.tsx (app/ directory)
[productId]/index.tsx (pages/ directory)

You can also include the index/page.tsx file in the loop and import the code to display the product (same code for all products in every category).

On a random note about marketing, consider rounding prices to whole numbers instead of using .99. It may give a sense of transparency and fairness to customers.

Answer 4

Here's the concept:

Create pages for pages/ or app/ before building with NextJs (using a prepare script)
Rethink the nesting structure: excessive subcategories may not be ideal, consider using recursion for a cleaner and more efficient codebase

I'm thinking about proposing a prepare feature for NextJS to automate page generation, it seems like a missing piece.

Update: The code is error-free but hasn't been tested yet:

import mkdirp from "mkdirp";

type ArticleId = number;
type CategoryId = number;

interface Article {
  id: ArticleId;
  name: string;
  category: CategoryId[];
}

interface Category {
  id: CategoryId;
  name: string;
  categories?: Category[];
}

// @proposal consider a flattened structure
const articles: Article[] = [
  {
    id: 1000,
    name: "banana",
    category: [1, 1, 2],
  },
  {
    id: 2000,
    name: "strawberry",
    category: [1, 1, 1],
  },
];

// @proposal always use 'sub' or like here 'categories' (no subsubsub)
const categories: Category[] = [
  {
    id: 1,
    name: "fruits",
    categories: [
      {
        id: 11,
        name: "berries", // 🫐🍓
        categories: [{ id: 111, name: "swiss berries" }], // 🇨🇭🍓
      },
      {
        id: 12,
        name: "bananas",
        categories: [{ id: 121, name: "argentina bananas" }], // 🇦🇷🍌
      },
    ],
  },
];

const paths: string[] = [];

// Function to find deepest subCategory recursively
function recursive(category: Category, currentPath = ""): void {
  const subCategories = category.categories;

  if (!subCategories)
    return void paths.concat([`${currentPath}/[${category.name}]`);

  subCategories.forEach((subCategory) =>
    recursive(subCategory, `${currentPath}/[${subCategory.name}]`)
  );
}

categories.forEach((category) => recursive(category));

paths.forEach((path) => mkdirp.sync(`${path}/[productId]`));

The code can be optimized, but since it runs before NextJs build, it's not crucial right now. You may need to revisit it based on the number of articles in the future.

Depending on app/ or pages/, you can access req.query at:

[productId]/page.tsx (app/ directory)
[productId]/index.tsx (pages/ directory)

You can also include the index/page.tsx file in the loop and import the code to display the product (same code for all products in every category).

On a random note about marketing, consider rounding prices to whole numbers instead of using .99. It may give a sense of transparency and fairness to customers.

creating dynamic routes with Next.js

Answer №1

Answer №2

Similar questions

What is the best way to create a props interface that includes state and setState values that are being

Timing with Three.js - the key to engaging interactive experiences

disableDefault not functioning properly post-fadeout, subsequent loading, and fade-in of new content with a different URL into

What is the best way to calculate the total sum of values from the third-tier nested array of objects in all documents stored

JavaScript code to retrieve and store data from API endpoints

Exploring Angular.js: How to propagate model changes from a child controller within an ng-repeat loop?

A numeric input area that only accepts decimal numbers, with the ability to delete and use the back

Adjust the position of vertices when the mouse hovers over them

Load Angular template dynamically within the Component decorator

Encountering an error with Nested MaterialUI Tabs while attempting to open the second level of tabs

Sending information to a PHP script using Ajax

Encountering an Issue in Angular 5: Trouble Retrieving Information from Local JSON Source [object Object]

What is the best way to switch between three different menus and ensure that the last selected menu remains open when navigating to a new page

Encountered a Soundcloud embedded javascript issue: Unable to execute the 'createPattern' function on 'CanvasRenderingContext2D' due to the canvas width being 0

Component failing to refresh with each key modification

Why does the ng-click function fail to execute when using the onclick attribute in AngularJS?

Guide on simulating an incoming http request (response) using cypress

I am currently working on incorporating Azure AD B2C authentication into my Next.js application, but I keep encountering an issue where I receive an error stating that the challenge

What steps can be taken to convert a list box into an editable box?

Customizing animations for birds