I used this as an inspiration :
https://nextjs.org/docs/app/api-reference/components/link#href-required
and https://nextjs.org/docs/app/api-reference/file-conventions/page#params-optional

Folders need to be defined :

pages- folder
  details - folder
      [slug] - folder
          page.tsx -file - detailed element page - that is received dynamically based on params
       page.tsx - file - main details page

Paths in browser desired:

localhost:3000/pages/details
localhost:3000/pages/details/1

Code for main details page where we add some links :

'use client';
import Link from 'next/link';
import { useRouter } from 'next/navigation'

export default function Home() {
    return (
      <>
        <header>
          <h1>Home</h1>
        </header>
        <main>
          <h2>All Posts</h2>
          <ol>
              <li key="1">
                <Link href={`/pages/details/my-first-post`}>
                  un link catre details / 1
                </Link>
              </li>
              <li key="2">
                <Link href={`/pages/details/my-second-post`}>
                  un link catre details / 2
                </Link>
              </li>
          </ol>
        </main>
      </>
    );
  }

Detail element page - coming dynamically from slug attr in params:

'use client';
import Link from 'next/link';
import { useRouter } from 'next/navigation'

export default function Details({ params, searchParams }: {
    params: { slug: string }
    searchParams: { [key: string]: string | string[] | undefined }
  }) {
    const router = useRouter();
    console.log(params);
    console.log(searchParams);
    return (
        <>
        <header>
            <Link href="/">
            Home
            </Link>
        </header>
        <main>
            <article>
            <h1>We received param.slug=`{params.slug}`</h1>
            <p>this can be anything</p>
            </article>
        </main>
        </>
    );
}

I hope this helps !

Example using nextjs 13.4 App Router #47

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions