Xata•9mo ago

Route handlers in Next.js

How do I use route handlers in next.js to post data to Xata?

15 Replies

Hey there. Check out our sample gallery app built with Next JS. It has a bunch of route handlers to manage interacting with Xata. https://github.com/xataio/sample-nextjs-chakra-gallery-app

GitHub

GitHub - xataio/sample-nextjs-chakra-gallery-app: Gallery applicati...

Gallery application built with Xata, Next.js and Chakra UI - xataio/sample-nextjs-chakra-gallery-app

teriOP•9mo ago

Testing if it works. I am currently getting null sent to data in the fields. I am getting null in my DB fields anytime I send the data.

import { getXataClient } from "@/src/xata";
import { NextResponse } from "next/server";

const xata = getXataClient();

export async function POST(request) {
  const { city, country } = request.body;

  await xata.db.trips.create({
    city,
    country,
  });

  return NextResponse.json({ success: true });
}

import { getXataClient } from "@/src/xata";
import { NextResponse } from "next/server";

const xata = getXataClient();

export async function POST(request) {
  const { city, country } = request.body;

  await xata.db.trips.create({
    city,
    country,
  });

  return NextResponse.json({ success: true });
}

@Enemykite

Dave Snider•9mo ago

hard for me to diagnose without access to the rest of your application. i would start by console.loging your city and country before you send them to xata to see if they have values. if you're sending null values to xata, it will record them as such

teriOP•9mo ago

Can I push my code to GitHub so you can see the issues I am currently facing?

teriOP•9mo ago

I had to use the JavaScript fetch method and it started saving in Xata.

kostas•9mo ago

So it worked with plain fetch but doesn't work using the xata client? Make sure you have the latest updates in your local client file (xata.ts). If you edited the schema from the Xata UI after initialization (xata init) the columns won't be available in your local client file. The command "xata codegen" or "xata pull main" updates the client file with the latest schema from Xata. Also, did you try logging the city and country like Dave suggested above to make sure the objects passed to the create call contain values?

teriOP•9mo ago

I did the updates to the local. Yes, I did log them out.

teriOP•9mo ago

How can I use environment variables in next.js, passing the values in the bearer token without logging out Cors errors because it is not saving to the DB? Also, I am having issues creating a route handler in the /api/route.js file. @kostas

kostas•9mo ago

The Xata client should pick up the env variable automatically, either set in a local .env file or from the XATA_API_KEY env variable. There is an example here for explicitly passing client config parameters though, for frameworks where env variables containing the apiKey and databaseURL aren't picking up automatically (although this shouldn't happen with Next.js!): https://xata.io/docs/sdk/typescript/overview#configuration Make sure you're on the latest version of the Xata CLI and Client (npm -g install @xata.io/cli@latest , npm -i @xata.io/client@latest, or set those in package.json as well) If the issue persists, could you perhaps place your code in a github repo so we can have a look? Also, make sure your node version is 18 or above: https://xata.io/docs/sdk/typescript/overview#providing-a-fetch-implementation

teriOP•9mo ago

Here is the code https://github.com/Terieyenike/track-trip-dashboard-with-xata-next @kostas

GitHub

GitHub - Terieyenike/track-trip-dashboard-with-xata-next: Keep trac...

Keep track of all your adventures, never forget the amazing memories. - Terieyenike/track-trip-dashboard-with-xata-next

kostas•9mo ago

Thanks for this! Here are some things to consider: - Xata should not be called from the client side. This is what causes CORS errors, and it also exposes the api key to the browser (see screenshot, the API key can be seen in the request headers - Intentionally hid those in the screenshot), which should never happen. In your app here: https://github.com/Terieyenike/track-trip-dashboard-with-xata-next/blob/main/app/(custom)/dashboard/trip/create/page.js#L1C2-L1C14 the create trip route should run server-side. This blog post discusses the concept in more detail: https://xata.io/blog/securely-querying-your-database-on-xata - Check out this simple example app: https://github.com/xataio/examples/tree/main/apps/getting-started-nextjs for using xata with NextJS and the app router. For example, here you can see a posts route: https://github.com/xataio/examples/blob/main/apps/getting-started-nextjs/src/app/posts/%5Bslug%5D/page.tsx, it performs a query instead of a create call but the concept is the same. - The fetch implementation here https://github.com/Terieyenike/track-trip-dashboard-with-xata-next/blob/main/utils/api.js#L6 does work but will be much simpler to manage using the Xata SDK. See in the second screenshot what I changed to make things work with the Xata SDK.

kostas•9mo ago

Still, the fact that it works using Xata SDK from the client side doesn't mean it's how it should be done! The xata calls should be moved server-side, otherwise your API key will be sniffed and stolen. To make things work, I used JavaScript import syntax during "xata init"

teriOP•9mo ago

Thanks for this, @kostas. I will revert and let you know once I finish the refactoring.

teriOP•9mo ago

Hey @kostas, I have fixed the issue, and it works without the cors warning. https://track-trip-dashboard-with-xata-next.vercel.app/dashboard

Track your travel

Keep track of all your adventures, never forget the amazing memories

kostas•9mo ago

Awesome! That's great progress @teri , glad to see the dashboard working smoothly now!

Gaming

Programming

Route handlers in Next.js