-
- )
-}
diff --git a/examples/with-custom-reverse-proxy/server.js b/examples/with-custom-reverse-proxy/server.js
deleted file mode 100644
index 8371a0f28b44..000000000000
--- a/examples/with-custom-reverse-proxy/server.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/* eslint-disable no-console */
-const express = require('express')
-const next = require('next')
-
-const devProxy = {
- '/api': {
- target: 'https://swapi.co/api/',
- pathRewrite: { '^/api': '/' },
- changeOrigin: true,
- },
-}
-
-const port = parseInt(process.env.PORT, 10) || 3000
-const env = process.env.NODE_ENV
-const dev = env !== 'production'
-const app = next({
- dir: '.', // base directory where everything is, could move to src later
- dev,
-})
-
-const handle = app.getRequestHandler()
-
-let server
-app
- .prepare()
- .then(() => {
- server = express()
-
- // Set up the proxy.
- if (dev && devProxy) {
- const { createProxyMiddleware } = require('http-proxy-middleware')
- Object.keys(devProxy).forEach(function (context) {
- server.use(context, createProxyMiddleware(devProxy[context]))
- })
- }
-
- // Default catch-all handler to allow Next.js to handle all other routes
- server.all('*', (req, res) => handle(req, res))
-
- server.listen(port, (err) => {
- if (err) {
- throw err
- }
- console.log(`> Ready on port ${port} [${env}]`)
- })
- })
- .catch((err) => {
- console.log('An error occurred, unable to start the server')
- console.log(err)
- })
diff --git a/examples/with-docker/Dockerfile b/examples/with-docker/Dockerfile
index 9a478dd0b6c7..67bec4d37092 100644
--- a/examples/with-docker/Dockerfile
+++ b/examples/with-docker/Dockerfile
@@ -23,6 +23,9 @@ COPY . .
RUN yarn build
+# If using npm comment out above and use below instead
+# RUN npm run build
+
# Production image, copy all the files and run next
FROM node:16-alpine AS runner
WORKDIR /app
diff --git a/examples/with-emotion-swc/.gitignore b/examples/with-emotion-swc/.gitignore
new file mode 100644
index 000000000000..1437c53f70bc
--- /dev/null
+++ b/examples/with-emotion-swc/.gitignore
@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
diff --git a/examples/with-emotion-swc/README.md b/examples/with-emotion-swc/README.md
new file mode 100644
index 000000000000..12b4f677a8d0
--- /dev/null
+++ b/examples/with-emotion-swc/README.md
@@ -0,0 +1,31 @@
+# Emotion Example
+
+Extract and inline critical css with
+[@emotion/css](https://github.com/emotion-js/emotion/tree/master/packages/css),
+[@emotion/server](https://github.com/emotion-js/emotion/tree/master/packages/server),
+[@emotion/react](https://github.com/emotion-js/emotion/tree/master/packages/react),
+and [@emotion/styled](https://github.com/emotion-js/emotion/tree/master/packages/styled).
+
+## Preview
+
+Preview the example live on [StackBlitz](http://stackblitz.com/):
+
+[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-emotion)
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+
+[](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-emotion&project-name=with-emotion&repository-name=with-emotion)
+
+## How to use
+
+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-emotion with-emotion-app
+# or
+yarn create next-app --example with-emotion with-emotion-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
diff --git a/examples/with-emotion-swc/next.config.js b/examples/with-emotion-swc/next.config.js
new file mode 100644
index 000000000000..0928286e81ee
--- /dev/null
+++ b/examples/with-emotion-swc/next.config.js
@@ -0,0 +1,10 @@
+/** @type {import('next').NextConfig} */
+
+const nextConfig = {
+ reactStrictMode: true,
+ experimental: {
+ emotion: true,
+ },
+}
+
+module.exports = nextConfig
diff --git a/examples/with-emotion-swc/package.json b/examples/with-emotion-swc/package.json
new file mode 100644
index 000000000000..411e3fcb8efb
--- /dev/null
+++ b/examples/with-emotion-swc/package.json
@@ -0,0 +1,15 @@
+{
+ "private": true,
+ "scripts": {
+ "dev": "next",
+ "build": "next build",
+ "start": "next start"
+ },
+ "dependencies": {
+ "@emotion/react": "11.8.1",
+ "@emotion/styled": "11.8.1",
+ "next": "latest",
+ "react": "17.0.2",
+ "react-dom": "17.0.2"
+ }
+}
diff --git a/examples/with-emotion-swc/pages/_app.js b/examples/with-emotion-swc/pages/_app.js
new file mode 100644
index 000000000000..0fe238a5d232
--- /dev/null
+++ b/examples/with-emotion-swc/pages/_app.js
@@ -0,0 +1,15 @@
+import createCache from '@emotion/cache'
+import { CacheProvider } from '@emotion/react'
+
+import { globalStyles } from '../shared/styles'
+
+const cache = createCache({ key: 'next' })
+
+const App = ({ Component, pageProps }) => (
+
+ {globalStyles}
+
+
+)
+
+export default App
diff --git a/examples/with-emotion-swc/pages/index.js b/examples/with-emotion-swc/pages/index.js
new file mode 100644
index 000000000000..481abe91b200
--- /dev/null
+++ b/examples/with-emotion-swc/pages/index.js
@@ -0,0 +1,20 @@
+import { css } from '@emotion/react'
+import { Animated, Basic, bounce, Combined, Pink } from '../shared/styles'
+
+const Home = () => (
+
+ Cool Styles
+ Pink text
+
+ With :hover.
+
+ Let's bounce.
+
+)
+
+export default Home
diff --git a/examples/with-emotion-swc/shared/styles.js b/examples/with-emotion-swc/shared/styles.js
new file mode 100644
index 000000000000..cb9720bbfeba
--- /dev/null
+++ b/examples/with-emotion-swc/shared/styles.js
@@ -0,0 +1,72 @@
+import { css, Global, keyframes } from '@emotion/react'
+import styled from '@emotion/styled'
+
+export const globalStyles = (
+
+)
+
+export const basicStyles = css({
+ backgroundColor: 'white',
+ color: 'cornflowerblue',
+ border: '1px solid lightgreen',
+ borderRight: 'none',
+ borderBottom: 'none',
+ boxShadow: '5px 5px 0 0 lightgreen, 10px 10px 0 0 lightyellow',
+ transition: 'all 0.1s linear',
+ margin: '3rem 0',
+ padding: '1rem 0.5rem',
+})
+
+export const hoverStyles = css`
+ &:hover {
+ color: white;
+ background-color: lightgray;
+ border-color: aqua;
+ box-shadow: -15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;
+ }
+`
+export const bounce = keyframes`
+ from {
+ transform: scale(1.01);
+ }
+ to {
+ transform: scale(0.99);
+ }
+`
+
+export const Basic = styled.div`
+ ${basicStyles};
+`
+
+export const Combined = styled.div`
+ ${basicStyles};
+ ${hoverStyles};
+ & code {
+ background-color: linen;
+ }
+`
+
+export const Pink = styled.div(basicStyles, {
+ color: 'hotpink',
+})
+
+export const Animated = styled.div`
+ ${basicStyles};
+ ${hoverStyles};
+ & code {
+ background-color: linen;
+ }
+ animation: ${({ animation }) => animation} 0.2s infinite ease-in-out alternate;
+`
diff --git a/examples/with-mysql/.env.example b/examples/with-mysql/.env.example
new file mode 100644
index 000000000000..9205e1aeee0b
--- /dev/null
+++ b/examples/with-mysql/.env.example
@@ -0,0 +1 @@
+DATABASE_URL=mysql://:@/?sslaccept=strict
diff --git a/examples/with-mysql/.env.local.example b/examples/with-mysql/.env.local.example
deleted file mode 100644
index 2062d45cde42..000000000000
--- a/examples/with-mysql/.env.local.example
+++ /dev/null
@@ -1,7 +0,0 @@
-# Example .env.local file for MySQL Database credentials
-
-MYSQL_HOST=
-MYSQL_DATABASE=
-MYSQL_USERNAME=
-MYSQL_PASSWORD=
-MYSQL_PORT=
diff --git a/examples/with-mysql/README.md b/examples/with-mysql/README.md
index d8d75d5e4578..a853b6584dea 100644
--- a/examples/with-mysql/README.md
+++ b/examples/with-mysql/README.md
@@ -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
+```
-[](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
```
-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://:@/?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.
+
+`npm 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
+```
-**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.
+[](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)
-[](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.
diff --git a/examples/with-mysql/components/Product.js b/examples/with-mysql/components/Product.js
new file mode 100644
index 000000000000..16f32b38399b
--- /dev/null
+++ b/examples/with-mysql/components/Product.js
@@ -0,0 +1,31 @@
+import Image from 'next/image'
+
+export default function Product({ product }) {
+ const { name, description, price, image, category } = product
+
+ return (
+