Next.jsの動的ルーティングについてメモ

詳しい動作はコメントに記載しました
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

参考: https://nextjs.org/docs/api-routes/introduction

nextjs.org