The function res.revalidate() is not a valid method within the NextResponse module of Nextjs when trying to implement on-demand

Currently, NextResponse does not support res.revalidate('/'). I am working with version v12.2.5, although this feature has been available since v12.2.0. My goal is to implement on-demand ISR using TypeScript.

Learn more about on-demand Incremental Static Regeneration in Next.js 12.2 here

export default async function handler(req: NextRequest, res: NextResponse) {
    try {

        await res.revalidate('/');
        return res.json({ revalidated: true });

    } catch (err) {
        console.error(err);
        return res.status(500).send('Error revalidating');
    }
}

https://i.sstatic.net/4TgTu.png

typescriptnext.js

Answer №1

It is essential to use NextApiRequest and NextApiResponse instead of NextRequest and NextResponse.

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
    try {

        await res.revalidate('/');
        return res.json({ revalidated: true });

    } catch (err) {
        return res.status(500).send('Error revalidating');
    }
}

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

Is it possible to create a VueJS 3 application in a unified ES Module bundle format?

In my Vue3 project, I have configured it with typescript and a main.ts entry file that has a single default export. import { App, createApp } from "vue"; import { createIntl } from "vue-intl"; import Application from "./App.vue&qu ...

typescriptvue.jswebpackes6-modules

Streamlined Authorization in MEAN (SPA) Applications

I have created an application, but now I am trying to adapt it into a SPA application. The main issue I am facing is with the Authorization process. While I can successfully register new users, log them in, and retrieve their tokens, I seem to encounter a ...

angulartypescriptexpressmean-stacksingle-page-application

Do you believe this problem with transpilation has been properly reported to babel-jest?

I recently encountered a problem in the jest project regarding babel-jest transpilation. I added some code that appeared to be error-free, but caused transpilation to fail completely. Although the issue seemed related to a Typescript Next project, there a ...

typescriptnext.jsbabeljsbabel-jesttranspiler

Managing the state in NextJS applications

I've scoured the depths of the internet in search of a solution for this issue, but unfortunately I have yet to come across one that effectively resolves it. I've experimented with various state management tools including: useContext Redux Zusta ...

javascriptreactjsreduxnext.jsstate

React-Bootstrap columns are not displaying in a side by side manner and are instead appearing on separate lines

I am currently integrating Bootstrap into my React project alongside Material UI components. Below is a sample of one of my components: import { styled } from "@mui/material/styles"; import Paper from "@mui/material/Paper"; import Cont ...

reactjstypescriptbootstrap-5react-bootstrap

Unable to configure unit tests for Vue project using Typescript due to TypeError: Unable to destructure property `polyfills` of 'undefined' or 'null'

I've been working on adding unit tests for an existing Vue project that uses Typescript. I followed the guidelines provided by vue-test-utils for using Typescript, but when I ran the test, I encountered an error message stating: TypeError: Cannot d ...

typescriptunit-testingvue.jsjestjs

Is it possible to use the map function to update the class name condition?

Having trouble adjusting a classname condition within a React map. I am attempting to display various modals located within the map, each with a different state name, but unfortunately, {item.value} is not functioning as expected. Here is the code snippet ...

reactjsnext.js

define a variable within a v-for loop

Example of Code <div v-for="item in dataItems"> <div v-if="enableEdit"> <input type="text" v-model="name"> </div> <div v-else> {{name}} </div> <button @click="enableEdit = true">click</button> This ...

javascripttypescriptvue.js

There was a problem encountered while trying to retrieve the page data: An error occurred when attempting to access the property 'b'

I keep encountering a typeerror while attempting to construct my next.js project, specifically 'cannot read property b of undefined' (there is no instance in the app where I attempt to access a property 'b', so it doesn't provide m ...

next.js

Having trouble importing a file in TypeScript?

I needed to utilize a typescript function from another file, but I encountered an issue: I created a file called Module.ts with the following code snippet: export function CustomDirective(): ng.IDirective { var directive: ng.IDirective = <ng.IDire ...

angularjstypescriptangularjs-directive

Can I assign a value from the tagModel to ngx-chips in an Angular project?

HTML code: <tag-input class="martop20 tag-adder width100 heightauto" [onAdding]="onAdding" (onAdd)="addInternalDomain($event)" type="text" Ts code: addInternalDomain(tagTex ...

angulartypescriptnpm

Troubleshoot import issues related to third-party dependencies (specifically `react-hook-form`) within the Vite library framework

Currently, I am in the process of creating a custom UI library using Vite that acts as a simple wrapper for ShadCN Uis components. While everything works smoothly when utilizing the library within pages router components in a couple of NextJS apps, import ...

node.jsnext.jsvitees6-modulesreact-hook-form

Parallel Execution Issue with RxJS Observable forkJoin

Struggling to understand why my requests aren't executing concurrently with the following code. As a newcomer to RxJS and observables, I would greatly appreciate any guidance on improving this snippet below. Essentially, I am fetching data from a REST ...

javascriptangulartypescriptrxjsrxjs-observables

Retrieve the part of a displayed element

Presently, I am developing a modal system using React. A button is located in the sidebar and the modal is represented as a div within the body. In the render function of the main component of my application, two components are being rendered: MyModal M ...

javascriptreactjstypescriptcomponentselement

The 'doRequest' property is not found on the type 'any[]'

Attempting to develop a custom hook in TypeScript for managing errors & API requests, but encountering a type error where a property does not exist on type 'any[]' Here is the code for the hook: import axios from 'axios'; import { ...

typescriptnext.js

Rearrange the provided string in a particular manner

Looking to transform a string like '12:13:45.123 UTC Sun Oct 17 2021' into 'Sun Oct 17 2021 12:13:45.123 UTC' without calling slice twice. Is there a more elegant and efficient way to achieve this? Currently using: str.slice(18)+&apo ...

javascriptnode.jsstringtypescript

Obtaining context from a higher order component in the constructor of a child component: tips and tricks

In order to gain access to context throughout the application, I've implemented the following context provider: import React, { Component, useContext } from 'react'; import { appInitialization, Context } from "@microsoft/teams-js"; ...

reactjstypescriptreact-hooks

Clear all events from an HTML element and its descendants with TypeScript

Each time the page loads, I have HTML from an API that is constantly changing. Is there a way to strip away all events attached to it? The original HTML looks like this: <div id="content"> <h2 onclick="alert('hi');">Test 1< ...

javascripthtmltypescript

Deploying Nodejs code with Express leads to an error message stating that the class module is not found

Upon completion of compiling TypeScript files, I receive JavaScript files structured as follows: main directory public api controllers data-controller.js app.js package.json ... The code in app.json is ...

node.jstypescriptexpressdeployment

Angular: Issue encountered while attempting to differentiate an '[object Object]'. Arrays and iterables are the only permissible types for this operation

I encountered the following error message while attempting to retrieve updated data: Error trying to diff '[object Object]'. Only arrays and iterables are allowed Snippet of Get Code: allDatas allData(data) { this.allDatas = data } Up ...

javascriptangulartypescript