1 00:00:01,000 --> 00:00:03,000 Now step number two, 2 00:00:03,000 --> 00:00:06,000 is about those environment variables. 3 00:00:06,000 --> 00:00:08,000 And that's a very useful feature, 4 00:00:08,000 --> 00:00:12,000 since it allows us to use different values 5 00:00:12,000 --> 00:00:16,000 in parts of our code, during development and production. 6 00:00:16,000 --> 00:00:21,000 And Next.js has built-in support for environment variables. 7 00:00:21,000 --> 00:00:23,000 Now to explore them, I actually wanna explore 8 00:00:23,000 --> 00:00:25,000 another of concept first though. 9 00:00:25,000 --> 00:00:28,000 We can configure Next.js. 10 00:00:28,000 --> 00:00:31,000 Up to this point, this Next.js project 11 00:00:31,000 --> 00:00:36,000 worked with all the default settings Next.js assumes. 12 00:00:36,000 --> 00:00:40,000 And these are a sensible default, which often makes sense. 13 00:00:40,000 --> 00:00:43,000 But maybe you want to fine-tune them. 14 00:00:43,000 --> 00:00:44,000 And you can do this by adding 15 00:00:44,000 --> 00:00:47,000 a special file to your project 16 00:00:47,000 --> 00:00:51,000 a next.config.js file. 17 00:00:51,000 --> 00:00:54,000 This is a special file which has to be named like this 18 00:00:54,000 --> 00:00:58,000 and which has to sit in your root project folder, 19 00:00:58,000 --> 00:00:58,000 if you add it. 20 00:00:58,000 --> 00:01:02,000 And it's a file, which exports a JavaScript object 21 00:01:02,000 --> 00:01:06,000 with this Node.js export syntax. 22 00:01:06,000 --> 00:01:07,000 If you never worked with Node.js 23 00:01:07,000 --> 00:01:10,000 you might not know this syntax. 24 00:01:10,000 --> 00:01:14,000 This is in the end the equivalent to export default 25 00:01:14,000 --> 00:01:17,000 in front-end JavaScript so to say. 26 00:01:17,000 --> 00:01:20,000 So we export such an object here 27 00:01:20,000 --> 00:01:22,000 and that's now our object 28 00:01:22,000 --> 00:01:25,000 which allows you to set various configuration options. 29 00:01:26,000 --> 00:01:28,000 Now, if you Google for next config 30 00:01:28,000 --> 00:01:31,000 you'll find your official documentation 31 00:01:31,000 --> 00:01:32,000 on that config file. 32 00:01:32,000 --> 00:01:35,000 And here you learn all about that file 33 00:01:35,000 --> 00:01:38,000 and what you can configure there. 34 00:01:38,000 --> 00:01:42,000 You can configure a lot here, but for most of the settings 35 00:01:42,000 --> 00:01:44,000 the defaults are fine. 36 00:01:44,000 --> 00:01:46,000 But you can, for example add environment variables, 37 00:01:46,000 --> 00:01:48,000 something we'll do in a second. 38 00:01:48,000 --> 00:01:50,000 You could add a basePath 39 00:01:50,000 --> 00:01:54,000 if you're hosting your next website, 40 00:01:54,000 --> 00:01:56,000 not on the root level of some domain, 41 00:01:56,000 --> 00:01:58,000 but in some nested path. 42 00:01:58,000 --> 00:02:00,000 You can set up rewrites and redirects, 43 00:02:00,000 --> 00:02:03,000 if you have some hard-coded redirects, 44 00:02:03,000 --> 00:02:05,000 which should be taken into account 45 00:02:05,000 --> 00:02:09,000 when the application is deployed and much more. 46 00:02:09,000 --> 00:02:12,000 You can inject your own Webpack configuration 47 00:02:12,000 --> 00:02:15,000 to really tap into that build process. 48 00:02:15,000 --> 00:02:19,000 You can disable compression, it's enabled by default, 49 00:02:19,000 --> 00:02:22,000 but you can disable it if you don't wanna use it 50 00:02:22,000 --> 00:02:24,000 for whatever reason. 51 00:02:24,000 --> 00:02:27,000 Compression will make your JavaScript files 52 00:02:27,000 --> 00:02:28,000 and so on smaller. 53 00:02:28,000 --> 00:02:32,000 So you should enable it by default and much more. 54 00:02:32,000 --> 00:02:34,000 So you see, there are a couple of things you can set, 55 00:02:34,000 --> 00:02:39,000 but to be honest most of the settings will rarely be needed. 56 00:02:39,000 --> 00:02:42,000 And you will know when you need them. 57 00:02:42,000 --> 00:02:45,000 The most helpful settings are probably redirects 58 00:02:45,000 --> 00:02:48,000 and custom headers and environment variables 59 00:02:48,000 --> 00:02:50,000 and the basePath. 60 00:02:50,000 --> 00:02:52,000 For this project though, we need no rewrites. 61 00:02:52,000 --> 00:02:55,000 We don't need to change the basePath. 62 00:02:55,000 --> 00:02:57,000 We don't need any custom headers 63 00:02:57,000 --> 00:03:00,000 but we will explore environment variables. 64 00:03:00,000 --> 00:03:05,000 And the idea really is that in our API route here 65 00:03:05,000 --> 00:03:08,000 we swap out some of these values here 66 00:03:08,000 --> 00:03:12,000 from this connection string for dynamic values, 67 00:03:12,000 --> 00:03:16,000 which can then differ between development and production. 68 00:03:16,000 --> 00:03:19,000 So that we can have a development database connection 69 00:03:19,000 --> 00:03:21,000 and a production database. 70 00:03:21,000 --> 00:03:25,000 And we don't delete or manipulate production data 71 00:03:25,000 --> 00:03:28,000 with our development tests. 72 00:03:28,000 --> 00:03:32,000 And to make that work, I'll go to that next config file 73 00:03:32,000 --> 00:03:34,000 and add the env key. 74 00:03:34,000 --> 00:03:38,000 That's also what you see in the official docs here. 75 00:03:38,000 --> 00:03:42,000 This allows you to set up key value pairs of your choices 76 00:03:42,000 --> 00:03:47,000 and you will then be able to use your keys in your code 77 00:03:47,000 --> 00:03:52,000 both in the API routes, as well as in any other component. 78 00:03:53,000 --> 00:03:56,000 So you can use your environment variables 79 00:03:56,000 --> 00:03:58,000 anywhere in your code base. 80 00:03:59,000 --> 00:04:03,000 So here all of the setup a couple of environment variables 81 00:04:03,000 --> 00:04:08,000 and I'll start with MongoDB username. 82 00:04:08,000 --> 00:04:10,000 Now how you named that variable is up to you 83 00:04:10,000 --> 00:04:14,000 but I'll name it like this and set this to Maximilian. 84 00:04:14,000 --> 00:04:19,000 Then add the MongoDB password and set this to the password 85 00:04:19,000 --> 00:04:24,000 I have here in my connection string 86 00:04:25,000 --> 00:04:29,000 then I'll add the MongoDB cluster name. 87 00:04:30,000 --> 00:04:35,000 And here I will use this cluster zero thing here, 88 00:04:36,000 --> 00:04:39,000 so that if I had multiple clusters in my account 89 00:04:39,000 --> 00:04:42,000 I can use different clusters for different environments. 90 00:04:42,000 --> 00:04:44,000 So I'll add this here. 91 00:04:44,000 --> 00:04:49,000 And then I'll also add the MongoDB database key. 92 00:04:51,000 --> 00:04:53,000 And here, I wanna grab that database 93 00:04:53,000 --> 00:04:58,000 to which I'm connecting my-site and set this here. 94 00:04:58,000 --> 00:05:01,000 Now you might be wondering why I'm doing this here. 95 00:05:01,000 --> 00:05:02,000 What's the benefit. 96 00:05:02,000 --> 00:05:07,000 The benefit is that now we can tap into those values. 97 00:05:07,000 --> 00:05:09,000 We'll do that in a second. 98 00:05:09,000 --> 00:05:11,000 And when we then deploy our application 99 00:05:11,000 --> 00:05:14,000 we can override these values 100 00:05:14,000 --> 00:05:16,000 and you'll see how we can override them 101 00:05:16,000 --> 00:05:19,000 in a couple of minutes, once we deploy. 102 00:05:19,000 --> 00:05:21,000 And therefore we now need to switch 103 00:05:21,000 --> 00:05:23,000 to using environment variables. 104 00:05:23,000 --> 00:05:25,000 So back in the API route, 105 00:05:25,000 --> 00:05:30,000 I'll now set up my connection string here 106 00:05:31,000 --> 00:05:33,000 in a separate constant simply to make it 107 00:05:33,000 --> 00:05:34,000 a bit easier to work with it. 108 00:05:34,000 --> 00:05:37,000 And I'll set up a template literal here 109 00:05:37,000 --> 00:05:41,000 because now I need to mix hard-coded and dynamic values. 110 00:05:41,000 --> 00:05:46,000 And I'll still start with that MongoDB plus SRV part here 111 00:05:47,000 --> 00:05:49,000 but then after the two slashes 112 00:05:49,000 --> 00:05:54,000 I wanna inject the value from my environment variable 113 00:05:54,000 --> 00:05:58,000 from that MongoDB username environment variable. 114 00:05:59,000 --> 00:06:01,000 And here we see in the official docs 115 00:06:01,000 --> 00:06:03,000 that we get access to those values 116 00:06:03,000 --> 00:06:08,000 by tapping into the global process variable 117 00:06:08,000 --> 00:06:12,000 which is exposed by Node.js, then dote env 118 00:06:12,000 --> 00:06:15,000 and then into the key name of our choice. 119 00:06:15,000 --> 00:06:18,000 Now this placeholder will be replaced 120 00:06:18,000 --> 00:06:21,000 with the concrete value during the build process. 121 00:06:21,000 --> 00:06:23,000 That's important. 122 00:06:23,000 --> 00:06:25,000 So this will not be resolved to dynamically 123 00:06:25,000 --> 00:06:27,000 after we built the app 124 00:06:27,000 --> 00:06:31,000 but it will be swapped out during the build process. 125 00:06:31,000 --> 00:06:33,000 And that allows us to replace it 126 00:06:33,000 --> 00:06:35,000 with our environment variable value. 127 00:06:35,000 --> 00:06:37,000 And it allows us to use different values 128 00:06:37,000 --> 00:06:41,000 for building, for production, then during development. 129 00:06:41,000 --> 00:06:44,000 But again, we're going to see this in a second. 130 00:06:44,000 --> 00:06:47,000 So they are for now in contact.js here. 131 00:06:47,000 --> 00:06:51,000 I now want to use process.env.mongodb username here. 132 00:06:55,000 --> 00:06:58,000 Then we have a colon here. 133 00:06:58,000 --> 00:07:01,000 So this is hard-coded and there after the password 134 00:07:01,000 --> 00:07:05,000 which we get from process.env.mongodb_password. 135 00:07:07,000 --> 00:07:09,000 And here I'm using the keys. 136 00:07:09,000 --> 00:07:14,000 I have set up in my env part of that configuration. 137 00:07:15,000 --> 00:07:19,000 Now we also wanna replace the cluster and the database. 138 00:07:19,000 --> 00:07:22,000 So back here in contact.js. 139 00:07:22,000 --> 00:07:27,000 Now we have a @ after the password 140 00:07:28,000 --> 00:07:29,000 and then the cluster name. 141 00:07:29,000 --> 00:07:34,000 So here, I wanna tap into process.env.mongodb cluster name 142 00:07:36,000 --> 00:07:40,000 then thereafter, I have this hard-coded part. 143 00:07:40,000 --> 00:07:42,000 So I'll add that here again. 144 00:07:42,000 --> 00:07:47,000 And then inject process.env.mongodb database. 145 00:07:53,000 --> 00:07:57,000 And then there after add this query parameter like this. 146 00:08:00,000 --> 00:08:03,000 Okay, so now that's our dynamic connection string. 147 00:08:03,000 --> 00:08:06,000 That's now what I'll use here for connecting 148 00:08:06,000 --> 00:08:08,000 that connection string. 149 00:08:08,000 --> 00:08:11,000 And now here we use environment variables. 150 00:08:11,000 --> 00:08:12,000 Now that should work. 151 00:08:12,000 --> 00:08:17,000 If I now start the development server again with NPM run dev 152 00:08:18,000 --> 00:08:21,000 we should again be able to successfully test everything. 153 00:08:21,000 --> 00:08:26,000 Specifically I should still be able to send a message here. 154 00:08:27,000 --> 00:08:30,000 This should still work. 155 00:08:30,000 --> 00:08:33,000 Let's see sent message success. 156 00:08:34,000 --> 00:08:37,000 And we got no error here either. 157 00:08:37,000 --> 00:08:41,000 So that works and now we're using environment variables. 158 00:08:41,000 --> 00:08:44,000 Now, environment variables are only helpful 159 00:08:44,000 --> 00:08:47,000 if we don't always use the same values. 160 00:08:47,000 --> 00:08:49,000 And at the moment, the only thing we did 161 00:08:49,000 --> 00:08:52,000 is that we moved these hard-coded values 162 00:08:52,000 --> 00:08:56,000 from contact.js into next.config.js 163 00:08:56,000 --> 00:08:59,000 But there they are still always the same 164 00:08:59,000 --> 00:09:01,000 at the moment we don't differentiate 165 00:09:01,000 --> 00:09:03,000 between production and development. 166 00:09:04,000 --> 00:09:07,000 Now there will be certain hosting providers 167 00:09:07,000 --> 00:09:11,000 which allow us to push our code to them 168 00:09:11,000 --> 00:09:13,000 and then they will do the build for us. 169 00:09:13,000 --> 00:09:18,000 And then there we can define different environment variables 170 00:09:18,000 --> 00:09:20,000 which they should use during the build process. 171 00:09:20,000 --> 00:09:23,000 And we'll see an example for this later 172 00:09:23,000 --> 00:09:27,000 but we're not necessarily always using a hosting provider 173 00:09:27,000 --> 00:09:29,000 that does to build for us. 174 00:09:29,000 --> 00:09:32,000 And therefore for in next.config.js 175 00:09:32,000 --> 00:09:35,000 we can actually define different values 176 00:09:35,000 --> 00:09:37,000 for the environment variables, 177 00:09:37,000 --> 00:09:40,000 for the different phases we might be in. 178 00:09:40,000 --> 00:09:43,000 To be precise, when we run NPM run dev 179 00:09:45,000 --> 00:09:47,000 to start the development server 180 00:09:47,000 --> 00:09:49,000 we clearly are in development. 181 00:09:49,000 --> 00:09:53,000 Our current phase is development. 182 00:09:53,000 --> 00:09:56,000 If we run NPM run build though 183 00:09:56,000 --> 00:09:59,000 to trigger the next build script, 184 00:09:59,000 --> 00:10:01,000 or if we run the export script 185 00:10:01,000 --> 00:10:04,000 which I explained a couple of minutes ago 186 00:10:04,000 --> 00:10:07,000 then we are clearly building for production 187 00:10:07,000 --> 00:10:11,000 because that's the idea behind next build and next export. 188 00:10:11,000 --> 00:10:14,000 So then our face is production. 189 00:10:14,000 --> 00:10:17,000 We want to use the production values. 190 00:10:17,000 --> 00:10:21,000 And because we have this clear way of telling Next.js 191 00:10:21,000 --> 00:10:24,000 whether we're building for development or production. 192 00:10:24,000 --> 00:10:27,000 Next.js allows us to define 193 00:10:27,000 --> 00:10:29,000 different sets of configuration values 194 00:10:29,000 --> 00:10:32,000 for development and production. 195 00:10:33,000 --> 00:10:35,000 For this we just need to import something. 196 00:10:35,000 --> 00:10:39,000 And we do this with this strange looking import syntax 197 00:10:39,000 --> 00:10:42,000 which is the default Node.js import syntax. 198 00:10:42,000 --> 00:10:45,000 And we have to use it here in this config file 199 00:10:45,000 --> 00:10:49,000 because this config file is read in a way 200 00:10:49,000 --> 00:10:52,000 that other import statements won't work yet. 201 00:10:53,000 --> 00:10:56,000 Here we need to import from next constants 202 00:10:57,000 --> 00:11:00,000 and make sure you import exactly like this 203 00:11:00,000 --> 00:11:01,000 with the require function 204 00:11:01,000 --> 00:11:04,000 on the right side of the equal sign. 205 00:11:04,000 --> 00:11:07,000 And then here we can import different phases 206 00:11:07,000 --> 00:11:10,000 to be precise we have to face development server, 207 00:11:10,000 --> 00:11:15,000 which will be used if we run NPM run dev. 208 00:11:15,000 --> 00:11:17,000 We have the phase export which will be used 209 00:11:17,000 --> 00:11:21,000 if we do that export command. 210 00:11:21,000 --> 00:11:25,000 And then we got the production build and production server, 211 00:11:25,000 --> 00:11:29,000 production build will be used if we run NPM run build 212 00:11:29,000 --> 00:11:33,000 and production server will be used after that build 213 00:11:33,000 --> 00:11:38,000 for the server side code once our server is up and running. 214 00:11:38,000 --> 00:11:41,000 So what we could do here is we can import 215 00:11:41,000 --> 00:11:46,000 that phase development server and then utilize the fact 216 00:11:46,000 --> 00:11:50,000 that our export the thing here in this config file 217 00:11:50,000 --> 00:11:54,000 can be an object but can also be a function. 218 00:11:54,000 --> 00:11:58,000 And I'll change this to a function, to a function 219 00:11:58,000 --> 00:12:01,000 which returns this configuration object then. 220 00:12:01,000 --> 00:12:05,000 So we moved that into this returned object now 221 00:12:05,000 --> 00:12:09,000 and I'm doing this because when using the function form 222 00:12:09,000 --> 00:12:13,000 we can add a if check to check in which phase we are. 223 00:12:13,000 --> 00:12:14,000 So if this configuration is loaded 224 00:12:14,000 --> 00:12:18,000 for the development server or for production. 225 00:12:18,000 --> 00:12:21,000 And we can find out in which phase we are 226 00:12:21,000 --> 00:12:25,000 because there's function here will be executed by Next.js 227 00:12:25,000 --> 00:12:29,000 and it will get the phase parameter. 228 00:12:29,000 --> 00:12:31,000 And then we can check if the phase 229 00:12:31,000 --> 00:12:34,000 for which this config file is being read in. 230 00:12:34,000 --> 00:12:37,000 If that is equal to phase development server 231 00:12:38,000 --> 00:12:40,000 and then we can say, if that's the case 232 00:12:40,000 --> 00:12:44,000 if we are in development then we wanna return 233 00:12:44,000 --> 00:12:48,000 a different config object than we do otherwise. 234 00:12:48,000 --> 00:12:53,000 So now here I'll grab these settings and add them here. 235 00:12:53,000 --> 00:12:55,000 And now that's my configuration object 236 00:12:55,000 --> 00:13:00,000 for this Next.js project, if we are in development. 237 00:13:00,000 --> 00:13:04,000 If we make it past this if check, we are not in development 238 00:13:04,000 --> 00:13:05,000 and in all those cases 239 00:13:05,000 --> 00:13:08,000 I could now set up different values here. 240 00:13:08,000 --> 00:13:11,000 For example, I could use a different database. 241 00:13:11,000 --> 00:13:14,000 I could say here, I'm not using my-site 242 00:13:14,000 --> 00:13:16,000 but my-site-dev during development. 243 00:13:16,000 --> 00:13:20,000 And then I use my-site in production. 244 00:13:20,000 --> 00:13:23,000 If we change everything like that, and we save this file. 245 00:13:23,000 --> 00:13:27,000 If I start the development server again with NPM run dev, 246 00:13:27,000 --> 00:13:31,000 then we'll see that if I reload this context page 247 00:13:31,000 --> 00:13:36,000 and I now do test this again, it should still work. 248 00:13:39,000 --> 00:13:43,000 But if I then log into MongoDB and explore my collections, 249 00:13:43,000 --> 00:13:47,000 what we'll see is that once this loaded here 250 00:13:47,000 --> 00:13:51,000 that we now have this my-site-dev database 251 00:13:51,000 --> 00:13:53,000 with a messages collection 252 00:13:53,000 --> 00:13:56,000 and that collection contains our one message. 253 00:13:56,000 --> 00:13:58,000 For some reason it doesn't load him for me 254 00:13:58,000 --> 00:14:00,000 but we can see that there's one document in there 255 00:14:00,000 --> 00:14:04,000 and we can clearly see that it's the right database name. 256 00:14:04,000 --> 00:14:07,000 So now we're using this during development 257 00:14:07,000 --> 00:14:10,000 and we'll use different settings for production. 258 00:14:10,000 --> 00:14:12,000 And that allows us to not accidentally override 259 00:14:12,000 --> 00:14:17,000 or mess with data from our real users during development. 260 00:14:17,000 --> 00:14:21,000 And that is why environment variables can be very useful 261 00:14:21,000 --> 00:14:24,000 and are another feature you should be aware of.