Xata•2y ago

Route handlers in Next.js

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

Dave Snider•3/30/24, 11:59 AM

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•3/30/24, 6:53 PM

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

teriOP•3/31/24, 8:29 AM

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•3/31/24, 1:03 PM

hard for me to diagnose without access to the rest of your application. i would start by

console.log

console.log

ing your city and country before you send them to xata to see if they have values.

Dave Snider•3/31/24, 1:04 PM

if you're sending null values to xata, it will record them as such

DDave Snider hard for me to diagnose without access to the rest of your application. i would ...

teriOP•3/31/24, 1:08 PM

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

teriOP•3/31/24, 2:58 PM

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

kostas•4/1/24, 8:24 AM

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 initxata 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•4/9/24, 3:34 PM

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

teriOP•4/9/24, 3:37 PM

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•4/10/24, 8:53 AM

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?

kostas•4/10/24, 8:57 AM

Also, make sure your node version is 18 or above: https://xata.io/docs/sdk/typescript/overview#providing-a-fetch-implementation

teriOP•4/10/24, 2:34 PM

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•4/10/24, 3:21 PM

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•4/10/24, 3:24 PM

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.

kostas•4/10/24, 3:26 PM

To make things work, I used JavaScript import syntaxJavaScript import syntax during "xata init"

teriOP•4/10/24, 4:12 PM

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

teriOP•4/18/24, 2:15 PM

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•4/18/24, 2:37 PM

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

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 }); }

Route handlers in Next.js

Similar Threads

Similar Threads

Similar Threads