Merge pull request #4873 from Budibase/examples/nextjs

NextJS public API example

.gitignore

@@ -98,3 +98,4 @@ hosting/proxy/.generated-nginx.prod.conf
 bin/
 hosting/.generated*
 packages/builder/cypress.env.json
+stats.html

examples/nextjs-api-sales/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/nextjs-api-sales/.gitignore

@@ -0,0 +1,38 @@
+# 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*
+.pnpm-debug.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

examples/nextjs-api-sales/README.md

@@ -0,0 +1,41 @@
+# Budibase API + Next.js example
+
+This is an example of how Budibase can be used as a backend for a Postgres database for a Next.js sales app. You will 
+need to follow the walk-through that has been published in the Budibase docs to set up your Budibase app for this example.
+
+## Pre-requisites
+
+To use this example you will need:
+1. [Docker](https://www.docker.com/)
+2. [Docker Compose](https://docs.docker.com/compose/) 
+3. [Node.js](https://nodejs.org/en/)
+4. A self-hosted Budibase installation
+
+## Getting Started
+
+The first step is to set up the database - you can do this by going to the `db/` directory and running the command:
+
+```bash
+docker-compose up
+```
+
+The next step is to follow the example walk-through and set up a Budibase app as it describes. Once you've done
+this you can configure the settings in `next.config.js`, specifically the `apiKey`, `host` and `appName`.
+
+Finally, you can start the dev server with the following command:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+## Accessing the app
+
+Open [http://localhost:3001](http://localhost:3001) with your browser to see the sales app.
+
+Look in the API routes (`pages/api/sales.ts` and `pages/api/salespeople.ts`) to see how this is integrated with Budibase.
+There is also a utility file where some core functions and types have been defined, in `utilities/index.ts`.
+
+## Attribution
+This example was set up using [Next.js](https://nextjs.org/) and bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

examples/nextjs-api-sales/components/layout.tsx

@@ -0,0 +1,42 @@
+import Link from "next/link"
+import Image from "next/image"
+import { ReactNotifications } from "react-notifications-component"
+
+function layout(props: any) {
+  return (
+    <>
+      <nav className="navbar" role="navigation" aria-label="main navigation">
+        <div id="navbar" className="navbar-menu">
+          <div className="logo">
+            <Image alt="logo" src="/bb-emblem.svg" width="50" height="50" />
+          </div>
+          <div className="navbar-start">
+            <Link href="/">
+              <a className="navbar-item">
+                List
+              </a>
+            </Link>
+            <Link href="/save">
+              <a className="navbar-item">
+                New sale
+              </a>
+            </Link>
+          </div>
+          <div className="navbar-end">
+            <div className="navbar-item">
+              <div className="buttons">
+                <a className="button is-primary" href="https://budibase.readme.io/reference">
+                  <strong>API Documentation</strong>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </nav>
+      <ReactNotifications />
+      {props.children}
+    </>
+  )
+}
+
+export default layout

examples/nextjs-api-sales/components/notifications.ts

@@ -0,0 +1,28 @@
+import { Store } from "react-notifications-component"
+
+const notifications = {
+  error: (error: string, title: string) => {
+    Store.addNotification({
+      container: "top-right",
+      type: "danger",
+      message: error,
+      title: title,
+      dismiss: {
+        duration: 10000,
+      },
+    })
+  },
+  success: (message: string, title: string) => {
+    Store.addNotification({
+      container: "top-right",
+      type: "success",
+      message: message,
+      title: title,
+      dismiss: {
+        duration: 3000,
+      },
+    })
+  },
+}
+
+export default notifications

examples/nextjs-api-sales/db/docker-compose.yml

@@ -0,0 +1,17 @@
+version: "3.8"
+services:
+  db:
+    container_name: postgres
+    image: postgres
+    restart: always
+    environment:
+      POSTGRES_USER: root
+      POSTGRES_PASSWORD: root
+      POSTGRES_DB: postgres
+    ports:
+      - "5432:5432"
+    volumes:
+      - pg_data:/var/lib/postgresql/data/
+      - ./init.sql:/docker-entrypoint-initdb.d/init.sql
+volumes:
+  pg_data:

examples/nextjs-api-sales/db/init.sql

@@ -0,0 +1,21 @@
+CREATE TABLE IF NOT EXISTS sales_people (
+  person_id SERIAL PRIMARY KEY,
+  name varchar(200) NOT NULL
+);
+
+CREATE TABLE IF NOT EXISTS sales (
+  sale_id SERIAL PRIMARY KEY,
+  sale_name varchar(200) NOT NULL,
+  sold_by INT,
+  CONSTRAINT sold_by_fk
+    FOREIGN KEY(sold_by)
+      REFERENCES sales_people(person_id)
+);
+
+INSERT INTO sales_people (name)
+select 'Salesperson ' || id
+FROM GENERATE_SERIES(1, 50) as id;
+
+INSERT INTO sales (sale_name, sold_by)
+select 'Sale ' || id, floor(random() * 50 + 1)::int
+FROM GENERATE_SERIES(1, 200) as id;

examples/nextjs-api-sales/definitions/index.ts

@@ -0,0 +1,7 @@
+import { components } from "./openapi"
+
+export type App = components["schemas"]["applicationOutput"]["data"]
+export type Table = components["schemas"]["tableOutput"]["data"]
+export type TableSearch = components["schemas"]["tableSearch"]
+export type AppSearch = components["schemas"]["applicationSearch"]
+export type RowSearch = components["schemas"]["searchOutput"]

examples/nextjs-api-sales/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/nextjs-api-sales/next.config.js

@@ -0,0 +1,16 @@
+const { join } = require("path")
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  sassOptions: {
+    includePaths: [join(__dirname, "styles")],
+  },
+  serverRuntimeConfig: {
+    apiKey:
+      "bf4d86af933b5ac0af0fdbe4bf7d89ff-f929752a1eeaafb00f4b5e3325097d51a44fe4b39f22ed857923409cc75414b379323a25ebfb4916",
+    appName: "sales",
+    host: "http://localhost:10000",
+  },
+}
+
+module.exports = nextConfig

examples/nextjs-api-sales/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "nextjs-api-sales",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p 3001",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "bulma": "^0.9.3",
+    "next": "12.1.0",
+    "node-fetch": "^3.2.2",
+    "node-sass": "^7.0.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-notifications-component": "^3.4.1"
+  },
+  "devDependencies": {
+    "@types/node": "17.0.21",
+    "@types/react": "17.0.39",
+    "eslint": "8.10.0",
+    "eslint-config-next": "12.1.0",
+    "typescript": "4.6.2"
+  }
+}

examples/nextjs-api-sales/pages/_app.tsx

@@ -0,0 +1,17 @@
+import "../styles/global.sass"
+import type { AppProps } from "next/app"
+import Head from "next/head"
+import Layout from "../components/layout"
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <Layout>
+      <Head>
+        <title>BB NextJS Sales Example</title>
+      </Head>
+      <Component {...pageProps} />
+    </Layout>
+  )
+}
+
+export default MyApp

examples/nextjs-api-sales/pages/api/sales.ts

@@ -0,0 +1,46 @@
+import { getApp, findTable, makeCall } from "../../utilities"
+
+async function getSales(req: any) {
+  const { page } = req.query
+  const { _id: appId } = await getApp()
+  const table = await findTable(appId, "sales")
+  return await makeCall("post", `tables/${table._id}/rows/search`, {
+    appId,
+    body: {
+      limit: 10,
+      sort: {
+        type: "string",
+        order: "descending",
+        column: "sale_id",
+      },
+      paginate: true,
+      bookmark: parseInt(page),
+    },
+  })
+}
+
+async function saveSale(req: any) {
+  const { _id: appId } = await getApp()
+  const table = await findTable(appId, "sales")
+  return await makeCall("post", `tables/${table._id}/rows`, {
+    body: req.body,
+    appId,
+  })
+}
+
+export default async function handler(req: any, res: any) {
+  let response: any = {}
+  try {
+    if (req.method === "POST") {
+      response = await saveSale(req)
+    } else if (req.method === "GET") {
+      response = await getSales(req)
+    } else {
+      res.status(404)
+      return
+    }
+    res.status(200).json(response)
+  } catch (err: any) {
+    res.status(400).send(err)
+  }
+}

examples/nextjs-api-sales/pages/api/salespeople.ts

@@ -0,0 +1,31 @@
+import { getApp, findTable, makeCall } from "../../utilities"
+
+async function getSalespeople() {
+  const { _id: appId } = await getApp()
+  const table = await findTable(appId, "sales_people")
+  return await makeCall("post", `tables/${table._id}/rows/search`, {
+    appId,
+    body: {
+      sort: {
+        type: "string",
+        order: "ascending",
+        column: "person_id",
+      },
+    },
+  })
+}
+
+export default async function handler(req: any, res: any) {
+  let response: any = {}
+  try {
+    if (req.method === "GET") {
+      response = await getSalespeople()
+    } else {
+      res.status(404)
+      return
+    }
+    res.status(200).json(response)
+  } catch (err: any) {
+    res.status(400).send(err)
+  }
+}

examples/nextjs-api-sales/pages/index.tsx

@@ -0,0 +1,83 @@
+import type { NextPage } from "next"
+import styles from "../styles/home.module.css"
+import { useState, useEffect, useCallback } from "react"
+import Notifications from "../components/notifications"
+
+const Home: NextPage = () => {
+  const [sales, setSales] = useState([])
+  const [currentPage, setCurrentPage] = useState(1)
+  const [loaded, setLoaded] = useState(false)
+
+  const getSales = useCallback(async (page: Number = 1) => {
+    let url = "/api/sales"
+    if (page) {
+      url += `?page=${page}`
+    }
+    const response = await fetch(url)
+    if (!response.ok) {
+      const error = await response.text()
+      Notifications.error(error, "Failed to get sales")
+      return
+    }
+    const sales = await response.json()
+    // @ts-ignore
+    setCurrentPage(page)
+    return setSales(sales.data)
+  }, [])
+
+  const goToNextPage = useCallback(async () => {
+    await getSales(currentPage + 1)
+  }, [currentPage, getSales])
+
+  const goToPrevPage = useCallback(async () => {
+    if (currentPage > 1) {
+      await getSales(currentPage - 1)
+    }
+  }, [currentPage, getSales])
+
+  useEffect(() => {
+    getSales().then(() => {
+      setLoaded(true)
+    }).catch(() => {
+      setSales([])
+    })
+  }, [])
+
+  if (!loaded) {
+    return null
+  }
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.tableSection}>
+        <h1 className="subtitle">Sales</h1>
+        <div className={styles.table}>
+          <table className="table">
+            <thead>
+              <tr>
+                <th>Sale ID</th>
+                <th>name</th>
+                <th>Sold by</th>
+              </tr>
+            </thead>
+            <tbody>
+              {sales.map((sale: any) =>
+                <tr key={sale.sale_id}>
+                  <th>{sale.sale_id}</th>
+                  <th>{sale.sale_name}</th>
+                  <th>{sale.sales_person?.map((person: any) => person.primaryDisplay)[0]}</th>
+                </tr>
+              )}
+            </tbody>
+          </table>
+          <div className={styles.buttons}>
+            <button className="button" onClick={goToPrevPage}>Prev Page</button>
+            <button className="button" onClick={goToNextPage}>Next Page</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Home

examples/nextjs-api-sales/pages/save.tsx

@@ -0,0 +1,81 @@
+import type { NextPage } from "next"
+import { useCallback, useEffect, useState } from "react"
+import styles from "../styles/save.module.css"
+import Notifications from "../components/notifications"
+
+const Save: NextPage = () => {
+  const [salespeople, setSalespeople] = useState([])
+  const [loaded, setLoaded] = useState(false)
+
+  const saveSale = useCallback(async (event: any) => {
+    event.preventDefault()
+    const sale = {
+      sale_name: event.target.name.value,
+      sales_person: [event.target.soldBy.value],
+    }
+    const response = await fetch("/api/sales", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(sale),
+    })
+    if (!response.ok) {
+      const error = await response.text()
+      Notifications.error(error, "Failed to save sale")
+      return
+    }
+    Notifications.success("Sale saved successfully!", "Sale saved")
+  }, [])
+
+  const getSalespeople = useCallback(async () => {
+    const response: any = await fetch("/api/salespeople")
+    if (!response.ok) {
+      throw new Error(await response.text())
+    }
+    const json = await response.json()
+    setSalespeople(json.data)
+  }, [])
+
+  useEffect(() => {
+    getSalespeople().then(() => {
+      setLoaded(true)
+    }).catch(() => {
+      setSalespeople([])
+    })
+  }, [])
+
+  if (!loaded) {
+    return null
+  }
+  return (
+    <div className={styles.container}>
+      <div className={styles.formSection}>
+        <h1 className="subtitle">New sale</h1>
+        <form onSubmit={saveSale}>
+          <div className="field">
+            <label className="label">Name</label>
+            <div className="control">
+              <input id="name" className="input" type="text" placeholder="Text input" />
+            </div>
+          </div>
+          <div className="field">
+            <label className="label">Sold by</label>
+            <div className="control">
+              <div className="select">
+                <select id="soldBy">
+                  {salespeople.map((person: any) => <option key={person._id} value={person._id}>{person.name}</option>)}
+                </select>
+              </div>
+            </div>
+          </div>
+          <div className="control">
+            <button className="button is-link">Submit</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+export default Save

examples/nextjs-api-sales/public/bb-emblem.svg

@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#393C44;}
+	.st1{fill:#FFFFFF;}
+	.st2{fill:#4285F4;}
+</style>
+<rect x="-152.17" y="-24.17" class="st0" width="96.17" height="96.17"/>
+<path class="st1" d="M-83.19,48h-41.79c-1.76,0-3.19-1.43-3.19-3.19V3.02c0-1.76,1.43-3.19,3.19-3.19h41.79
+	c1.76,0,3.19,1.43,3.19,3.19v41.79C-80,46.57-81.43,48-83.19,48z"/>
+<g>
+	<g>
+		<path class="st0" d="M-99.62,12.57v9.94c1.15-1.21,2.59-1.81,4.32-1.81c1.03,0,1.97,0.19,2.82,0.58c0.86,0.39,1.59,0.91,2.19,1.57
+			c0.6,0.66,1.08,1.43,1.42,2.32c0.34,0.89,0.51,1.84,0.51,2.85c0,1.03-0.18,1.99-0.53,2.89c-0.35,0.9-0.84,1.68-1.47,2.35
+			c-0.63,0.67-1.37,1.19-2.23,1.58c-0.86,0.39-1.78,0.58-2.77,0.58c-1.8,0-3.22-0.66-4.27-1.97V35h-4.89V12.57H-99.62z
+			 M-93.46,28.11c0-0.43-0.08-0.84-0.24-1.23c-0.16-0.39-0.39-0.72-0.68-1.01c-0.29-0.29-0.62-0.52-1-0.69
+			c-0.38-0.17-0.79-0.26-1.24-0.26c-0.43,0-0.84,0.08-1.22,0.24c-0.38,0.16-0.71,0.39-0.99,0.68c-0.28,0.29-0.5,0.63-0.68,1.01
+			c-0.17,0.39-0.26,0.8-0.26,1.23c0,0.43,0.08,0.84,0.24,1.22c0.16,0.38,0.39,0.71,0.68,0.99c0.29,0.28,0.63,0.5,1.01,0.68
+			c0.39,0.17,0.8,0.26,1.23,0.26c0.43,0,0.84-0.08,1.22-0.24c0.38-0.16,0.71-0.39,0.99-0.68c0.28-0.29,0.5-0.62,0.68-1
+			C-93.55,28.92-93.46,28.52-93.46,28.11z"/>
+	</g>
+	<g>
+		<path class="st0" d="M-114.76,12.57v9.94c1.15-1.21,2.59-1.81,4.32-1.81c1.03,0,1.97,0.19,2.82,0.58
+			c0.86,0.39,1.59,0.91,2.19,1.57c0.6,0.66,1.08,1.43,1.42,2.32c0.34,0.89,0.51,1.84,0.51,2.85c0,1.03-0.18,1.99-0.53,2.89
+			c-0.35,0.9-0.84,1.68-1.47,2.35c-0.63,0.67-1.37,1.19-2.23,1.58c-0.86,0.39-1.78,0.58-2.77,0.58c-1.8,0-3.22-0.66-4.27-1.97V35
+			h-4.89V12.57H-114.76z M-108.6,28.11c0-0.43-0.08-0.84-0.24-1.23c-0.16-0.39-0.39-0.72-0.68-1.01c-0.29-0.29-0.62-0.52-1-0.69
+			c-0.38-0.17-0.79-0.26-1.24-0.26c-0.43,0-0.84,0.08-1.22,0.24c-0.38,0.16-0.71,0.39-0.99,0.68c-0.28,0.29-0.5,0.63-0.68,1.01
+			c-0.17,0.39-0.26,0.8-0.26,1.23c0,0.43,0.08,0.84,0.24,1.22c0.16,0.38,0.39,0.71,0.68,0.99c0.29,0.28,0.63,0.5,1.01,0.68
+			c0.39,0.17,0.8,0.26,1.23,0.26c0.43,0,0.84-0.08,1.22-0.24c0.38-0.16,0.71-0.39,0.99-0.68c0.28-0.29,0.5-0.62,0.68-1
+			C-108.68,28.92-108.6,28.52-108.6,28.11z"/>
+	</g>
+</g>
+<path class="st2" d="M44.81,159H3.02c-1.76,0-3.19-1.43-3.19-3.19v-41.79c0-1.76,1.43-3.19,3.19-3.19h41.79
+	c1.76,0,3.19,1.43,3.19,3.19v41.79C48,157.57,46.57,159,44.81,159z"/>
+<g>
+	<g>
+		<path class="st1" d="M28.38,123.57v9.94c1.15-1.21,2.59-1.81,4.32-1.81c1.03,0,1.97,0.19,2.82,0.58c0.86,0.39,1.59,0.91,2.19,1.57
+			c0.6,0.66,1.08,1.43,1.42,2.32c0.34,0.89,0.51,1.84,0.51,2.85c0,1.03-0.18,1.99-0.53,2.89c-0.35,0.9-0.84,1.68-1.47,2.35
+			c-0.63,0.67-1.37,1.19-2.23,1.58c-0.86,0.39-1.78,0.58-2.77,0.58c-1.8,0-3.22-0.66-4.27-1.97V146h-4.89v-22.43H28.38z
+			 M34.54,139.11c0-0.43-0.08-0.84-0.24-1.23c-0.16-0.39-0.39-0.72-0.68-1.01c-0.29-0.29-0.62-0.52-1-0.69
+			c-0.38-0.17-0.79-0.26-1.24-0.26c-0.43,0-0.84,0.08-1.22,0.24c-0.38,0.16-0.71,0.39-0.99,0.68c-0.28,0.29-0.5,0.63-0.68,1.01
+			c-0.17,0.39-0.26,0.8-0.26,1.23c0,0.43,0.08,0.84,0.24,1.22c0.16,0.38,0.39,0.71,0.68,0.99c0.29,0.28,0.63,0.5,1.01,0.68
+			c0.39,0.17,0.8,0.26,1.23,0.26c0.43,0,0.84-0.08,1.22-0.24c0.38-0.16,0.71-0.39,0.99-0.68c0.28-0.29,0.5-0.62,0.68-1
+			C34.45,139.92,34.54,139.52,34.54,139.11z"/>
+	</g>
+	<g>
+		<path class="st1" d="M13.24,123.57v9.94c1.15-1.21,2.59-1.81,4.32-1.81c1.03,0,1.97,0.19,2.82,0.58c0.86,0.39,1.59,0.91,2.19,1.57
+			c0.6,0.66,1.08,1.43,1.42,2.32c0.34,0.89,0.51,1.84,0.51,2.85c0,1.03-0.18,1.99-0.53,2.89c-0.35,0.9-0.84,1.68-1.47,2.35
+			c-0.63,0.67-1.37,1.19-2.23,1.58c-0.86,0.39-1.78,0.58-2.77,0.58c-1.8,0-3.22-0.66-4.27-1.97V146H8.35v-22.43H13.24z M19.4,139.11
+			c0-0.43-0.08-0.84-0.24-1.23c-0.16-0.39-0.39-0.72-0.68-1.01c-0.29-0.29-0.62-0.52-1-0.69c-0.38-0.17-0.79-0.26-1.24-0.26
+			c-0.43,0-0.84,0.08-1.22,0.24c-0.38,0.16-0.71,0.39-0.99,0.68c-0.28,0.29-0.5,0.63-0.68,1.01c-0.17,0.39-0.26,0.8-0.26,1.23
+			c0,0.43,0.08,0.84,0.24,1.22c0.16,0.38,0.39,0.71,0.68,0.99c0.29,0.28,0.63,0.5,1.01,0.68c0.39,0.17,0.8,0.26,1.23,0.26
+			c0.43,0,0.84-0.08,1.22-0.24c0.38-0.16,0.71-0.39,0.99-0.68c0.28-0.29,0.5-0.62,0.68-1C19.32,139.92,19.4,139.52,19.4,139.11z"/>
+	</g>
+</g>
+<g>
+	<path class="st0" d="M44,48H4c-2.21,0-4-1.79-4-4V4c0-2.21,1.79-4,4-4h40c2.21,0,4,1.79,4,4v40C48,46.21,46.21,48,44,48z"/>
+	<g>
+		<path class="st1" d="M28.48,12v10.44c1.18-1.27,2.65-1.9,4.42-1.9c1.05,0,2.01,0.2,2.89,0.61c0.87,0.41,1.62,0.96,2.24,1.65
+			c0.62,0.69,1.1,1.5,1.45,2.44c0.35,0.94,0.52,1.93,0.52,2.99c0,1.08-0.18,2.09-0.54,3.04c-0.36,0.95-0.86,1.77-1.51,2.47
+			c-0.64,0.7-1.4,1.25-2.28,1.66C34.8,35.8,33.86,36,32.84,36c-1.84,0-3.3-0.69-4.37-2.07v1.62h-5V12H28.48z M34.78,28.31
+			c0-0.45-0.08-0.88-0.25-1.29c-0.17-0.41-0.4-0.76-0.69-1.06c-0.3-0.3-0.64-0.54-1.02-0.72c-0.39-0.18-0.81-0.27-1.27-0.27
+			c-0.44,0-0.86,0.09-1.24,0.26c-0.39,0.17-0.72,0.41-1.01,0.71c-0.29,0.3-0.52,0.66-0.69,1.06c-0.18,0.41-0.26,0.84-0.26,1.29
+			s0.08,0.88,0.25,1.28c0.17,0.4,0.4,0.74,0.69,1.04c0.29,0.29,0.64,0.53,1.04,0.71c0.4,0.18,0.82,0.27,1.26,0.27
+			c0.44,0,0.86-0.09,1.24-0.26c0.39-0.17,0.72-0.41,1.01-0.71c0.29-0.3,0.52-0.65,0.69-1.05C34.69,29.16,34.78,28.75,34.78,28.31z"
+			/>
+	</g>
+	<g>
+		<path class="st1" d="M13,12v10.44c1.18-1.27,2.65-1.9,4.42-1.9c1.05,0,2.01,0.2,2.89,0.61c0.87,0.41,1.62,0.96,2.24,1.65
+			c0.62,0.69,1.1,1.5,1.45,2.44c0.35,0.94,0.52,1.93,0.52,2.99c0,1.08-0.18,2.09-0.54,3.04c-0.36,0.95-0.86,1.77-1.51,2.47
+			c-0.64,0.7-1.4,1.25-2.28,1.66C19.32,35.8,18.38,36,17.37,36c-1.84,0-3.3-0.69-4.37-2.07v1.62H8V12H13z M19.3,28.31
+			c0-0.45-0.08-0.88-0.25-1.29c-0.17-0.41-0.4-0.76-0.69-1.06c-0.3-0.3-0.64-0.54-1.02-0.72c-0.39-0.18-0.81-0.27-1.27-0.27
+			c-0.44,0-0.86,0.09-1.24,0.26c-0.39,0.17-0.72,0.41-1.01,0.71c-0.29,0.3-0.52,0.66-0.69,1.06c-0.18,0.41-0.26,0.84-0.26,1.29
+			s0.08,0.88,0.25,1.28c0.17,0.4,0.4,0.74,0.69,1.04c0.29,0.29,0.64,0.53,1.04,0.71c0.4,0.18,0.82,0.27,1.26,0.27
+			c0.44,0,0.86-0.09,1.24-0.26c0.39-0.17,0.72-0.41,1.01-0.71c0.29-0.3,0.52-0.65,0.69-1.05C19.21,29.16,19.3,28.75,19.3,28.31z"/>
+	</g>
+</g>
+</svg>

examples/nextjs-api-sales/styles/global.sass

@@ -0,0 +1,26 @@
+@charset "utf-8"
+
+@import url('https://fonts.googleapis.com/css?family=Roboto:400,700')
+$family-sans-serif: "Roboto", sans-serif
+
+#__next
+  display: flex
+  flex-direction: column
+  justify-content: flex-start
+  align-items: stretch
+  height: 100vh
+  --bg-color: #f5f5f5
+
+.logo
+  padding: 0.75rem
+
+@import "../node_modules/bulma/bulma.sass"
+@import "../node_modules/react-notifications-component/dist/theme.css"
+
+// applied after bulma styles are enabled
+html
+  overflow-y: auto
+
+.navbar
+  background-color: var(--bg-color)
+  color: white

examples/nextjs-api-sales/styles/home.module.css

@@ -0,0 +1,30 @@
+.container {
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  padding: 5rem 2rem 0;
+  align-items: center;
+  flex: 1 1 auto;
+}
+
+.buttons {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.tableSection {
+  padding: 2rem;
+  background: var(--bg-color);
+  width: 800px;
+  border-radius: 10px;
+}
+
+.table table {
+  width: 100%;
+}
+
+.tableSection h1 {
+  text-align: center;
+  color: black;
+}

examples/nextjs-api-sales/styles/save.module.css

@@ -0,0 +1,20 @@
+.container {
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  padding: 5rem 2rem 0;
+  align-items: center;
+  flex: 1 1 auto;
+}
+
+.formSection {
+  padding: 2rem;
+  background: var(--bg-color);
+  width: 400px;
+  border-radius: 10px;
+}
+
+.formSection h1 {
+  text-align: center;
+  color: black;
+}

examples/nextjs-api-sales/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

examples/nextjs-api-sales/utilities/index.ts

@@ -0,0 +1,82 @@
+import { App, AppSearch, Table, TableSearch } from "../definitions"
+import getConfig from "next/config"
+
+const { serverRuntimeConfig } = getConfig()
+const apiKey = serverRuntimeConfig["apiKey"]
+const appName = serverRuntimeConfig["appName"]
+const host = serverRuntimeConfig["host"]
+
+let APP: App | null = null
+let TABLES: { [key: string]: Table } = {}
+
+export async function makeCall(
+  method: string,
+  url: string,
+  opts?: { body?: any; appId?: string }
+): Promise<any> {
+  const fetchOpts: any = {
+    method,
+    headers: {
+      "x-budibase-api-key": apiKey,
+    },
+  }
+  if (opts?.appId) {
+    fetchOpts.headers["x-budibase-app-id"] = opts.appId
+  }
+  if (opts?.body) {
+    fetchOpts.body =
+      typeof opts.body !== "string" ? JSON.stringify(opts.body) : opts.body
+    fetchOpts.headers["Content-Type"] = "application/json"
+  }
+  const finalUrl = `${host}/api/public/v1/${url}`
+  const response = await fetch(finalUrl, fetchOpts)
+  if (response.ok) {
+    return response.json()
+  } else {
+    const error = await response.text()
+    console.error("Budibase server error - ", error)
+    throw new Error(error)
+  }
+}
+
+export async function getApp(): Promise<App> {
+  if (APP) {
+    return APP
+  }
+  const apps: AppSearch = await makeCall("post", "applications/search", {
+    body: {
+      name: appName,
+    },
+  })
+  const app = apps.data.find((app: App) => app.name === appName)
+  if (!app) {
+    throw new Error(
+      "Could not find app, please make sure app name in config is correct."
+    )
+  }
+  APP = app
+  return app
+}
+
+export async function findTable(
+  appId: string,
+  tableName: string
+): Promise<Table> {
+  if (TABLES[tableName]) {
+    return TABLES[tableName]
+  }
+  const tables: TableSearch = await makeCall("post", "tables/search", {
+    body: {
+      name: tableName,
+    },
+    appId,
+  })
+  const table = tables.data.find((table: Table) => table.name === tableName)
+  if (!table) {
+    throw new Error(
+      "Could not find table, please make sure your app is configured with the Postgres datasource correctly."
+    )
+  }
+  TABLES[tableName] = table
+  return table
+}

package.json

@@ -39,7 +39,7 @@
     "lint:prettier": "prettier --check \"packages/**/*.{js,ts,svelte}\"",
     "lint": "yarn run lint:eslint && yarn run lint:prettier",
     "lint:fix:eslint": "eslint --fix packages",
-    "lint:fix:prettier": "prettier --write \"packages/**/*.{js,ts,svelte}\"",
+    "lint:fix:prettier": "prettier --write \"packages/**/*.{js,ts,svelte}\" && prettier --write \"examples/**/*.{js,ts,svelte}\"",
     "lint:fix:ts": "lerna run lint:fix",
     "lint:fix": "yarn run lint:fix:ts && yarn run lint:fix:prettier && yarn run lint:fix:eslint",
     "test:e2e": "lerna run cy:test --stream",