Step 1: Follow the following link to setup API Routes with MySQL DB
https://codingmstr.com/project/creating-api-routes-in-next-js-14-get-post-put-delete
Step 2: Create a 'pages/person/index.jsx' file under root directory
Step 3: Use the below code to fetch server-side data in Next JS 14 in Page Directory Using getServerSideProps
export default function Index(data) {
return (
<>
<h2>Category</h2>
Name: {data.data[0].name}
{data.data.map((item, index) => (
<div key={index}>
{item.name}
</div>
))}
</>
);
}
export async function getServerSideProps() {
const response = await fetch('http://localhost:3000/api/users');
if (response.ok) {
const data = await response.json();
console.log(data);
return { props: { data } }
} else {
console.error('Failed to fetch data:', response.statusText);
return null;
}
}
