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

What is the Ideal Location for Storing the JSON file within an Angular Project?

Step-by-step guide on creating a personalized logic and redirecting to different pages using the useEffect hook in React or Next.js

Issue: Revert call exception during Thirdweb NFT Drop transaction

guide on incorporating Google Maps in a Vue.js application

Mapping custom colors to paths in D3 Sunburst visualizations can add a vibrant and unique touch

"Utilize Vuejs to establish a binding between two objects when necessary

Paging in Ext JS does not function properly when using local data sources

When adding values, they remain in their original positions

Implement using a variable as a key for an object in a reducer function

Using React and Material UI to create a table filtering system with checkboxes

Which event occurs first for a4j:jsFunction, reRender or oncomplete?

Choose the initial offspring from a shared category and assign a specific class identifier

Use Node.js with Selenium and WebdriverIO to simulate the ENTER keypress action on

What sets @vue/cli-plugin-unit-jest apart from vue-jest?

In the latest version of NextJS (NextJS 13), the getServerSideProps function seems to be

Instead of modifying the selected class, jQuery generates inline styles

Can $location be modified without triggering its corresponding $route?

The resolution of Angular 8 resolver remains unresolved

Remove duplicate elements from a JSON array

Interacting with an API and retrieving data using JavaScript