What's the purpose of the dotenv when you have next.config? about ethereum-boilerplate

[Y0moo]

Thank you @nidhhoggr. Very useful info from you.

[Y0moo]

serverRuntimeConfig is the thing!

[Y0moo]

The cool thing about .env.example is that all developers know what's this and even without reading docs they know that you need to replace variables there. But some devs can struggle with searching for a place where they can pass their API keys and variables in the next config case. So, I think it is worth mentioning this in the docs, but changing it everywhere maybe not be the best idea.

[nidhhoggr]

@Y0moo If you want to keep dotenv for developer familiarity but still reap the benefits of runtime configuration provided by next.confg.js you should be able to load dotenv process variables in the next.config.js file. In my case it becomes impractical to rebuild on servers with limited RAM when I could otherwise just change the config file and restart the process. https://stackoverflow.com/a/69926930

[Y0moo]

Have you tested this? I don't understand how will NextJS know that he needs to read the config file instead of .env.local. Because in both ways we use process.env code

[Y0moo]

=======================
Serverside security here is a concern

[nidhhoggr]

I've not tested it yet but I'll be getting around to it tomorrow. In any case, this project here (also a next boilerplate) uses dotenv with nextconfig.
https://github.com/pankod/next-boilerplate/blob/master/documentation/docs/dotenv-usage.md

The difference is they are using an additional package which may not be necessary but does provide some useful features: https://github.com/tusbar/next-runtime-dotenv

[Y0moo]

Thank you @nidhhoggr. I'll check it deeper.
We are interested in showing the best practices in the boilerplate. But also those practices shouldn't confuse developers, especially those who just migrated from React and have 0 nextJs experience. And anyway, NextJs shows both practices as allowed: .env.local and .next.config.

[Y0moo]

Please also let me know the results of your coming tests with it. Really appreciate your contribution!

[nidhhoggr]

In my further research and testing the issue of buildtime versus runtime configuration I've found the following. Anything within /pages that loads environment variables from process.env will be loaded at runtime. This means that you don't have to rebuild after changing these variables. However, publicly namespaced environment variables using NEXT_PUBLIC_ (as documented in the link below) are rendered inline at build time. This means that these variables do require rebuilding the project to take effect. As such the issue is multi-faceted and depends on how and where you're using dotenv environment variables which determines if they will be loaded at buildtime or at runtime.

While this issue effects my project or any others who also decide to use dotenv to load environment variables on the frontend, this boilerplate only uses dotenv environment variables on the server side. As such, in this case using next.config as a runtime proxy for dotenv-loaded environment variables wont make a difference, as all of your variables are loaded on the serverside. Where this would impact this project is if you also decided to start using NEXT_PUBLIC_ environment variables to load on the client side. Further it seems that proxying these variables into the next.config.js file doesn't make a difference - public variables will still require a rebuild. Without making configuration in this boilerplate too complex to account for all of these scenarios, it's probably best to leave that implementation to developer discretion and as such warrant closing this issue.

https://nextjs.org/docs/basic-features/environment-variables

For example this would inline the someVar at build time and would require rebuilding the project for updates to that variable to take effect.

src/components/templates/home/Home.tsx

 const Home = () => {
+  const someVar = process.env.NEXT_PUBLIC_SOME_VAR;
+  console.log(someVar);
   return (
     <VStack w={'full'}>
       <Heading size="md" marginBottom={6}>
@@ -10,7 +12,7 @@ const Home = () => {
       <List spacing={3}>
         <ListItem>
           <ListIcon as={CheckCircleIcon} color="green.500" />
-          Moralis authentication
+          Moralis authentication {someVar}`