詳しい動作はコメントに記載しました
Next.jsのversionは10.0.7です
UserList.tsx
import * as React from 'react' import UserListItem from './UserListItem' import { User } from '../interfaces' // Propsで親コンポーネントからUserのリストを取得 type Props = { items: User[] } const UserList = ({ items }: Props) => ( <ul> {/* Usersを回してUserごとに子コンポーネントを呼び出す */} {items.map((item) => ( <li key={item.id}> <UserListItem data={item} /> </li> ))} </ul> ) export default UserList
UserListItem.tsx
import React from 'react' import Link from 'next/link' import { User } from '../interfaces' type Props = { data: User } // Linkをクリックするとusers/[id].tsxに遷移する const ListItem = ({ data }: Props) => ( // asはブラウザに表示されるURL <Link href="/users/[id]" as={`/users/${data.id}`}> <a> {data.id}: {data.name} </a> </Link> ) export default ListItem