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',
}
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.
Comments
Post a Comment