1
00:00:03,000 --> 00:00:05,108
This section was mainly about

2
00:00:05,108 --> 00:00:08,235
how to fetch data in a Next.js application.

3
00:00:08,235 --> 00:00:10,125
But I also want to mention

4
00:00:10,125 --> 00:00:12,306
something about configuration.

5
00:00:13,025 --> 00:00:15,357
When we call the CMS for example,

6
00:00:15,357 --> 00:00:18,539
we defined a "CMS_URL" property in this file.

7
00:00:19,109 --> 00:00:22,465
But this is currently pointing to "localhost"

8
00:00:22,465 --> 00:00:26,043
because we're running our Strapi server locally.

9
00:00:26,043 --> 00:00:28,504
When we run our app in production

10
00:00:28,504 --> 00:00:31,337
we may want the Next.js app to connect

11
00:00:31,337 --> 00:00:33,201
to a different "CMS_URL",

12
00:00:33,201 --> 00:00:36,482
pointing to a production instance of Strapi.

13
00:00:37,355 --> 00:00:40,805
Using different configuration for different environments

14
00:00:40,805 --> 00:00:42,592
is a very common requirement.

15
00:00:43,154 --> 00:00:46,133
And Next.js provides support for that

16
00:00:46,133 --> 00:00:48,387
using environment variables.

17
00:00:48,968 --> 00:00:50,833
We can use ".env" files

18
00:00:50,833 --> 00:00:54,401
to define variables, such as this "DB_HOST",

19
00:00:54,983 --> 00:00:57,384
and then in our JavaScript code

20
00:00:57,384 --> 00:01:01,180
we can get the value of that environment variable

21
00:01:01,180 --> 00:01:03,117
as "process.env.DB_HOST".

22
00:01:03,772 --> 00:01:06,698
"process.env" in Node.js gives us access

23
00:01:06,698 --> 00:01:09,112
to all the environment variables.

24
00:01:09,686 --> 00:01:12,389
So in our app we can start by creating

25
00:01:12,389 --> 00:01:14,380
a new file at the top-level,

26
00:01:14,380 --> 00:01:15,376
called ".env".

27
00:01:16,019 --> 00:01:17,441
And here we can write variables,

28
00:01:17,941 --> 00:01:21,200
using a simple "NAME=value" syntax.

29
00:01:21,700 --> 00:01:23,912
For the CMS_URL we can simply copy

30
00:01:23,912 --> 00:01:25,278
the existing address.

31
00:01:25,844 --> 00:01:27,687
And that's it. We can now read

32
00:01:27,687 --> 00:01:29,961
that environment variable in our code

33
00:01:30,777 --> 00:01:33,986
as "process.env.CMS_URL".

34
00:01:35,343 --> 00:01:37,444
We're actually getting an error now,

35
00:01:37,444 --> 00:01:38,494
and that's because

36
00:01:38,494 --> 00:01:41,413
that environment variable will not be defined yet.

37
00:01:42,030 --> 00:01:44,903
".env" files are not reloaded automatically,

38
00:01:44,903 --> 00:01:47,580
so every time we change our configuration

39
00:01:47,580 --> 00:01:50,388
we need to manually restart the dev server.

40
00:01:51,019 --> 00:01:53,025
You can see that our app is now working again.

41
00:01:53,525 --> 00:01:55,606
Now, if you prefer you can also use

42
00:01:55,606 --> 00:01:57,806
the object destructuring syntax here.

43
00:01:57,806 --> 00:01:59,591
It's the same thing of course.

44
00:02:03,491 --> 00:02:06,963
So this is how we can define an environment variable.

45
00:02:06,963 --> 00:02:09,911
But what about having different configuration

46
00:02:09,911 --> 00:02:11,614
in different environments?

47
00:02:12,246 --> 00:02:14,546
Let's say that we only want to use this

48
00:02:14,546 --> 00:02:17,201
"localhost" URL when running the app locally.

49
00:02:17,760 --> 00:02:19,980
But when running in production

50
00:02:19,980 --> 00:02:23,235
our app should connect to "api.example.com".

51
00:02:23,808 --> 00:02:25,989
Now, that's just an example of course.

52
00:02:25,989 --> 00:02:27,595
If we restart our dev server

53
00:02:29,741 --> 00:02:31,265
our app will not work

54
00:02:31,265 --> 00:02:34,168
because "api.example.com" doesn't exist.

55
00:02:34,168 --> 00:02:36,345
But we can tell from the error

56
00:02:36,345 --> 00:02:39,684
that our app is trying to connect to that URL.

57
00:02:40,401 --> 00:02:42,486
Now, if we want a different configuration

58
00:02:42,486 --> 00:02:44,062
for when we run the app locally

59
00:02:44,612 --> 00:02:48,262
we can create another file called ".env.local".

60
00:02:48,262 --> 00:02:51,446
And whatever we put in here will override

61
00:02:51,446 --> 00:02:55,018
the values defined in the default ".env" file.

62
00:02:55,674 --> 00:02:59,218
So I'm going to paste our original CMS_URL here.

63
00:02:59,718 --> 00:03:02,216
And if we restart the dev server again,

64
00:03:02,216 --> 00:03:05,034
so it will read the new configuration files,

65
00:03:06,351 --> 00:03:07,848
our app is working again,

66
00:03:07,848 --> 00:03:10,904
which means it's connecting to the "localhost" URL.

67
00:03:11,464 --> 00:03:14,416
Because what we have in ".env.local"

68
00:03:14,416 --> 00:03:16,630
overrides what's in ".env".

69
00:03:17,212 --> 00:03:20,740
Now, another thing we may want to make configurable

70
00:03:20,740 --> 00:03:24,060
is the "revalidate" time we set in the HomePage,

71
00:03:24,630 --> 00:03:27,806
and also in the ProductPage, in "getStaticProps".

72
00:03:28,596 --> 00:03:31,393
If we extract this into an environment variable

73
00:03:31,393 --> 00:03:32,821
we can also be sure that

74
00:03:32,821 --> 00:03:35,261
we use the same setting in all the pages.

75
00:03:35,881 --> 00:03:38,969
And by default we can set it to 300 seconds,

76
00:03:38,969 --> 00:03:40,513
which means 5 minutes.

77
00:03:40,513 --> 00:03:43,460
So that's what will be used in production.

78
00:03:44,101 --> 00:03:46,500
But we can override this locally

79
00:03:46,500 --> 00:03:49,274
and set it to 30 seconds for testing.

80
00:03:49,849 --> 00:03:51,421
Now we need to actually use

81
00:03:51,421 --> 00:03:53,634
that environment variable in our code.

82
00:03:54,515 --> 00:03:58,125
So that's "process.env.REVALIDATE_SECONDS".

83
00:03:58,625 --> 00:04:01,341
But there's something we need to be careful about:

84
00:04:01,341 --> 00:04:02,699
this value is a "string".

85
00:04:03,254 --> 00:04:07,134
However Next.js expects "revalidate" to be a number,

86
00:04:07,134 --> 00:04:10,641
so we need to parse the string into an integer.

87
00:04:10,641 --> 00:04:13,253
Remember that environment variables

88
00:04:13,253 --> 00:04:15,119
are always string values,

89
00:04:15,119 --> 00:04:18,327
so you need to convert them when necessary.

90
00:04:19,127 --> 00:04:22,134
Now, let's use the same in our ProductPage as well.

91
00:04:24,026 --> 00:04:25,119
And this should do.

92
00:04:25,119 --> 00:04:27,880
To test it we'll need to run a production build.

93
00:04:33,192 --> 00:04:34,786
If we look at the output

94
00:04:34,786 --> 00:04:37,775
it does show "30 Seconds" as the ISR setting.

95
00:04:38,341 --> 00:04:39,967
So that's working fine.

96
00:04:39,967 --> 00:04:43,217
30 seconds is what we defined in ".env.local".

97
00:04:44,207 --> 00:04:45,482
Let me restart the dev server,

98
00:04:47,907 --> 00:04:49,612
and check that the app is still working.

99
00:04:51,340 --> 00:04:54,521
Ok. So what's in ".env" gets overriden

100
00:04:54,521 --> 00:04:56,697
by what's in ".env.local".

101
00:04:56,697 --> 00:05:00,798
But we don't have to redefine all variables here.

102
00:05:01,465 --> 00:05:04,921
If we don't want to override the CMS_URL for example

103
00:05:04,921 --> 00:05:07,047
we can just remove it from here,

104
00:05:07,613 --> 00:05:10,555
and let me put the value that works in ".env".

105
00:05:11,055 --> 00:05:13,101
If I restart the dev server now

106
00:05:13,101 --> 00:05:15,872
it will use the value in ".env" of course.

107
00:05:18,355 --> 00:05:21,096
The final thing I want to mention is that

108
00:05:21,096 --> 00:05:23,302
you should check this ".env" file

109
00:05:23,302 --> 00:05:24,706
into version control.

110
00:05:25,339 --> 00:05:27,777
Because it contains the default settings

111
00:05:27,777 --> 00:05:30,276
that should be used in most environments.

112
00:05:30,836 --> 00:05:32,742
But you should not keep your

113
00:05:32,742 --> 00:05:34,920
".env.local" in version control,

114
00:05:34,920 --> 00:05:37,778
because these settings should only be used

115
00:05:37,778 --> 00:05:39,275
on your local machine.

116
00:05:39,275 --> 00:05:41,589
You don't want them to be included

117
00:05:41,589 --> 00:05:43,630
when you deploy to production.

118
00:05:44,471 --> 00:05:47,155
If you use Git, this means ".env.local"

119
00:05:47,155 --> 00:05:49,633
should be in your ".gitignore" file,

120
00:05:50,201 --> 00:05:52,997
while ".env" should not be in ".gitignore".

121
00:05:52,997 --> 00:05:56,118
When you generate a project with Create Next App

122
00:05:56,118 --> 00:05:58,654
it already includes a ".gitignore" file

123
00:05:58,654 --> 00:06:00,020
with the right rules,

124
00:06:00,020 --> 00:06:02,490
so you don't have to worry about that.