I made a static website using Next.js, and while my routing is working fine locally, it’s not working once I’ve deployed it on BlueHost. I added a .htaccess file in my public directory with the following code:
RewriteEngine On
RewriteBase /
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
Next, I ran npm run build and then separately ran npx next export since despite having output: "export" in my next.config.mjs it was not making a separate build or out directory.
Once I uploaded the out directory to my public_html folder to host it online, it was working… but it also wasn’t. It was working with www.website.com as the main home page, and routes to www.website.com/about/ when I click “About” in my navbar, but when I further click “Contact”, it does www.website.com/about/contact instead of www.website.com/contact/
What should I do and how should I fix this?
Ayesha Ejaz is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.