Cleaned up example.

README.md

@@ -60,7 +60,7 @@ Please save the values below as they will not be shown again
 
   NAME                  USERNAME       ACCESS HOST URL                     ROLE               PLAIN TEXT
  --------------------- -------------- ----------------------------------- ------------------ -------------------------------------------------------
-  production-password   xxxxxxxxxxxxx   xxxxxx.us-east-2.psdb.cloud   Can Read & Write   pscale_pw_xxxxxxx                                                                                    
+  production-password   xxxxxxxxxxxxx   xxxxxx.us-east-2.psdb.cloud   Can Read & Write   pscale_pw_xxxxxxx
 ```
 
 You'll use these properties to construct your connection string, which will be the value for `DATABASE_URL` in your `.env` file. Update the `DATABASE_URL` property with your connection string in the following format:
@@ -75,7 +75,7 @@ Push the database schema to your PlanetScale database using Prisma.
 
 Run the seed script to populate your database with `Product` and `Category` data.
 
-`npx run seed`
+`npm run seed`
 
 ## Run the App
 
@@ -103,21 +103,21 @@ Choose one of the following deploy buttons and make sure to update the `DATABASE
 
 ### Deploy on Netlify
 
-*Note: The `Netlify.toml` file in this repository includes the configuration for you to customize the `DATABASE_URL` property on the initial deploy.
+\*Note: The `Netlify.toml` file in this repository includes the configuration for you to customize the `DATABASE_URL` property on the initial deploy.
 
 [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/planetscale/nextjs-starter)
 
 ## Learn More
 
 To learn more about PlanetScale, take a look at the following resources:
 
-- [PlanetScale  quick start guide](https://docs.planetscale.com/tutorials/planetscale-quick-start-guide) - Learn how to get started with PlanetScale.
+- [PlanetScale quick start guide](https://docs.planetscale.com/tutorials/planetscale-quick-start-guide) - Learn how to get started with PlanetScale.
 
 ## What's next?
 
-Learn more about how PlanetScale allows you to make [non-blocking schema changes](/concepts/nonblocking-schema-changes) to your database tables without locking or causing downtime for production databases. If you're interested in learning how to secure your application when connecting to PlanetScale,
+Learn more about how PlanetScale allows you to make [non-blocking schema changes](https://docs.planetscale.com/concepts/nonblocking-schema-changes) to your database tables without locking or causing downtime for production databases. If you're interested in learning how to secure your application when connecting to PlanetScale,
 please read [Connecting to PlanetScale securely](/reference/planetscale-security).
 
 ## Need help?
 
-Get help from [PlanetScale's support team](https://www.planetscale.com/support), or join our [GitHub Discussion board](https://github.com/planetscale/beta/discussions) to see how others are using PlanetScale.
+Get help from [PlanetScale's support team](https://www.planetscale.com/support), or join our [GitHub Discussion board](https://github.com/planetscale/beta/discussions) to see how others are using PlanetScale.

components/Product.js

@@ -1,23 +1,31 @@
 import Image from 'next/image';
-import React from 'react';
 
-export default function Product({product}) {
-    const {name, description, price, image, category} = product;
-    return (
-        <div className="max-w-xs rounded overflow-hidden shadow-lg" key={product.id}>
-            <Image className="w-full" width={320} height={160} 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}
-                </p>
-            </div>
-            <div className="px-6 pt-4 pb-2">
-                <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>
-    )
+export default function Product({ product }) {
+  const { name, description, price, image, category } = product;
+
+  return (
+    <div
+      className="max-w-[250px] rounded overflow-hidden shadow-lg"
+      key={product.id}
+    >
+      <Image
+        className="w-full"
+        width={250}
+        height={250}
+        objectFit="cover"
+        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}</p>
+      </div>
+      <div className="px-6 pt-4 pb-2">
+        <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>
+  );
 }

pages/_app.js

@@ -1,7 +1,5 @@
-import '../styles/globals.css'
+import '../styles/globals.css';
 
-function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+export default function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />;
 }
-
-export default MyApp

pages/api/products.js

@@ -1,16 +1,16 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import prisma from "./../../lib/prisma.js";
+import prisma from './../../lib/prisma.js';
 
 export default async function handler(req, res) {
-    if(req.method === 'GET') {
-        try {
-            const data = await prisma.product.findMany({});
-            return res.status(200).json({ data });
-        }catch(err){
-            console.error(err)
-            return res.status(500).json({ msg: 'Something went wrong' }); 
-        }
-    }else {
-        return res.status(405).json({ msg: 'Method not allowed' });
+  if (req.method === 'GET') {
+    try {
+      const data = await prisma.product.findMany({});
+      return res.status(200).json({ data });
+    } catch (err) {
+      console.error(err);
+      return res.status(500).json({ msg: 'Something went wrong' });
     }
+  } else {
+    return res.status(405).json({ msg: 'Method not allowed' });
+  }
 }

pages/index.js

@@ -1,11 +1,10 @@
-import Head from 'next/head'
-import Image from 'next/image';
+import Head from 'next/head';
 import Product from '../components/Product';
-import prisma from '../lib/prisma'
+import prisma from '../lib/prisma';
 
-export default function Home({products}) {
+export default function Home({ products }) {
   return (
-    <div >
+    <div>
       <Head>
         <title>PlanetScale Next.js Quickstart</title>
         <meta name="description" content="PlanetScale Quickstart for Next.js" />
@@ -14,36 +13,34 @@ export default function Home({products}) {
 
       <main className="p-10 mx-auto max-w-4xl">
         <h1 className="text-6xl font-bold mb-4 text-center">Next.js Starter</h1>
-        <p className="mb-20 text-xl text-center">🔥 Shop from the hottest items in the world 🔥</p>
+        <p className="mb-20 text-xl text-center">
+          🔥 Shop from the hottest items in the world 🔥
+        </p>
         <div className="grid md:grid-cols-3 sm:grid-cols-2 grid-cols-1 justify-items-center  gap-4">
-
-            {products.map(product => (
-                <Product product={product} key={product.id}/>
-            ))}
+          {products.map((product) => (
+            <Product product={product} key={product.id} />
+          ))}
         </div>
       </main>
 
-      <footer >
-
-      </footer>
+      <footer></footer>
     </div>
-  )
+  );
 }
 
 export async function getStaticProps(context) {
-    const data = await prisma.product.findMany({
-        include: {
-            category: true
-        }
-    });
-    //convert decimal value to string to pass through as json
-    const products = data.map(product => ({
-        ...product,
-        price: product.price.toString()
-    }));
+  const data = await prisma.product.findMany({
+    include: {
+      category: true,
+    },
+  });
+
+  //convert decimal value to string to pass through as json
+  const products = data.map((product) => ({
+    ...product,
+    price: product.price.toString(),
+  }));
   return {
-    props: {products},
-  }
+    props: { products },
+  };
 }
-
-

prisma/data.js

@@ -1,51 +1,52 @@
 const { Prisma } = require('@prisma/client');
 
 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"
-    }
+  {
+    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',
+  },
 ];
 
 const products = [
-    {
-        name: "Cool hat.",
-        description: "A nice hat to wear on your head",
-        price: new Prisma.Decimal(19.95),
-        image: "/images/placeholder.jpg",
-        category_id: 1,
-    },
-    {
-        name: "Grey T-Shirt",
-        description: "A nice shirt that you can wear on your body",
-        price: new Prisma.Decimal(22.95),
-        image: "/images/placeholder.jpg",
-        category_id: 3,
-    },
-    {
-        name: "Socks",
-        description: "Cool socks that you can wear on your feet",
-        price: new Prisma.Decimal(12.95),
-        image: "/images/placeholder.jpg",
-        category_id: 2,
-    },
-    {
-        name: "Sweatshirt",
-        description: "Cool sweatshirt that you can wear on your body",
-        price: new Prisma.Decimal(12.95),
-        image: "/images/placeholder.jpg",
-        category_id: 3,
-    }
-]
+  {
+    name: 'Cool helmet.',
+    description: 'A nice helmet to wear on your head',
+    price: new Prisma.Decimal(19.95),
+    image: '/images/helmet.jpg',
+    category_id: 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',
+    category_id: 3,
+  },
+  {
+    name: 'Socks',
+    description: 'Cool socks that you can wear on your feet',
+    price: new Prisma.Decimal(12.95),
+    image: '/images/socks.jpg',
+    category_id: 2,
+  },
+  {
+    name: 'Sweatshirt',
+    description: 'Cool sweatshirt that you can wear on your body',
+    price: new Prisma.Decimal(12.95),
+    image: '/images/sweatshirt.jpg',
+    category_id: 3,
+  },
+];
 
 module.exports = {
-    products, categories
-}
+  products,
+  categories,
+};

prisma/seed.js

@@ -3,34 +3,34 @@ const { categories, products } = require('./data.js');
 const prisma = new PrismaClient();
 
 const load = async () => {
-    try {
-        await prisma.category.deleteMany();
-        console.log("Deleted records in category table");
+  try {
+    await prisma.category.deleteMany();
+    console.log('Deleted records in category table');
 
-        await prisma.product.deleteMany();
-        console.log("Deleted records in product table");
+    await prisma.product.deleteMany();
+    console.log('Deleted records in product table');
 
-        await prisma.$queryRaw`ALTER TABLE Product AUTO_INCREMENT = 1`;
-        console.log("reset product auto increment to 1");
+    await prisma.$queryRaw`ALTER TABLE Product AUTO_INCREMENT = 1`;
+    console.log('reset product auto increment to 1');
 
-        await prisma.$queryRaw`ALTER TABLE Category AUTO_INCREMENT = 1`;
-        console.log("reset category auto increment to 1");
+    await prisma.$queryRaw`ALTER TABLE Category AUTO_INCREMENT = 1`;
+    console.log('reset category auto increment to 1');
 
-        await prisma.category.createMany({
-            data: categories
-        });
-        console.log("Added category data");
+    await prisma.category.createMany({
+      data: categories,
+    });
+    console.log('Added category data');
 
-        await prisma.product.createMany({
-            data: products
-        })
-        console.log("Added product data");
-    } catch (e) {
-        console.error(e);
-        process.exit(1);
-    } finally {
-        await prisma.$disconnect();
-    };
-}
+    await prisma.product.createMany({
+      data: products,
+    });
+    console.log('Added product data');
+  } catch (e) {
+    console.error(e);
+    process.exit(1);
+  } finally {
+    await prisma.$disconnect();
+  }
+};
 
-load();
+load();