Analytics and env variables...
Today I worked on a couple of updates to the base
_app.jsx template. There's
not much on the page right now: almost nothing for a visual template outside of
vertically centering and applying a max-width to the content.
However, I was able to update the colors to use a base theme that is more analagous for now. (I generated the theme at coolors, available here, then made minor adjustments to individual shades where necessary to improve color contrast.)
I also applied a simple media query to enable a dark mode variant. (Even if we don't have a toggle on page yet, at least the page will show up darker for folks that use a dark system or themes.) The dark mode version will use dark hues and automatically thin the san-serif font a little.
I also fleshed out the
100Days page for tracking this project
progress. Updated some of the colors used along with a very rudimentary
dark-mode variation. Also made some tweaks so my tracking code works properly.
I did run into some difficulty getting the environment variables that I feed into my client side analytics solution to map correctly. While the server side components have access to env values easily enough, they only end up being passed to the client side code on vercel if you make sure to prefix them correctly.
I shifted values around a couple of times and finally found what works. My testing consisted of various commits to a feature branch and deployed automatically on vercel. From there I was able to make updates incrementally and verify whether or not the values made it to the browser.
- You can set whatever you want for the root environment variable KEYS (the values you'd set with real environment variables or passed from the environment config from vercel)
next.config.jsyour environment variables are mapped.
- You must use
.envkeys here with
NEXT_PUBLIC_prefixed to make them actually available to scripts.
- Your scripts should generally refer to
process.env.NEXT_PUBLIC_Xdirectly. I def couldn't
console.logthe value of
process.envdirectly, it was always undefined, so I suspect there is a loader somewhere that is transforming those environment values for runtime somehow...