routing-in-next-link.js

import Link from "next/link";

function UserList({ users }) {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>
          <Link href="/users/[slug]" as={`/users/${user.slug}`}>
            <a>{user.name}</a>
          </Link>
        </li>
      ))}
    </ul>
  );
}

export async function getServerSideProps() {
  // Fetch list of users
  const res = await fetch("https://api.example.com/users");
  const users = await res.json();

  return {
    props: {
      users,
    },
  };
}

export default UserList;