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.

2022-12-01 11:34:23 -08:00

2.4 KiB

Raw Blame History

Next.js + Xata

This example showcases how to use Next.js with Xata as your data layer.

With this template you get out-of-the-box:

API Route to connect to your Xata database
Type-safe Codegen
Accessibility-Ready
- Dark/Light mode
- Respects prefers-reduce-motion for CSS Transitions

Deploy your own

Deploy the example using Vercel or preview live with StackBlitz

Demo

nextjs-with-xata.vercel.app

How to use

Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:

npx create-next-app --example with-xata with-xata-app

yarn create next-app --example with-xata with-xata-app

pnpm create next-app --example with-xata with-xata-app

Link With Your Xata Workspace And Update Types

💡 We recommend installing the Xata CLI 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:

xata init

To update your types, run the following command:

xata codegen

Start Coding

Open http://localhost:3000 to view it in the browser.

💡 the template will prompt you to create a dummy new table (nextjs_with_xata_example) with some useful resources.

Notes

Some tips that may help you develop your app.

The Xata VS Code Extension will make managing your data more comfortable
Prefer fetching data from getServerSideProps() or getStaticProps()
Create a Serverless Route(s) to handle data mutations

Deploy it to the cloud with Vercel (Documentation).

2.4 KiB Raw Blame History