Nuxt 3 Server Folder

We have a server folder in Nuxt 3. It has an api folder. why we should use it when we have API endpoints using a server-side programming language? are they related together or not? for example, we have these endpoints that have been created using Laravel:

http://www.example.com/product
http://www.example.com/product/1

We can call these endpoints using useFetch or $fetch so we can use their data. is it required to use server/api folder here? for example, we have these folders and files:

server/api/product/index.get.ts
server/api/product/[productId]/index.get.ts

Can you help me? are they related together or not? which time we should use the server folder?

I am doing a project in nuxt 3 and I had some confusion when I first learned it and I saw in some videos that the API coming from the backend was captured in the server folder and then taken from there. Like this:

server/api/currency/[code].js

export default defineEventHandler(async (event) => {
     const { code } = event.context.params;
     const { currencyKey } = useRuntimeConfig();
     const url = `https://api.currencyapi.com/v3/latest?currencies=${code}&apikey=${currencyKey}`;
     const { data } = await $fetch(url);
     return data;
});

pages/currency.vue

const title = ref("Currency");
const { data } = await useFetch("/api/currency/GBP");

something like this. But now when I do a project it seems like it's wrong, for example, like this

server/api/auth/login.ts

export default defineEventHandler(async (event) => {
  try {
    const config = useRuntimeConfig();
    const body = await readBody(event);
    const user = await $fetch(`${config.public.apiBaseUrl}/auth/login`, {
      method: 'POST',
      body,
      headers: {
        'Content-Type': 'application/json'
      }
    });

    return user;
  } catch (error) {
    throw error;
  }
});

store/authStore.ts

async login(newUser: User) {
      try {
        const data = await $fetch<{ user: User; token: string, expiresIn: number }>('/api/auth/login', {
          method: 'POST',
          body: JSON.stringify(newUser),
          headers: {
            'Content-Type': 'application/json'
          }
        });

        this.user = data.user;
        this.token = data.token;
        if (process.client) {
          localStorage.setItem('user', JSON.stringify(data.user));
          localStorage.setItem('token', data.token);
        }
      } catch (error) {
        throw error.data;
      }
    },

I guess I'm doing the same thing in both places, and when I look at some projects, they only use prisma and supabase in the server folder, I didn't solve this. It would be nice if someone could help.