Next.js 13 routing params

Question

Hi folks first of all i am new to react and nextjs. So i am sorry if my question is stupid.

I am currently building a navigation with nextjs 13 within new the app folder. Here is my navigation component where i am building the category links with the component:

import React from 'react'
import fetchMainNavigation from '../lib/fetchMainNavigation'
import Link from 'next/link'

const DesktopNavigation = async () => {
  const categories = await fetchMainNavigation

  return (
    <nav className={'hidden md:flex'}>
      <ul className={'flex flex-row gap-4'}>
        {categories.map((category) => (
          <li key={category.id}>
            <Link
              href={`${category.id}`}
              className={
                'hover:underline hover:text-gold hover:scale-110 transition-transform duration-200'
              }
            >
              {category.name}
            </Link>
          </li>
        ))}
      </ul>
    </nav>
  )
}

export default DesktopNavigation

export async function generateStaticParams() {
  const categories = await fetchMainNavigation

  return categories.map((category) => ({
    categoryId: category.id.toString(),
  }))
}

I have also created a dynamic route "/app/[categoryId]/page.jsx". The routing works fine but now i have a not readable URL like "www.mypage.com/46asdfg56as8g" but i want something like "www.mypage.com/food". I know i could use the category name for routing but i need the categoryId as param within "/app/[categoryId]/page.jsx" to fetch information about the current active category. Is there a way to achieve this?

I have already searched the Next.js 13 documentation and also searched stackoverflow and other sources, but can't find anything about this problem yet.

Answer 1

js 13.4.4 they call this "Dynamic Routes", if you want this route in the browser "www.mypage.com/food" and then you need some detail, for example "www.mypage.com/food/1".

You need to create this folder structure in your project.

/src/app/food/page.tsx - List of food /src/app/food/[id]/page.tsx - Detail of food

You can read the id param, passing props to component

export default function Page({ params }: { params: { id: string } }) {
   const { id } = params;

   return <p>{id}</p>

}

This is the link to the documentation

https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes

Answer 2

Here is the updated doc

'use client';
 
import { useParams } from 'next/navigation';
 
export default function ExampleClientComponent() {
  const params = useParams();
 
  // Route -> /shop/[tag]/[item]
  // URL -> /shop/shoes/nike-air-max-97
  // `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
  console.log(params);
 
  return <></>;
}

Answer 3

It is in the beta documentation here. Also, under the very first category of the docs here

To utilize the next13 beta slugs, simply pass them in as the params property, as outlined in the official documentation.

const DesktopNavigation = async ({ params }) => {
  const category = params['category'];
  ...
}