CODEWITHSUNDEEP
next.jsroutesnext-linknext.js13
AndiGo
AndiGo

Reputation: 1

Next.js 13 routing params

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.

Upvotes: 0

Views: 9854

Answers (3)

Rams&#233;s L&#243;pez
Rams&#233;s L&#243;pez

Reputation: 491

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

Upvotes: 3

ldls
ldls

Reputation: 169

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 <></>;
}

Upvotes: 0

Carl
Carl

Reputation: 100

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

Upvotes: -1

Related Questions