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

@@ -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
 

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"

examples/with-xata/pages/index.tsx

@@ -31,7 +31,7 @@ export default function IndexPage({
   return (
     <main>
       <header>
-        <Image src={xatafly} priority />
+        <Image src={xatafly} alt={'Xata'} priority />
         <h1>
           Next.js with<span aria-hidden>&#8209;</span>xata
         </h1>

examples/with-xata/schema.template.json

@@ -1,5 +1,4 @@
 {
-  "formatVersion": "",
   "tables": [
     {
       "name": "nextjs_with_xata_example",

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<SchemaTables> {
   constructor(options?: BaseClientOptions) {