Next JS , MySql Complete Server Side Rendering Example

import db from "../lib/db";
import { Metadata } from "next";

export const metadata: Metadata = {
    title: "Jobs By Roles",
    description: "Jobs by role, jobs by category, it jobs, not it jobs"
}

type JobType = {
    id: number;
    jobcategory: string;
    url: string;
    details: string;
};

export default async function JobsPage() {
    const [rows] = await db.query("SELECT * FROM category order by id desc");
    const category = rows as JobType[];
    return (
        <section className="container">
            <div className="row">
                <h1 className="col-xl-12 mb-5">Job By Roles</h1>

                {category.map((cat) => (
                    <div className="col-xl-3 mb-5" key={cat.id}>
                        <div className="p-3 rounded shadow">
                            <h5 className="text-primary">{cat.jobcategory} jobs</h5>
                            <p>{cat.details}</p>
                        </div>
                    </div>
                ))}
            </div>
    </section >
  );
}