Dynamic Routes in Next JS

This is about how to assign the pages dynamically from each API

Creating a static page for calling the single landing page

This is an example of the folder structure for the dynamic pages

          <Link key={index} href={`/case-study/${category.slug}`}>
              <div>
                  <p className='jjrewamp-casestudylistpage-secondsection-first-filter-list-category-1'>{category.name}</p>
              </div>
          </Link>

This is call to the casestudy page inner page

<Link href={`/case-study/${category_slug}/${caseStudy.post_name}`}><h3 className="jjrewamp-casestudylistpage-secondsection-categorysection-title-h3">{caseStudy.post_title}</h3></Link>

here /${category_slug}/${caseStudy.post_name}

both of this are dynamic routes

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

Refer this article for more reference

Leave a comment

Your email address will not be published. Required fields are marked *