What is the Vercel equivalent to .netlify/functions?

Question

What is the Vercel equivalent to .netlify/functions?

I'm in the process of deploying this repository: https://github.com/DataStax-Examples/astra-tik-tok using Vercel instead of Netlify.

I've converted vanilla React to Next.js, but I'm unsure how to transition the code in the Home.js file to work with Vercel:

//fetch all the tik-tok posts to your feed
const fetchData = async () => {
    const results = await axios.get('/.netlify/functions/posts')
    console.log(results.data)
    setUsers(results.data)
}

Any thoughts or suggestions on how to address this?

javascript next.js serverless vercel netlify-function

Answer 1

Answer №1

In Next.js, the equivalent of traditional backend APIs are API routes, which are implemented as serverless functions on Vercel. These API routes must be placed within the /pages/api directory.

To make your existing functions work with Next.js, you will need to make some adjustments. For instance, a function named add.js would need to be converted into an API route like the example below.

// /pages/api/add.js
export default async function handler(req, res) {
    const users = await getCollection();
    try {
        const user = await users.create(id, event.body);
        res.status(200).json(user);
    } catch (e) {
        console.error(e);
        res.status(500).json({ error: JSON.stringify(e) })
    }
};

To call this API route from the client-side code, you would reference it using /api/add.

await axios.get('/api/add')

Answer 2

In Next.js, the equivalent of traditional backend APIs are API routes, which are implemented as serverless functions on Vercel. These API routes must be placed within the /pages/api directory.

To make your existing functions work with Next.js, you will need to make some adjustments. For instance, a function named add.js would need to be converted into an API route like the example below.

// /pages/api/add.js
export default async function handler(req, res) {
    const users = await getCollection();
    try {
        const user = await users.create(id, event.body);
        res.status(200).json(user);
    } catch (e) {
        console.error(e);
        res.status(500).json({ error: JSON.stringify(e) })
    }
};

To call this API route from the client-side code, you would reference it using /api/add.

await axios.get('/api/add')

What is the Vercel equivalent to .netlify/functions?

Answer №1

Similar questions

Generating elevation graph from a kml file with the combination of php and javascript

Create an interactive JSON tree structure

Creating various iterations of a single CSS animation

Update MYSQL table values using AJAX and jQuery, then dynamically refresh the updated values on the web page

Bring the element to the top of the page by clicking on the anchor within the element or anywhere within the specified div ID

the modal body is taking longer than expected to load with ajax

Creating fluid motion with a bezier curve in ThreeJS

Is it possible to iterate through a nested object with a dynamic number of fields?

Leveraging React Native to retrieve information from a promise in JSON format

Is it possible for the .find() method to extract values from <a> tags?

Communicating with my own account through Nodemailer

What are the steps for running app.js deployed on a remote server using the local bash terminal?

The DataType.MultilineText field in my modal popup partial view is causing all validation to fail

Setting environmental variables throughout your application using create-react-app on the front end

ReactJS: Dealing with issues in setting a dynamic index for the setState key

Basic node.js server that responds with HTML and CSS

Guide to sending client-to-client notifications in Angular/Ionic with Firebase Cloud Messaging

Creating an infinite loop using Jquery's append and setTimeout functions

The NextJS i18n feature is encountering an issue with the locale being undefined

Identify the CSS class for the ionic component on the webpage