Unable to retrieve image: status code 402 - payment required

When trying to fetch my Facebook page's posts using the Facebook graph API and nextjs with vercel, I encountered an error: GET imageurl 402 payment required. Oddly enough, this works perfectly fine in localhost:

https://i.sstatic.net/JGy2g.png

I suspect there may be a problem with either vercel or my next.config.js file?


/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
remotePatterns: [
{
protocol: "https",
hostname: "scontent-*.xx.fbcdn.net", // * wildcard on dynamic part of domain url
},
{
protocol: "https",
hostname: "**",
},
],
domains: [
"scontent.fcgm1-1.fna.fbcdn.net",
"external.fcgm1-1.fna.fbcdn.net",
],
},
experimental: {
images: {
remotePatterns: [
{
protocol: "https",
hostname: "scontent-*.xx.fbcdn.net", // * wildcard on dynamic part of domain url
},
],
},
},
env: {
ACCESS_TOKEN: process.env.ACCESS_TOKEN,
}
};

module.exports = nextConfig;

Answer №1

It appears that you have reached the 1000 image optimization limit provided by vercel for the free tier.

If you do not require this feature, you can simply disable it.

images: {
    unoptimized: false
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The jQuery .ajax() function encountered a 405 error stating "Method Not Allowed" when attempting a cross

Despite searching extensively on SO, I am unable to pinpoint the issue in my code. To avoid using JSONP, I am implementing CORS. I understand that this is a preflighted request and believe I have included the correct headers. The problem lies in the web ...

What is causing the issue with useForm not being identified as a function?

error image Why is this error occurring when attempting to use useForm: ⨯ src\app\journal\page.tsx (18:53) @ useForm ⨯ TypeError: (0 , react_hook_form__WEBPACK_IMPORTED_MODULE_5__.useForm) is not a function at Page (./src/app/journal/pa ...

What is the best way to delete an item from a React array state?

In my Firebase database, I have an array stored under the root branch called Rooms. Within the app, there is a state named rooms which is also an array. I successfully set it up so that when a user enters a new room name and submits it, it gets added to th ...

Excessive notification events are currently causing a blockage in the Angular app

Currently, I am utilizing Angular 7 in combination with SignalR on the backend for push notifications. At certain times, an overwhelming amount of notifications flood in, causing my application to become completely unresponsive. The SignalR service compon ...

Setting up a textarea tooltip using highlighter.js

I'm experimenting with using highlighter.js within a textarea. I've customized their sample by substituting the p with a textarea enclosed in a pre tag (for right-to-left language settings). <div class="article" style="width: 80%; height: 80% ...

What is causing the classList function to throw an error: Uncaught TypeError: Cannot read properties of undefined (reading 'classList')?

There's an error that I can't figure out: Uncaught TypeError: Cannot read properties of undefined (reading 'classList') console.log(slid[numberArray].classList) is working fine, but slid[numberArray].classList.add('active') is ...

Leveraging Masonry.js with dynamically created divs using jQuery

Recently, I discovered Masonry.js and was excited to incorporate it into my projects. To test my skills, I decided to create a page that would display 16 divs with random heights and colors every time I clicked a button. However, I'm encountering an i ...

Adjust the log level on winston in real-time

Is there a way to update the log level dynamically in winston and have it reflect across multiple files? I am facing an issue where changing the logger level in index.js does not affect readfile.js. How can I resolve this? Below is the code snippet: win ...

Whoops! Looks like there was a hiccup with the Vercel Deployment Edge Function, causing an

Every time I attempt to send a POST request to my Edge Function on Vercel Deployment, I encounter the following error message: [POST] /api/openai reason=EDGE_FUNCTION_INVOCATION_FAILED, status=500, user_error=true TypeError: Illegal invocation at app/api/ ...

How to address additional attributes received from the server in Next.JS

Encountering an error while trying to render a canvas with specified height and width within a child component in a NextJs app. The issue arises when attempting to integrate this mouse effect into my NextJS application. Everything functions correctly until ...

Scroll the content of a div to the bottom using JavaScript

I'm facing a situation with my code: function scrollme(){ dh=document.body.scrollHeight ch=document.body.clientHeight if(dh>ch){ moveme=dh-ch window.scrollTo(0,moveme) } } However, I am looking for a way to make it scroll only within a specific d ...

Enhancing Nextjs performance for mobile devices

Greetings everyone, I am currently experiencing performance issues on mobile devices. Can anyone provide suggestions on how to enhance the following aspects? https://i.stack.imgur.com/bEmln.png ...

Using jQuery to insert PHP code into a <div> element

In our capstone project, I'm looking to implement a dropdown calendar feature. I initially attempted to use ajax within a dropdown Bootstrap 4, but encountered issues with collapsing. As an alternative, I am considering utilizing the include method. A ...

Utilizing Vue.js: Dynamically linking v-model to route parameters depending on the current state

I'm currently in the process of developing an application that will serve as the backbone for a restaurant chain's website. The main functionality involves allowing users to modify page content and images. Given the complexity of the site with it ...

The display of temporary headers - Nodemailer - AJAX

I keep receiving a warning in the request header that says: Provisional headers are shown. I'm struggling to identify the root cause of this issue. This warning prevents the readyState from changing and my callbacks on the eventhandler onreadystatecha ...

Adjusting the size of images in real time

Currently, I am in the process of creating a Fluid grid style website and I am looking to decrease the size of all images by 75% when the screen is below 1280px, 50% at 800px, and so forth. Is there a way to achieve this using the IMG tag? My attempt so ...

Unable to refresh the context following a successful API call

My current project in NextJS requires a simple login function, and I have been attempting to implement it using the Context API to store user data. However, I am facing an issue where the context is not updating properly after fetching data from the back-e ...

What is the reason for a button triggering a complete reload of my webpage?

I am currently working on a web page using jQuery and experiencing inconsistent behavior with certain elements. Whenever any button on the page is clicked, it causes a refresh of the page. It seems like there is code running that reloads the page whenever ...

Utilizing HighCharts Bubble Graph with JSON Data Feed

I am currently facing an issue with my bubble chart series not plotting, even though I followed the HighCharts example tutorial. I am not seeing any errors on the browser console, which is making it challenging for me to troubleshoot. Here is the data I ...

An elementary React project facing compilation issues

I'm currently exploring react hooks, but I encountered an error with the useReducer hook. The console displays the following error message: "Invalid hook call. Hooks can only be called inside of the body of a function component. This could happe ...