How to use External Libraries In Next.js
You can also use third-party libraries like nextjs-cors to simplify the process:
Install the following:
npm i nextjs-cors
// pages/api/hello.js
import NextCors from 'nextjs-cors';
export default async function handler(req, res) {
// Run the cors middleware
await NextCors(req, res, {
// Options
methods: ['GET', 'HEAD', 'PUT', 'PATCH',
'POST', 'DELETE'],
// Replace with your domain
origin: 'https://yourdomain.com',
optionsSuccessStatus: 200,
});
// Your API logic here
res.json({ message: 'Hello Everyone!' });
}
How to Fix CORS Errors in Next.js and Vercel?
Cross-Origin Resource Sharing (CORS) is a security feature that restricts web apps from making requests to a different domain than the one that served the web page to it. This is needed for security, although sometimes it can block legitimate requests, especially when working with APIs. In this article, we will learn fixing the CORS errors in the Next.js application deployed on Vercel.