Next.js Favicon en Open Graph Image Problemen Oplossen tijdens Build Proces

 In de out-directory wordt de favicon.ico telkens overschreven met een vreemd bestand afkomstig van een template tijdens het uitvoeren van npm run build in Next.js. Het bestand in de map /app is volledig anders. Ik kan niet achterhalen waar het bestand vandaan wordt gekopieerd of gegenereerd.

De oplossing

 Verwijder Dubbele favicon.ico

Omdat je nu een public/ map hebt, moet je het favicon.ico bestand uitsluitend in de public/ map plaatsen. Verwijder het duplicaat uit src/app/:

 src/app/favicon.ico

Het hebben van meerdere favicon.ico bestanden kan conflicten veroorzaken in het buildproces.

 

npm run build

 Als bovenstaande stappen nog steeds niet helpen, kun je me aanvullende details geven over de configuratie in je project (next.config.js, plugins of eventuele custom scripts)

 

Steps to Move opengraph-image.png to public/

 Move the file from its current location (src/app/) to the public/ folder:

/public/opengraph-image.png

 export const metadata = { title: 'Your Page Title', description: 'Your Page Description', openGraph: { images: '/opengraph-image.png', }, };

 

export const metadata = {
  openGraph: {
    title: 'Immo Estate',
    description: 'Your trusted platform for real estate leads.',
    url: 'https://immo.estate', // Your base URL
    siteName: 'Immo Estate',
    images: [
      {
        url: 'https://immo.estate/opengraph-image.png', // Absolute URL
        width: 1200,
        height: 630,
        alt: 'Immo Estate Open Graph Image',
      },
    ],
    locale: 'en_US',
    type: 'website',
  },
};