vercel · kodiakhq · Feb 25, 2022 · Feb 25, 2022 · Feb 25, 2022 · Feb 25, 2022
@@ -0,0 +1 @@
+DATABASE_URL=mysql://<USERNAME>:<PLAIN_TEXT_PASSWORD>@<ACCESS_HOST_URL>/<DATABASE_NAME>?sslaccept=strict
@@ -1,82 +1,102 @@
-# MySQL Example
+# Next.js + MySQL
 
-This is an example of using [MySQL](https://www.mysql.com/) in a Next.js project.
+This is a [Next.js](https://nextjs.org/) project that uses [Prisma](https://www.prisma.io/) to connect to a [PlanetScale](https://planetscale.com/) MySQL database and [Tailwind CSS](https://tailwindcss.com/) for styling.
 
 ## Demo
 
-### [https://next-mysql.vercel.app](https://next-mysql.vercel.app/)
+https://next-mysql.vercel.app
 
-## Deploy your own
+## Prerequisites
+
+- [Node.js](https://nodejs.org/en/download/)
+- [PlanetScale CLI](https://github.com/planetscale/cli)
+- Authenticate the CLI with the following command:
+
+```sh
+pscale auth login
+```
+
+## Set up the database
+
+Create a new database with the following command:
 
-Once you have access to [the environment variables you'll need](#step-5-set-up-environment-variables), deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+```sh
+pscale database create <DATABASE_NAME>
+```
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-mysql&project-name=nextjs-mysql&repository-name=nextjs-mysql&env=MYSQL_HOST,MYSQL_DATABASE,MYSQL_USERNAME,MYSQL_PASSWORD&envDescription=Required%20to%20connect%20the%20app%20with%20MySQL&envLink=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fwith-mysql%23step-2-set-up-environment-variables&demo-title=Next.js%20%2B%20MySQL%20Demo&demo-description=A%20simple%20app%20demonstrating%20Next.js%20and%20MySQL%20&demo-url=https%3A%2F%2Fnext-mysql.vercel.app%2F)
+> A branch, `main`, was automatically created when you created your database, so you can use that for `BRANCH_NAME` in the steps below.
 
-## How to use
+## Set up the starter Next.js app
 
 Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
 
 ```bash
-npx create-next-app --example with-mysql next-mysql-app
+npx create-next-app --example with-mysql nextjs-mysql
 # or
-yarn create next-app --example with-mysql next-mysql-app
+yarn create next-app --example with-mysql nextjs-mysql
 ```
 
-## Configuration
-
-### Step 1. Set up a MySQL database
+Next, you'll need to create a database username and password through the CLI to connect to your application. If you'd prefer to use the dashboard for this step, you can find those instructions in the [Connection Strings documentation](https://docs.planetscale.com/concepts/connection-strings#creating-a-password) and then come back here to finish setup.
 
-Set up a MySQL server either locally or any cloud provider.
+First, create your `.env` file by renaming the `.env.example` file to `.env`:
 
-### Step 2. Set up environment variables
+```sh
+mv .env.example .env
+```
 
-Copy the `env.local.example` file in this directory to `.env.local` (which will be ignored by Git):
+Next, using the PlanetScale CLI, create a new username and password for the branch of your database:
 
-```bash
-cp .env.local.example .env.local
+```sh
+pscale password create <DATABASE_NAME> <BRANCH_NAME> <PASSWORD_NAME>
 ```
 
-Set each variable on `.env.local`:
-
-- `MYSQL_HOST` - Your MySQL host URL.
-- `MYSQL_DATABASE` - The name of the MySQL database you want to use.
-- `MYSQL_USERNAME` - The name of the MySQL user with access to database.
-- `MYSQL_PASSWORD` - The passowrd of the MySQL user.
+> The `PASSWORD_NAME` value represents the name of the username and password being generated. You can have multiple credentials for a branch, so this gives you a way to categorize them. To manage your passwords in the dashboard, go to your database overview page, click "Settings", and then click "Passwords".
 
-### Step 3. Run migration script
+Take note of the values returned to you, as you won't be able to see this password again.
 
-You'll need to run a migration to create the necessary table for the example.
+```text
+Password production-password was successfully created.
+Please save the values below as they will not be shown again
 
-```bash
-npm run migrate
-# or
-yarn migrate
+  NAME                  USERNAME       ACCESS HOST URL                     ROLE               PLAIN TEXT
+ --------------------- -------------- ----------------------------------- ------------------ -------------------------------------------------------
+  production-password   xxxxxxxxxxxxx   xxxxxx.us-east-2.psdb.cloud   Can Read & Write   pscale_pw_xxxxxxx
 ```
 
-### Step 4. Run Next.js in development mode
+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:
 
-```bash
-npm install
-npm run dev
-# or
-yarn install
-yarn dev
+```text
+mysql://<USERNAME>:<PLAIN_TEXT_PASSWORD>@<ACCESS_HOST_URL>/<DATABASE_NAME>?sslaccept=strict
 ```
 
-Your app should be up and running on [http://localhost:3000](http://localhost:3000)! If it doesn't work, post on [GitHub discussions](https://github.com/vercel/next.js/discussions).
+Push the database schema to your PlanetScale database using Prisma.
+
+`npx prisma db push`
+
+Run the seed script to populate your database with `Product` and `Category` data.
+
+`npx run seed`
 
-## Deploy on Vercel
+## Run the App
 
-You can deploy this app to the cloud with [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
+Run the app with following command:
 
-#### Deploy Your Local Project
+`npm run dev`
 
-To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and [import to Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example).
+Open your browser at [localhost:3000](localhost:3000) to see the running application.
+
+## Deploy your own
+
+After you've got your application running locally, it's time to deploy it. To do so, you'll need to promote your database branch (`main` by default) to be the production branch ([read the branching documentation for more information](https://docs.planetscale.com/concepts/branching)).
+
+```sh
+pscale branch promote <DATABASE_NAME> <BRANCH_NAME>
+```
 
-**Important**: When you import your project on Vercel, make sure to click on **Environment Variables** and set them to match your `.env.local` file.
+Now that your branch has been promoted to production, you can either use the existing password you generated earlier for running locally or create a new password. Regardless, you'll need a password in the deployment steps below.
 
-#### Deploy from Our Template
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
 
-Alternatively, you can deploy using our template by clicking on the Deploy button below.
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-mysql&project-name=with-mysql&repository-name=with-mysql&env=DATABASE_URL)
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-mysql&project-name=nextjs-mysql&repository-name=nextjs-mysql&env=MYSQL_HOST,MYSQL_DATABASE,MYSQL_USERNAME,MYSQL_PASSWORD&envDescription=Required%20to%20connect%20the%20app%20with%20MySQL&envLink=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fwith-mysql%23step-2-set-up-environment-variables&demo-title=Next.js%20%2B%20MySQL%20Demo&demo-description=A%20simple%20app%20demonstrating%20Next.js%20and%20MySQL%20&demo-url=https%3A%2F%2Fnext-mysql.vercel.app%2F)
+> Make sure to update the `DATABASE_URL` variable during this setup process.
@@ -0,0 +1,30 @@
+import Image from 'next/image'
+
+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>
+  )
+}