From a45bf8c93bd5b28cf9aa9dcb4a0df06af41a7cac Mon Sep 17 00:00:00 2001 From: Alexis Rico Date: Thu, 1 Dec 2022 20:34:23 +0100 Subject: [PATCH] Fix deploy button in with-xata example (#43608) The deploy button of the `with-xata` example is not working properly because we were lacking the integration to configure the env variables. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/SferaDev/nextjs-demo/tree/fix-with-xata-deploy/examples/with-xata&project-name=with-xata&repository-name=with-xata&integration-ids=oac_IDpMECDuYqBvAtu3wXXMQe0J) Taking advantage of the PR, some other changes: - Adding `alt` to `next/image` to fix build with latest version - Update readme to add more information in the Xata CLI section - Use a new command to initialize the database schema on first deployment - Remove hardcoded URL in `xata.codegen.ts` - Remove deprecated `formatVersion` in `schema.template.json` - Update dependencies Note: The integration is still work in progress, it works for the `Deploy to Vercel` button but we want to improve the UI/UX before submitting it to the Marketplace, keeping it unlisted for a while. --- examples/with-xata/README.md | 16 +++++++++++----- examples/with-xata/package.json | 18 ++++++++---------- examples/with-xata/pages/index.tsx | 2 +- examples/with-xata/schema.template.json | 1 - examples/with-xata/utils/xata.codegen.ts | 4 +--- 5 files changed, 21 insertions(+), 20 deletions(-) diff --git a/examples/with-xata/README.md b/examples/with-xata/README.md index 0faed3c1c9e9..7ae858c59985 100644 --- a/examples/with-xata/README.md +++ b/examples/with-xata/README.md @@ -14,7 +14,7 @@ With this template you get out-of-the-box: Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-xata) -[![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-xata&project-name=with-xata&repository-name=with-xata) +[![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-xata&project-name=with-xata&repository-name=with-xata&integration-ids=oac_IDpMECDuYqBvAtu3wXXMQe0J) ## Demo @@ -36,15 +36,21 @@ yarn create next-app --example with-xata with-xata-app pnpm create next-app --example with-xata with-xata-app ``` -### Link Your Xata Workspace and Run Codegen +### Link With Your Xata Workspace And Update Types -> 💡 consider [installing the Xata CLI globally](https://xata.io/docs/cli/getting-started), it will likely improve your experience managing your databases +> 💡 We recommend installing the [Xata CLI](https://xata.io/docs/cli/getting-started) globally, but you can also use `npx @xata.io/cli` instead of `xata` in the commands below. + +You can link your project with a Xata workspace by running the following command: ```sh -npm run start:xata +xata init ``` -> ⚠️ once linked, you can just run `xata` to re-generate types. +To update your types, run the following command: + +```sh +xata codegen +``` ### Start Coding diff --git a/examples/with-xata/package.json b/examples/with-xata/package.json index 761098f5dc61..78d6356bfd0f 100644 --- a/examples/with-xata/package.json +++ b/examples/with-xata/package.json @@ -4,21 +4,19 @@ "dev": "next dev", "build": "next build", "start": "next start", - "start:xata": "xata init --schema=schema.template.json --codegen=utils/xata.codegen.ts", - "poststart:xata": "xata codegen", - "xata": "xata codegen" + "xata": "xata codegen", + "postinstall": "npx @xata.io/cli@latest schema upload schema.template.json --branch main --create-only --yes" }, "devDependencies": { - "@types/node": "18.6.5", - "@types/react": "18.0.17", - "@types/react-dom": "18.0.6", - "@xata.io/cli": "0.8.1", - "eslint": "8.21.0", + "@types/node": "18.11.10", + "@types/react": "18.0.25", + "@types/react-dom": "18.0.9", + "eslint": "8.28.0", "eslint-config-next": "latest", - "typescript": "4.7.4" + "typescript": "4.9.3" }, "dependencies": { - "@xata.io/client": "^0.16.1", + "@xata.io/client": "^0.21.3", "next": "latest", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/with-xata/pages/index.tsx b/examples/with-xata/pages/index.tsx index 0aaa079fde26..6d1034416fb1 100644 --- a/examples/with-xata/pages/index.tsx +++ b/examples/with-xata/pages/index.tsx @@ -31,7 +31,7 @@ export default function IndexPage({ return (
- + {'Xata'}

Next.js with‑xata

diff --git a/examples/with-xata/schema.template.json b/examples/with-xata/schema.template.json index d99f18f8d762..fef44e38172d 100644 --- a/examples/with-xata/schema.template.json +++ b/examples/with-xata/schema.template.json @@ -1,5 +1,4 @@ { - "formatVersion": "", "tables": [ { "name": "nextjs_with_xata_example", diff --git a/examples/with-xata/utils/xata.codegen.ts b/examples/with-xata/utils/xata.codegen.ts index 7402f35ccfad..8a3f7529aa27 100644 --- a/examples/with-xata/utils/xata.codegen.ts +++ b/examples/with-xata/utils/xata.codegen.ts @@ -24,9 +24,7 @@ export type NextjsWithXataExampleRecord = NextjsWithXataExample & XataRecord const DatabaseClient = buildClient() -const defaultOptions = { - databaseURL: 'https://xata-uq2d57.xata.sh/db/examples', -} +const defaultOptions = {} export class XataClient extends DatabaseClient { constructor(options?: BaseClientOptions) {