Next.js Local Production Development

Next.js Local Production Development

Published April 8, 2022

Test Publish Locally

Since unstable_revalidate only works in production mode, the first thing I have to do is replace my root domain handling code to load it from an environmental variable instead. Adding the following variables to my .env.local and to my production deployment settings on Vercel will allow me to remove all my code that switches between localhost and my domain based upon the dev flag. The major point of doing this is so I can test publishing locally and the urls can still have [localhost:3000](http://localhost:3000) instead of the production root domain. Unfortunately, since Next.js makes it too painful to setup localhost to work over https and the other ways are more work than it’s worth, I also need to specify the protocol (http or https) in my environment configs too. Since we will be accessing them in the browser, they have to be prepended by NEXT_PUBLIC_.
// .env.local ... NEXT_PUBLIC_PROTOCOL=http:// PROTOCOL=http:// NEXT_PUBLIC_DOMAIN=localhost:3000 DOMAIN=localhost:3000
Honestly, I should’ve abstracted this out a while ago instead of hardcoding these values all over the place, but hey, better late than never! Now I just need to replace all the hardcoded values with these env variables.
This fixed my url paths for preview and viewing the published content but I think their is a bug in unstable_revalidate that doesn’t handle a subdomain for localhost. It was throwing a 404 and when I dug deeper it was preserving the passed path but dropping the subdomain. I also ruled out _middleware because it parses the URL correctly and doesn’t do any re-writing anyway.
Click to rocket boost to the top of the page!