Dynamisk generering av länkar i NextJS

Låt oss säga att vi har en fil med användardata:

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

Låt oss skapa två komponenter. Den första komponenten kommer att visa en lista över användare med länkar till deras detaljerade beskrivning. Den andra komponenten kommer att visa denna detaljerade beskrivning.

Låt URL:en /users/list visa listan över alla användare, och URL:en /users/show/:id - en specifik användare baserat på deras id.

För att göra detta, skapa följande filstruktur:

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

Låt oss skapa den första komponenten, där vi dynamiskt genererar länkar i en loop, och sätter in id för varje användare:

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

Låt oss skapa en komponent för att visa en specifik användare baserat på deras 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',
  },
];