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

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'];
  ...
}