Dynamische generatie van links in NextJS

Stel we hebben een bestand met gebruikersgegevens:

/app/users/users.jsexport default users = [
  {
    id: 1,
    name: 'name1',
    surn: 'surn1',
  },
  {
    id: 2,
    name: 'name2',
    surn: 'surn2',
  },
  {
    id: 3,
    name: 'name3',
    surn: 'surn3',
  },
];

Laten we twee componenten maken. De eerste component zal een lijst van gebruikers tonen met links naar hun gedetailleerde beschrijving. De tweede component zal deze gedetailleerde beschrijving tonen.

Stel dat op URL /users/list de lijst van alle gebruikers wordt getoond, en op URL /users/show/:id - een specifieke gebruiker op basis van zijn id.

Hiervoor maken we de volgende bestandsstructuur:

• /app//users/users.js/list/page.jsx/show/[id]/page.jsx

Laten we de eerste component maken, waarin we dynamisch links genereren in een lus, waarbij we de id van elke gebruiker invullen:

app/users/list/page.jsximport users from '../users.js';
import Link from 'next/link';

export default function List() {
  let list = users.map(user => {
    return <li>
      <Link href={`/users/show/${user.id}`}>
        {user.name}
      </Link>
    </li>;
  });
  
  return <ul>
    {list}
  </ul>;
}

Laten we een component maken voor het tonen van een specifieke gebruiker op basis van zijn id:

app/users/show/[id]/page.jsximport users from '../../users.js';

export default function User({params}) {
  let user = users[params.id];
  
  return <div>
    <span>{user.id}</span>
    <span>{user.name}</span>
    <span>{user.surn}</span>
  </div>;
}

/app/prods/prods.jslet prods = [
  {
    id: 1,
    name: 'prod1',
    cost: 100,
    desc: 'desc1',
  },
  {
    id: 2,
    name: 'prod2',
    cost: 200,
    desc: 'desc2',
  },
  {
    id: 3,
    name: 'prod3',
    cost: 300,
    desc: 'desc3',
  },
];