So, I am working on a simple Next.Js app. It's just a Lyrical Page but I'm running onto some issues. I'm new to Next.Js and this is my first project. So, here is my problem:

I have a dynamic set of pages/folders which looks like this:

• songs (empty folder)
• [singer] (child of songs containng just an index.jsx)
• [title] (child of [singer] containing another index.jsx)

Now in my [title] - index.jsx im rendering a simple page providing lyrics for a specific song. My problem is that I want to count views (every time someone opens this page) for each song sepertly. I have the following code:

export const getStaticProps = async (context) => {
const res = await fetch(`${process.env.PROXY}api/lyrics/post/${encodeURIComponent(context.params.title)}`);

const data = await res.json();

const send = await fetch(`${process.env.PROXY}api/lyrics/views/${data.post._id}`);

return {
  props: {
    data: data.post,
    message: 200
  }
}

}

export const getStaticPaths = async () => {
  const res = await fetch(`${process.env.PROXY}api/lyrics/getAll`);

  const data = await res.json();

  const paths = data.all.map((name) => ({ params: { singer: name.singer.toString(), title: name.title.toString() } }));

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

}

The problem is I know getStaticProps renders only on build time, however, I want to render every time so that I can count the views with my send variable.

Can someone please help me figure this out? Any help will be appreciated!