import getConfig from "next/config";

const { publicRuntimeConfig } = getConfig();

const { url } = publicRuntimeConfig;

const getAsset = (id: string) => {
  return `${url}/assets/${id}`;
};

export default getAsset;

export const getStaticProps = async () => {
  const queryClient = new QueryClient();

  const menu = await findMenu("1");
  const infos = await findInfos();

  await queryClient.prefetchQuery({
    queryKey: ["page"],
    queryFn: () => findFacilities(),
  });

  await queryClient.prefetchQuery({
    queryKey: ["facilities"],
    queryFn: () => getAllFacilities(),
  });

  await queryClient.prefetchQuery({
    queryKey: ["facilityTypes"],
    queryFn: () => getAllFacilitiyTypes(),
  });

  return {
    props: { dehydratedState: dehydrate(queryClient), menu, infos },
    revalidate: 3,
  };
};

<Image
  src={getAsset(slide.directus_files_id?.id)}
  alt={slide.directus_files_id?.description ?? ""}
  fill
  sizes="(min-width: 180ch) 50vw, 90vw"
  priority={index === 0 ? true : false}
  />

 which exceeds the threshold of 128 kB, this amount of data can reduce performance.

export const findFacilities = async (): Promise<IPage> => {
  return await directus
    .items("pages")
    .readOne("9911ded7-f532-4f54-ad2b-17c53a2c7f95", {
      fields: ["*.*", "blocks.*", "blocks.item.*.*.*.*", "*.collection"],
    })
    .then((response) => response)
    .catch((error) => error);
};

export const getAllFacilities = async (): Promise<IFacility[]> => {
  return directus
    .items("facilities")
    .readByQuery({ limit: -1, fields: ["*.*.*.*.*.*"] })
    .then((response) => response.data)
    .catch((error) => error);
};

export const getAllFacilitiyTypes = async (): Promise<IFacilityType[]> => {
  return directus
    .items("facility_type")
    .readByQuery({ limit: -1, fields: ["*.*.*"] })
    .then((response) => response.data)
    .catch((error) => error);
};