Files
Simeon Griggs 70d357a3ea Update with-mysql example to Next.js 15, Tailwind 4, Prisma 7 (#88475)
## 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>
2026-01-20 12:16:44 +01:00

48 lines
1.1 KiB
TypeScript

import { Prisma } from "../lib/generated/prisma/client";
export const categories = [
{
name: "Hats",
description: "Things you can wear on your head",
},
{
name: "Socks",
description: "Things you can wear on your feet",
},
{
name: "Shirts",
description: "Things you wear on the top half of your body",
},
];
export const products = [
{
name: "Cool helmet.",
description: "A nice helmet to wear on your head",
price: new Prisma.Decimal(19.95),
image: "/images/helmet.jpg",
categoryId: 1,
},
{
name: "Grey T-Shirt",
description: "A nice shirt that you can wear on your body",
price: new Prisma.Decimal(22.95),
image: "/images/shirt.jpg",
categoryId: 3,
},
{
name: "Socks",
description: "Cool socks that you can wear on your feet",
price: new Prisma.Decimal(12.95),
image: "/images/socks.jpg",
categoryId: 2,
},
{
name: "Sweatshirt",
description: "Cool sweatshirt that you can wear on your body",
price: new Prisma.Decimal(12.95),
image: "/images/sweatshirt.jpg",
categoryId: 3,
},
];