Merge branch 'canary' into add-with-zustand-example

Author: kodiakhq[bot]

examples/with-knex/.env.local.example

@@ -0,0 +1 @@
+PG_URI=postgres://admin:pass@localhost:5432/mydb

examples/with-knex/.gitignore

@@ -0,0 +1,30 @@
+# 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
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

examples/with-knex/README.md

@@ -0,0 +1,81 @@
+## Example app using Knex
+
+[Knex](http://knexjs.org/) is a SQL query builder that works with a variety of SQL databases including Postgres and MySQL. This example shows you how to use Knex with Next.js to connect and query a Postgres database. The same code can also connect to all other databases supported by Knex.
+
+## Deploy your own
+
+Once you have access to the environment variables you'll need, deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/with-knex&env=PG_URI&envDescription=Required%20to%20connect%20the%20app%20with%20Postgres)
+
+## 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-knex with-knex
+# or
+yarn create next-app --example with-knex with-knex
+```
+
+## Configuration
+
+### Install dependencies
+
+```bash
+npm install
+# or
+yarn
+```
+
+### Set up a Postgres database
+
+Set up a Postgres database locally or use a DBaaS provider such as AWS or Digital Ocean
+
+### Configure environment variables
+
+Copy the `.env.local.example` file in this directory to `.env.local` (this will be ignored by Git):
+
+```bash
+cp .env.local.example .env.local
+```
+
+Set the `PG_URI` variable in `.env.local` to the connection uri of your postgres database.
+
+### Apply migrations
+
+You can create, apply and rollback migrations using the scripts in `package.json`. For now we will run the example migrations in the `knex/migrations` folder, which will add some Todos to the database.
+
+```bash
+npm run migrate:latest
+# or
+yarn migrate:latest
+```
+
+### Start Next.js in development mode
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Your app should now be up and running on [http://localhost:3000](http://localhost:3000)! If it doesn't work, post on [GitHub discussions](https://github.com/zeit/next.js/discussions).
+
+You should now see a list of Todos that were fetched from the database via the API Route defined in `/pages/api/todos.js`.
+
+## Deploy on Vercel
+
+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)).
+
+#### Deploy Your Local Project
+
+To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and [import to Vercel](https://vercel.com/import/git?utm_source=github&utm_medium=readme&utm_campaign=next-example).
+
+**Important**: When you import your project on Vercel, make sure to click on **Environment Variables** and set them to match your `.env.local` file.
+
+#### Deploy from Our Template
+
+Alternatively, you can deploy using our template by clicking on the Deploy button below.
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/with-knex&env=PG_URI&envDescription=Required%20to%20connect%20the%20app%20with%20Knex)

examples/with-knex/knex/index.js

@@ -0,0 +1,16 @@
+import knex from 'knex'
+import config from '../knexfile.js'
+
+/**
+ * Global is used here to ensure the connection
+ * is cached across hot-reloads in development
+ *
+ * see https://github.com/vercel/next.js/discussions/12229#discussioncomment-83372
+ */
+let cached = global.pg
+if (!cached) cached = global.pg = {}
+
+export function getKnex() {
+  if (!cached.instance) cached.instance = knex(config)
+  return cached.instance
+}

examples/with-knex/knex/migrations/20201015140127_initial.js

@@ -0,0 +1,16 @@
+exports.up = async function (knex) {
+  await knex.schema.createTable('todos', (table) => {
+    table.increments('id')
+    table.string('text').notNullable()
+    table.boolean('done').notNullable()
+  })
+
+  await knex('todos').insert([
+    { text: 'Buy milk', done: true },
+    { text: 'Wash car', done: false },
+  ])
+}
+
+exports.down = async function (knex) {
+  await knex.raw('DROP TABLE todos CASCADE')
+}

examples/with-knex/knexfile.js

@@ -0,0 +1,15 @@
+const { loadEnvConfig } = require('@next/env')
+
+const dev = process.env.NODE_ENV !== 'production'
+const { PG_URI } = loadEnvConfig('./', dev).combinedEnv
+
+module.exports = {
+  client: 'pg',
+  connection: PG_URI,
+  migrations: {
+    directory: './knex/migrations',
+  },
+  seeds: {
+    directory: './knex/seeds',
+  },
+}

examples/with-knex/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "with-knex",
+  "version": "0.1.0",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "migrate:make": "knex migrate:make",
+    "migrate:latest": "knex migrate:latest",
+    "migrate:up": "knex migrate:up",
+    "migrate:down": "knex migrate:down",
+    "migrate:status": "knex migrate:status",
+    "seed:create": "knex seed:make",
+    "seed:run": "knex seed:run"
+  },
+  "dependencies": {
+    "knex": "0.21.6",
+    "next": "latest",
+    "pg": "8.4.1",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  },
+  "license": "MIT"
+}

examples/with-knex/pages/api/todos.js

@@ -0,0 +1,7 @@
+import { getKnex } from '../../knex'
+
+export default async function handler(req, res) {
+  const knex = getKnex()
+  const todos = await knex('todos')
+  res.status(200).json(todos)
+}