How to use revalidatePath on Nextjs13?

Question

I'm studying nextJs13, I didn't understand how revalidatePath works.

I don't understand how can I use revalidatePath, is a function ? Or is a GET endpoint ?

I have two differnt page, when I try to modify the first page I need that this modify will be visible on the second page. But when I change page, I can see the modify.

I tryed too with no-cache but I can't . Anybody could help me ?

  const editProfileUser = async (payload) => {

try {
  const editProfileUser = await putAutheticatedAPI({
    payload,
    endpoint: SETTINGS_PROFILE_USER,
    token: session.user.access_token,
  })
  


  revalidatePath('user/profile')

  return editProfileUser
} catch (e) {
  setError(true)
}

}

I get this error :

static generation store missing in revalidateTag user/profile

Answer 1

This is an old question, but you need to call revalidatePath from a server action.

I give you an example from my code that uses both API routes and server actions.

This is the onSubmit handler of my form component:

// NextJS form component
  async function onSubmit(values: ConfigFormData) {
    try {
      // stuff here
      await redirectTo("/configurations");
    } catch (err) {
      // stuff here
    }
  }

// @/app/actions.ts
"use server";

import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";

export async function redirectTo(path: string) {
  if (!path.startsWith("/")) {
    return { message: "Invalid path" };
  }

  revalidatePath(path);
  redirect(path);
}

So, in my case /configurations is a statically rendered page. After I submit my form using an API route, I call the server action in the onSubmit handler. revalidatePath runs on the server and redirects to /configurations which is already updated.

I could get rid of the API route completely and do everything in the server action, but it would require a significant refactor which I am not willing to do at the moment.