mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
70d357a3ea
## Summary Updates the `with-mysql` example to use latest versions of all dependencies. ### What - Migrate from Pages Router to App Router - Update to React 19 and Next.js latest - Update to Tailwind CSS v4 with `@import "tailwindcss"` syntax - Update to Prisma 7 with `@prisma/adapter-planetscale` driver adapter - Convert all files to TypeScript - Remove unused API route and `vercel.svg` - Update README to clarify this is for PlanetScale MySQL and link to [vercel/postgres-next-starter](https://github.com/vercel/postgres-next-starter) for Postgres users ### Why The example was significantly outdated: - Prisma 3.10.0 → Prisma 7 (latest) - Tailwind 3.0.23 → Tailwind 4 - React 18.2.0 → React 19 - Pages Router → App Router ### How Followed the official migration guides: - [Prisma 7 upgrade guide](https://www.prisma.io/docs/orm/more/upgrade-guides/upgrading-versions/upgrading-to-prisma-7) - [PlanetScale quickstart with Prisma](https://www.prisma.io/docs/getting-started/prisma-orm/quickstart/planetscale) - Aligned configuration files with a fresh `create-next-app` output ## Related N/A ## How to Test ```bash cd examples/with-mysql npm install # Set up .env with your PlanetScale DATABASE_URL npx prisma generate npx prisma db push npx prisma db seed npm run dev ``` ## Checklist - [x] Tests and samples are included - [x] Documentation is updated (README) --------- Co-authored-by: vercel[bot] <35613825+vercel[bot]@users.noreply.github.com>
38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import Image from "next/image";
|
|
import type {
|
|
Product as ProductType,
|
|
Category,
|
|
} from "@/lib/generated/prisma/client";
|
|
|
|
type ProductWithCategory = ProductType & {
|
|
category: Category | null;
|
|
};
|
|
|
|
export function Product({ product }: { product: ProductWithCategory }) {
|
|
const { name, description, price, image, category } = product;
|
|
|
|
return (
|
|
<div className="max-w-[250px] rounded overflow-hidden shadow-lg">
|
|
<Image
|
|
className="w-full object-cover"
|
|
width={250}
|
|
height={250}
|
|
src={image}
|
|
alt={name}
|
|
/>
|
|
<div className="px-6 py-4">
|
|
<div className="font-bold text-xl mb-2">{name}</div>
|
|
<p className="text-gray-700 text-base">{description}</p>
|
|
<p className="text-gray-900 text-xl">${price.toString()}</p>
|
|
</div>
|
|
<div className="px-6 pt-4 pb-2">
|
|
{category && (
|
|
<span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
|
|
{category.name}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|