I have an app that has mdx files, and custom function that can fetch these files, I have a function with which I can fetch it individually (fetch the actual page/blog/case study), and a function that gets an array with what case studies or blogs are uploaded as a navigation.

the pages get built at buildtime so I think thats why that works, but the navigation components cant seem to get the necessary data, how does nextjs act differently at buildtime on vercel vs localhost that it could cause this?

import { type ImageProps } from 'next/image'
import glob from 'fast-glob'

async function loadEntries<T extends { date: string }>(
  directory: string,
  metaName: string,
): Promise<Array<MDXEntry<T>>> {

  const mdxFiles = await glob('**/*.mdx', { cwd: `src/app/[locale]/${directory}` });

  const entries = await Promise.all(mdxFiles.map(async (filename) => {
    let metadata = (await import(`../app/[locale]/${directory}/${filename}`))[metaName] as T;

    return {
     ...metadata,
      metadata,
      href: `/${directory}/${filename.replace(/\/page\.mdx$/, '')}`,
    };
  }));

  const sortedEntries = entries.sort((a, b) => b.date.localeCompare(a.date));

  return sortedEntries;
}


type ImagePropsWithOptionalAlt = Omit<ImageProps, 'alt'> & { alt?: string }

export type MDXEntry<T> = T & { href: string; metadata: T }

export interface Article {
  date: string
  title: string
  description: string
  author: {
    name: string
    role: string
    image: ImagePropsWithOptionalAlt
  }
}

export interface CaseStudy {
  date: string
  client: string
  title: string
  description: string
  summary: Array<string>
  logo: ImageProps['src']
  image: ImagePropsWithOptionalAlt
  service: string
  testimonial: {
    author: {
      name: string
      role: string
    }
    content: string
  }
}

export function loadArticles() {
  return loadEntries<Article>('blog', 'article')
}

export function loadCaseStudies() {
  return loadEntries<CaseStudy>('work', 'caseStudy')
}