How to Deploy a Static Next.js immo.estate on Firebase Hosting (Updated for Latest Versions)

 Configuring Firebase Hosting for a static site generated by Next.js requires some careful setup to ensure everything, including linking, works properly. Here’s a step-by-step guide to get it working:

 Next.js needs to be exported to a static site before deployment to Firebase Hosting.

Update next.config.js: Add the following configuration to indicate a static export:

module.exports = {
  output: 'export',
}

Or if you have to remove img optimalisation

/** @type {import('next').NextConfig} */
const nextConfig = {
    output: 'export', // Zorgt ervoor dat Next.js als statische site werkt
    skipMiddlewareUrlNormalize: true, // Voorkomt fout bij API routes
    skipTrailingSlashRedirect: true,  // Vermijd redirects die problemen geven bij export
  images: {
    unoptimized: true, // Zorgt ervoor dat Next.js gewone <img> gebruikt in plaats van next/image API
  },

}

module.exports = nextConfig
 

 Build and Export the Site: Run these command:

npm run build

This will create a folder (usually named out/) containing your static site.

Documents/immo.estate/firebase

 

cp -r ../tailwindui-salient/salient-js/out/* public

firebase deploy 

 Links

 <a href="/contact.html">Bekijk de tool in actie</a> 

In a static Next.js site deployed on Firebase Hosting, linking requires explicit inclusion of .html extensions in anchor tags (e.g., <a href="/contact.html">Bekijk de tool in actie</a>) to ensure proper navigation. Firebase Hosting’s default configuration doesn’t automatically handle clean URLs in multi-page setups for static exports. Each page is generated as an .html file, and links must directly reference these files. Adjusting your Next.js components to include .html extensions in the href attributes ensures compatibility with Firebase’s static hosting setup.

 

Publish 

npx next build
cp -r out/* ../public
cd ../public
firebase deploy