【Next.js】fetchAPIでJSONデータにアクセスする

{
  "message" : "This is sample JSON data.",
  "data": [
    {"name":"taro", "mail":"taro@yamada", "age":39},
    {"name":"hanako", "mail":"hanako@yamada", "age":28},
    {"name":"sachiko", "mail":"sachiko@yamada", "age":17}
  ]
}

import {useState} from 'react'
import Layout from './components/layout'

const Home = () => {
  const url = './data.json'
  const [payload, setPayload] = useState({message:'', data:[]})
  fetch(url)
    .then(res => res.json())
    .then(jsonData => setPayload(jsonData))
  return (
    <div>
      <Layout title='Top page.'>
        <div className='alert alert-primary text-center'>
          <h5 className='mb-4'>{payload.message}</h5>
          <table className='table bg-white'>
            <thead className='table-dark'>
              <tr><th>Name</th><th>Mail</th><th>Age</th></tr>
            </thead>
            <tbody>
              {payload.data.map((value, key) => 
                <tr key={key}>
                  <th>{value.name}</th>
                  <th>{value.mail}</th>
                  <th>{value.age}</th>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </Layout>
    </div>
  )
}

export default Home