Example using nextjs 13.4 App Router

[BDive]

Hi, An example using the nextjs 13.4 App Router would be great - running into multiple compile and runtime issues porting page to app router.

Thanks

[getdir]

+1

[Ali-Aref]

+1 same here! any updates?

[accountsware]

+1

[yusrandi]

+1 same here! any updates?

[dzabdelhak]

+1

[nestorzamili]

+1 same here! any updates?

[juanlopez87]

Same here. Is there any update??

[palerique]

There is a guy that forked Sakai and did part of the adaptation to Nextjs 13.4: https://github.com/buraksaglam089/sakai-react

[Vicidevs]

Same here

[thomassonobe]

+1

[CretuCristianIonut]

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 !

[melloware]

Sample has been added here on how to make PrimeReact + Next + AppRouter + Tailwind: https://github.com/primefaces/primereact-examples/tree/main/nextjs-app-router-styled-tailwind