How to Revalidate a Next.js Dynamic Route Manually Using an API Route?

Question

How to Revalidate a Next.js Dynamic Route Manually Using an API Route?

In my application built with Next.js, I have a dynamic page that displays resources at the route /resource/[id]. When a user edits a resource, such as #5, I want to refresh the cached page at /resource/5.

I've created an API route in my /pages directory to handle resource editing. According to what I've read, I should be able to trigger a refresh of the display route using:

response.revalidate(`/resource/${id}/`);

However, this approach is not working as expected, and it's throwing an error:

Error: Failed to revalidate /resource/2153/: Invalid response 200
    at revalidate (/home/jeremy/GoblinCrafted/next/node_modules/next/dist/server/api-utils/node.js:388:15)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
- error unhandledRejection: Error: Failed to revalidate /resource/2153/: Invalid response 200
    at revalidate (/home/jeremy/GoblinCrafted/next/node_modules/next/dist/server/api-utils/node.js:388:15)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  digest: undefined

It seems like Next.js attempts to revalidate through an HTTP request, but perhaps the revalidation endpoint has been moved? The reason for this failure remains unclear to me.

UPDATE: Upon investigating the Next source code, I discovered that the revalidate function sends a simulated request to the route being refreshed. In the file

node_modules/next/dist/server/router.js

, you can see:

async revalidate({ urlPath , revalidateHeaders , opts  }) {
        const mocked = (0, _mockrequest.createRequestResponseMocks)({
            url: urlPath,
            headers: revalidateHeaders
        });
        const handler = this.getRequestHandler();
        await handler(new _node.NodeNextRequest(mocked.req), new _node.NodeNextResponse(mocked.res));
        await mocked.res.hasStreamed;
        if (mocked.res.getHeader("x-nextjs-cache") !== "REVALIDATED" && !(mocked.res.statusCode === 404 && opts.unstable_onlyGenerated)) {
            throw new Error(`Invalid response ${mocked.res.statusCode}`);
        }

The error message originates from the final throw statement, which puzzles me because when I log urlPath, it matches the path I'm attempting to refresh (e.g., /resource/5). Requesting this path via GET (in the browser or Postman) yields a 200 status code rather than a redirect.

To address this, I appended a slash / to the end of the path:

response.revalidate(`/resource/${id}/`);

This resulted in a similar error, albeit concerning a 200 response instead of a 308:

Error: Invalid response 200

Evidently, the actual status code isn't crucial; the issue lies within the condition

mocked.res.getHeader("x-nextjs-cache") !== "REVALIDATED"

. Although this header setting occurs deep within the router code, I couldn't figure out why the mock request fails to activate it, especially since other requests do reach that part despite

isSSG && !this.minimalMode

being true for all.

Furthermore, I attempted to use revalidatePath from next/cache:

revalidatePath(`/resource/[id]`);

Unfortunately, this method triggered another error:

revalidatePath(`/resource/[id]`);

Error: Invariant: static generation store missing in revalidateTag /resource/[id]
    at revalidateTag (/home/me/project/next/node_modules/next/dist/server/web/spec-extension/revalidate-tag.js:15:15)
    at revalidatePath (/home/me/project/next/node_modules/next/dist/server/web/spec-extension/revalidate-path.js:13:45)
    at handler (webpack-internal:///(api)/./pages/api/resource.js:88:67)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

My assumption is that revalidatePath is designed solely for usage within the /app directory.

Finally, I stumbled upon response.unstable_revalidate, supposedly tailored for refreshing dynamic paths:

response.unstable_revalidate(`/resource/${id}/`);

Despite trying this approach, the method does not exist on the response object:

TypeError: response.unstable_revalidate is not a function
    at handler (webpack-internal:///(api)/./pages/api/resource.js:88:18)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

javascript next.js next.js13

Answer 1

Answer №1

Consider the following options for improving your Next.js website:

`return { paths, fallback: 'blocking' }`

According to the Next.js documentation:
{ fallback: 'blocking' } will server-render pages on-demand if the path doesn't exist.

Another option is to adjust your getStaticProps function by either removing revalidate: true or setting it to false.

As per Next.js Documentation: If revalidate is omitted, Next.js will use the default value of false (no revalidation) and only revalidate the page on-demand when revalidate() is called.

Answer 2

Consider the following options for improving your Next.js website:

`return { paths, fallback: 'blocking' }`

According to the Next.js documentation:
{ fallback: 'blocking' } will server-render pages on-demand if the path doesn't exist.

Another option is to adjust your getStaticProps function by either removing revalidate: true or setting it to false.

As per Next.js Documentation: If revalidate is omitted, Next.js will use the default value of false (no revalidation) and only revalidate the page on-demand when revalidate() is called.

Answer 3

Answer №2

For more information on using Next.js, make sure to take a look at the official documentation available here: https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#on-demand-revalidation

In order to trigger revalidation in your Next.js 13 application router, you will need to utilize either the revalidatePath or revalidateTag options depending on whether you want to revalidate based on path or tag.

Answer 4

For more information on using Next.js, make sure to take a look at the official documentation available here: https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#on-demand-revalidation

In order to trigger revalidation in your Next.js 13 application router, you will need to utilize either the revalidatePath or revalidateTag options depending on whether you want to revalidate based on path or tag.

Answer 5

Answer №3

Based on my research, using res.revalidate seems to be the recommended method, but I seem to have encountered a bug of some kind. I've submitted a report to the Vercel team over at https://github.com/vercel/next.js/issues/54420, and now I'm patiently awaiting their response.

Answer 6

Based on my research, using res.revalidate seems to be the recommended method, but I seem to have encountered a bug of some kind. I've submitted a report to the Vercel team over at https://github.com/vercel/next.js/issues/54420, and now I'm patiently awaiting their response.

Answer 7

Answer №4

There are a couple of issues that need addressing:

The functions revalidate and revalidatePath should only be utilized in GET handlers, not API routes. Since your editing handler is set up as an API route, it will not function properly.

In Next 11, unstable_revalidate has been eliminated in favor of the new invalidation API.

Here's the recommended approach moving forward:

Within your API route, make use of the new invalidation API:

const { invalidatePages } = require('next/dist/server/router')

// ...

await invalidatePages('/resource/[id]')

Include a revalidation hook in getStaticPaths:

export async function getStaticPaths() {
  // ...

  return {
    paths: paths,
    fallback: true
  }
}

export async function getStaticProps({ params }) {
  // ...

  return {
    props: {},
    revalidate: 10 // revalidate every 10 seconds
  }
}

This will prompt Next to re-render the dynamic page upon invalidation.

Key points to remember:

- Employ invalidatePages from API routes to initiate rebuilds - Integrate revalidation configuration in getStaticProps so that Next is aware of when to re-render

Answer 8

There are a couple of issues that need addressing:

The functions revalidate and revalidatePath should only be utilized in GET handlers, not API routes. Since your editing handler is set up as an API route, it will not function properly.

In Next 11, unstable_revalidate has been eliminated in favor of the new invalidation API.

Here's the recommended approach moving forward:

Within your API route, make use of the new invalidation API:

const { invalidatePages } = require('next/dist/server/router')

// ...

await invalidatePages('/resource/[id]')

Include a revalidation hook in getStaticPaths:

export async function getStaticPaths() {
  // ...

  return {
    paths: paths,
    fallback: true
  }
}

export async function getStaticProps({ params }) {
  // ...

  return {
    props: {},
    revalidate: 10 // revalidate every 10 seconds
  }
}

This will prompt Next to re-render the dynamic page upon invalidation.

Key points to remember:

- Employ invalidatePages from API routes to initiate rebuilds - Integrate revalidation configuration in getStaticProps so that Next is aware of when to re-render

How to Revalidate a Next.js Dynamic Route Manually Using an API Route?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Unable to display toast notification in React/MUI/Typescript project

Error: The call stack has reached the maximum size limit in nodejs and reactjs

Using jQuery to target adjacent elements excluding those that are separated by other text

Retrieve Header information when making a cross-domain AJAX request

Encountered an issue when executing "npm start": The system does not recognize 'next' as a valid internal or external command

What steps can be taken to customize this code in order to develop a dictation application?

How can I bind the ID property of a child component from a parent component in Angular 2 using @Input?

Initiate the printing process by executing the window.print() function. As the document is being

What causes my code to break completely when I import something?

Setting attributes to a DOM element using String in jQuery

Tips for sending get parameter data to a component in React

What is the best approach to transfer information from the client side to a node

Fill the input field with data retrieved from a json file

React-router-sitemap lacks a definition for 'Require'

Unusual behavior experienced with raycasting in Three JS when objects are are repositioned

Having trouble retrieving the selected date from the Material-Ui datepicker after the first selection

Incorporate pictures from the popup onto the main page

What steps can I take to prevent Internet Explorer from caching my webpage?

React Next.js failing to trigger useEffect hook on live application

Error message from OpenAI GPT-3 API: "openai.completions function not found"