I included dynamic path/routes as a bonus.
Internal path is app/[stateName]/page.tsx
Public route is domainName.com/(any state name)
// Prisma is ORM that handles DB req/res
async function getStateInfo(stateName: string) {
const state: State | null = await prisma.state.findUnique({
where: { name: stateName },
});
return state;
}
type StatePageParams = { params: { stateName: string }};
export default async function StatePage({ params }: StatePageParams) {
const stateInfo = await getStateInfo(params.stateName);
return (
<main className="container flex flex-col items-center justify-center p-2">
{stateInfo ? (
<div>
<h1 className="text-lg"> {stateInfo.name} </h1>
</div>
<InteractiveClientCard />
) : null}
</main>
);
}