As more and more people favor the convenience of online shopping, business owners turn to e-commerce platform builders, like Shopify, to sell more products. E-retail sales have surpassed 5.7 trillion dollars globally, and this number is only likely to rise in the upcoming years.<\/p>\n\n\n\n
In this blog post, you’ll earn how to integrate Xata and Cloudinary to Next.js to build an e-commerce storefront, the presentation layer of an online store that communicates with online customers. Next.js is a React framework used to create the user interface. Cloudinary is a robust media API used to manage media files, and Xata is a serverless database that stores users’ data.<\/p>\n\n\n\n
The source code for this application is publicly accessible on GitHub. You can clone it locally to your computer. This article will concentrate on how we will be utilizing Xata and Cloudinary in the project.<\/p>\n\n\n
Cloudinary is a powerful media API for websites and mobile apps alike. Developers and marketers can effectively create, manage, and deploy their digital experiences using any browser, device, or bandwidth, thanks to Cloudinary. The architecture of Cloudinary was designed from the ground up to withstand enormous loads and manage essentially infinite amounts of assets and consumption.<\/p>\n<\/div>\n\n\n
After you clone it, you must add a Xata API key, Cloudinary cloud name, and the upload preset<\/strong> in an Upload presets can be defined as a collection of activities that would occur upon uploading a resource. These activities could include applying an add-on capability, performing a transformation, or altering a resource\u2019s access control, among many other possibilities.<\/p>\n<\/div>\n\n\n To clone the application, run the following command on the terminal:<\/p>\n\n\n Create a Start the project:<\/p>\n\n\n Xata is a serverless database with robust search and analytics. It’a comparable to a serverless relational database, a search engine, and an analytics engine, all hidden behind a uniform API.<\/p>\n\n\n\n It’s advisable to use the SDK when adding Xata to the project. We can use the SDK in many JavaScript runtimes, including Node.js, Deno, Electron, etc.<\/p>\n\n\n\n To install Xata, run the command:<\/p>\n\n\n Next, we have to authenticate Xata with the command:<\/p>\n\n\n With the stated command, you can either paste in an existing API key or create a new one by opening a browser.<\/p>\n\n\n\n Also, you will need to configure the application with the command below:<\/p>\n\n\n The command above will start a brief survey that will assist us in setting up our project. Answer the questions, and use code generation.<\/p>\n\n\n\n Now that Xata is set up in the project, you can query data with the utmost security and efficiency.<\/p>\n\n\n\n To add an API key, you’ll go to your account settings, where you can add an API key. There you will be required to submit a name to generate a key. Because your key will only be shown to you once before becoming inaccessible for security reasons, ensure you copy it to a secure area. You can invalidate and create a new key if you misplace this one.<\/p>\n\n\n\n Visit the website<\/a> to sign up for a free account, then set up your Cloudinary account. You can sign up using GitHub, Gmail, or your email address.<\/p>\n\n\n\n Next, you’ll set up your Xata account.<\/p>\n\n\n\n Visit the Xata<\/a> to register for free. You’ll see the Add a database<\/strong> card after signing up, where you’ll create your database.<\/p>\n\n\n\n Congratulations! You’ve completed the basic setup for Cloudinary and Xata. Next, you’ll insert and query data with Nextjs to Cloudinary and Xata.<\/p>\n\n\n\n Go to The above code performs authentication for users when they try to sign up. First, the Then we check if the record contains any data using Go to Like the signup page, the Users table is also queried and filtered for the login page. If no data is found, an error message is passed. If a record is found, we parse the data.<\/p>\n\n\n\n.env<\/code> file at its root if you want to execute it locally.<\/p>\n\n\ngit clone<\/span> https:\/\/github.com\/HarcourtHamsa\/Frontier.git<\/span><\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n.env<\/code> file in the root directory and paste your Xata API key:<\/p>\n\n\nXATA_API_KEY=<your<\/span> Api<\/span> key<\/span>><\/span>\nCLOUD_NAME=<your<\/span> cloudinary<\/span> cloud<\/span> name<\/span>><\/span>\nUPLOAD_PRESET=<your<\/span> cloudinary<\/span> upload<\/span> preset<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nnpm run dev<\/code><\/span><\/pre>\n\n\nAdding Xata CLI<\/h2>\n\n\n\n
npm<\/span> i<\/span> -g<\/span> @xata<\/span>.io\/cli<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nxata auth login<\/code><\/span><\/pre>\n\n\nxata init<\/code><\/span><\/pre>\n\n\n<\/a>Creating Xata API<\/h2>\n\n\n\n
<\/a>Setting Up a Cloudinary Account<\/h2>\n\n\n\n
\n
Setting Up the Xata Account<\/h2>\n\n\n\n
\n
\n
\n
\n
<\/a>Xata and Nextjs<\/h2>\n\n\n\n
<\/a>Signing Up Users<\/h3>\n\n\n\n
\/pages\/api\/auth\/register.ts<\/code>.<\/p>\n\n\nimport<\/span> { NextApiRequest, NextApiResponse } from<\/span> \"next\"<\/span>;\nimport<\/span> nc from<\/span> \"next-connect\"<\/span>;\nimport<\/span> { getXataClient } from<\/span> \"..\/..\/..\/utils\/xata.codegen\"<\/span>;\n\n\nconst<\/span> xata = getXataClient();\nconst<\/span> handler = nc().post(async<\/span> (req: NextApiRequest, res<\/span>: NextApiResponse) => {\n const<\/span> record = await<\/span> xata.db.Users.filter({\n email<\/span>: req.body.email\n }).getMany();\n if<\/span> (record.length !== 0<\/span>) {\n res.status(403<\/span>);\n res.end();\n return<\/span>;\n } else<\/span> {\n console<\/span>.log(req.body)\n const<\/span> user = await<\/span> xata.db.Users.create({\n ...req.body,\n });\n return<\/span> res.status(200<\/span>).json({ data<\/span>: user });\n }\n});\nexport<\/span> default<\/span> handler;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nUsers<\/code> table is queried from the database and then filtered based on the email gotten from the client side. The result will be an array that’s passed to the record<\/code> variable.<\/p>\n\n\n\nrecord.length<\/code>. If true, we’ll parse a 403 error code and end the process. If false, we proceed to create a new user.<\/p>\n\n\n\n<\/a>Logging in Users<\/h3>\n\n\n\n
\/pages\/api\/auth\/login.ts.<\/code><\/p>\n\n\nimport<\/span> { NextApiRequest, NextApiResponse } from<\/span> \"next\"<\/span>;\nimport<\/span> nc from<\/span> \"next-connect\"<\/span>;\nimport<\/span> Router from<\/span> \"next\/router\"<\/span>;\nimport<\/span> { getXataClient } from<\/span> \"..\/..\/..\/utils\/xata.codegen\"<\/span>;\n\nconst<\/span> xata = getXataClient();\nconst<\/span> handler = nc().post(async<\/span> (req: NextApiRequest, res<\/span>: NextApiResponse) => {\n const<\/span> record = await<\/span> xata.db.Users.filter({\n email<\/span>: req.body.email,\n }).getMany();\n\n if<\/span> (!record) {\n return<\/span> res.status(401<\/span>).json({ message<\/span>: \"Invalid email\/password\"<\/span> });\n } else<\/span> if<\/span> (record[0<\/span>].password !== req.body.password) {\n return<\/span> res.status(401<\/span>).json({ message<\/span>: \"Invalid email\/password\"<\/span> });\n } else<\/span> {\n return<\/span> res.status(200<\/span>).json({ data<\/span>: record });\n }\n});\nexport<\/span> default<\/span> handler;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n<\/a>Creating a Store<\/h3>\n\n\n\n
\/pages\/api\/store\/index.ts<\/code><\/p>\n\n\nimport<\/span> { NextApiRequest, NextApiResponse } from<\/span> \"next\"<\/span>;\nimport<\/span> nc from<\/span>