title: How to use secret key for on-demand revalidation for ISR (Next.js) in the frontend without exposing it?
body: <p>According to <a href="https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration#using-on-demand-revalidation" rel="nofollow noreferrer">the documentation</a>, you should use a SECRET_TOKEN to prevent unauthorized access to your revalidate API route i.e.</p>
  <p><code>https://&lt;your-site.com&gt;/api/revalidate?secret=&lt;token&gt;</code></p>
  <p>But how are you supposed to call that route from the frontend and keep the token secret?</p>
  <p>For example, if you have a simple POST that you then want to trigger the revalidate off of, you'd have to expose your secret token via NEXT_PUBLIC to be able to use it:</p>
  <pre><code>function handleSubmit(payload) {
    axios.post(POST_URL, payload)
    .then(() =&gt; {
      axios.get(`/api/revalidate?secret=${process.env.NEXT_PUBLIC_SECRET_TOKEN}`)
    })
    .then(() =&gt; {
      // redirect to on-demand revalidated page
    })
  }
  </code></pre>
  <p>What am I missing here? How can you call the API route through the frontend without exposing the SECRET_TOKEN?</p>