1
00:00:03,000 --> 00:00:05,215
We'll now begin the second phase

2
00:00:05,215 --> 00:00:07,153
of our Next Reviews project,

3
00:00:07,223 --> 00:00:10,051
where we'll evolve it from a Static Site

4
00:00:10,051 --> 00:00:12,628
into a Full-Stack Application.

5
00:00:12,628 --> 00:00:14,598
By doing that we'll learn the

6
00:00:14,598 --> 00:00:16,363
remaining Next.js features

7
00:00:16,431 --> 00:00:18,831
that are only available when running

8
00:00:18,831 --> 00:00:20,697
our app in a Node.js server.

9
00:00:20,764 --> 00:00:24,207
Let's imagine that, after launching our website,

10
00:00:24,207 --> 00:00:26,942
over time it has become quite popular.

11
00:00:26,942 --> 00:00:29,515
So we persuaded some of our friends

12
00:00:29,515 --> 00:00:31,942
to help us with the game reviews.

13
00:00:32,016 --> 00:00:34,988
And, to make it easier for our collaborators

14
00:00:34,988 --> 00:00:36,474
to write new articles,

15
00:00:36,542 --> 00:00:39,048
instead of Markdown files we

16
00:00:39,048 --> 00:00:41,107
decided to use a "CMS",

17
00:00:41,196 --> 00:00:44,058
that is a "Content Management System".

18
00:00:44,058 --> 00:00:46,543
This is a separate application where

19
00:00:46,543 --> 00:00:48,476
we'll store all the reviews,

20
00:00:48,545 --> 00:00:51,526
and it includes a user interface for our

21
00:00:51,526 --> 00:00:54,135
collaborators to edit each article,

22
00:00:54,210 --> 00:00:56,829
including previewing the Markdown.

23
00:00:56,829 --> 00:00:59,217
This CMS provides an API,

24
00:00:59,217 --> 00:01:02,402
that we can call from our Next.js application

25
00:01:02,402 --> 00:01:04,616
to fetch the data that we then

26
00:01:04,616 --> 00:01:06,166
display on the pages.

27
00:01:06,240 --> 00:01:08,688
This way we'll have lots of reviews

28
00:01:08,688 --> 00:01:10,297
to show on our website.

29
00:01:10,367 --> 00:01:12,708
It will also allow us to learn

30
00:01:12,708 --> 00:01:15,048
how to fetch data from an API.

31
00:01:15,126 --> 00:01:17,209
We'll also need to think about

32
00:01:17,209 --> 00:01:19,891
how to update our pages if the

33
00:01:19,891 --> 00:01:22,036
data in the CMS changes.

34
00:01:22,125 --> 00:01:24,912
As we'll see, there are a few ways to do that,

35
00:01:24,912 --> 00:01:28,416
from rendering the page dynamically every time,

36
00:01:28,416 --> 00:01:30,599
to building static pages that

37
00:01:30,599 --> 00:01:32,781
are automatically regenerated

38
00:01:32,856 --> 00:01:35,882
whenever the data in the CMS changes.

39
00:01:35,882 --> 00:01:38,873
We'll also cover Image Optimization.

40
00:01:38,873 --> 00:01:41,898
Before we get started, I want to explain

41
00:01:41,898 --> 00:01:44,317
why we'll use a Headless CMS for

42
00:01:44,317 --> 00:01:46,207
the rest of this example.

43
00:01:46,282 --> 00:01:48,822
So far we kept all the reviews

44
00:01:48,822 --> 00:01:50,853
in local Markdown files,

45
00:01:50,938 --> 00:01:54,458
and that approach works fine for a simple website,

46
00:01:54,458 --> 00:01:56,723
but it doesn't scale very well.

47
00:01:56,723 --> 00:01:59,259
For example if we want non-technical

48
00:01:59,259 --> 00:02:01,232
people to write the reviews,

49
00:02:01,303 --> 00:02:03,991
we cannot really expect them to edit

50
00:02:03,991 --> 00:02:06,380
Markdown files in a code editor,

51
00:02:06,455 --> 00:02:09,753
set all the right properties in the front matter,

52
00:02:09,753 --> 00:02:12,968
and push the changes to a Git repository.

53
00:02:12,968 --> 00:02:15,469
We'll need to give our collaborators

54
00:02:15,469 --> 00:02:17,066
a nicer user interface,

55
00:02:17,136 --> 00:02:19,621
and this also means our app needs to

56
00:02:19,621 --> 00:02:22,106
be able to save and modify the data.

57
00:02:22,176 --> 00:02:26,131
So instead of local files we could use a database,

58
00:02:26,131 --> 00:02:28,584
and have our Next.js app read

59
00:02:28,584 --> 00:02:30,783
and write data to that DB.

60
00:02:30,868 --> 00:02:33,202
In addition to our existing pages

61
00:02:33,202 --> 00:02:34,758
visible to the public,

62
00:02:34,829 --> 00:02:37,400
we could then have an admin UI,

63
00:02:37,400 --> 00:02:41,327
where staff members can add and edit the reviews.

64
00:02:41,327 --> 00:02:42,791
That's one option.

65
00:02:42,791 --> 00:02:45,621
A more sophisticated approach would be

66
00:02:45,621 --> 00:02:48,522
to have a separate backend application.

67
00:02:48,522 --> 00:02:51,303
This way all the database interactions

68
00:02:51,303 --> 00:02:53,572
will be handled by the backend,

69
00:02:53,645 --> 00:02:56,032
and our Next.js App only needs

70
00:02:56,032 --> 00:02:58,180
to talk to the Backend API,

71
00:02:58,259 --> 00:03:02,293
by making HTTP requests using "fetch" for example.

72
00:03:02,293 --> 00:03:04,585
One reason we may want to do this is

73
00:03:04,585 --> 00:03:07,726
if we have multiple front-end applications,

74
00:03:07,726 --> 00:03:11,532
like separate mobile apps for Android and iOS.

75
00:03:11,532 --> 00:03:13,483
They could all call the same

76
00:03:13,483 --> 00:03:15,295
Backend to fetch the data.

77
00:03:15,365 --> 00:03:18,039
Even if we only have a web application,

78
00:03:18,039 --> 00:03:19,205
like in our case,

79
00:03:19,274 --> 00:03:21,631
there's another possible advantage

80
00:03:21,631 --> 00:03:23,434
to calling a separate API,

81
00:03:23,503 --> 00:03:25,724
and that's that we don't have to

82
00:03:25,724 --> 00:03:27,667
write the backend ourselves.

83
00:03:27,736 --> 00:03:30,203
We can use an existing solution,

84
00:03:30,203 --> 00:03:31,898
like a "Headless CMS",

85
00:03:31,975 --> 00:03:35,499
that is a Content Management System that provides

86
00:03:35,499 --> 00:03:37,721
both an API, that we can call

87
00:03:37,721 --> 00:03:39,331
from our Next.js app,

88
00:03:39,408 --> 00:03:42,720
and a user interface for administrators

89
00:03:42,720 --> 00:03:45,013
to write and edit the data.

90
00:03:45,098 --> 00:03:48,771
So, by using a ready-made solution like this,

91
00:03:48,771 --> 00:03:51,696
our Next.js App only needs to serve

92
00:03:51,696 --> 00:03:53,701
the public-facing pages.

93
00:03:53,785 --> 00:03:55,851
It can stay mostly as it was at

94
00:03:55,851 --> 00:03:57,718
the end of our last section,

95
00:03:57,784 --> 00:04:01,864
except that we'll fetch data from the CMS API

96
00:04:01,864 --> 00:04:04,835
rather than loading it from local files.

97
00:04:04,835 --> 00:04:08,463
So that's why we'll use a Headless CMS.

98
00:04:08,463 --> 00:04:10,669
The question at this point is:

99
00:04:10,669 --> 00:04:12,654
which CMS should we choose?

100
00:04:12,728 --> 00:04:15,457
There are literally dozens of Content

101
00:04:15,457 --> 00:04:17,596
Management Systems available.

102
00:04:17,670 --> 00:04:20,380
Some of them are open source projects,

103
00:04:20,380 --> 00:04:22,626
others are cloud platforms,

104
00:04:22,626 --> 00:04:25,968
and each one offers slightly different features.

105
00:04:25,968 --> 00:04:28,708
For our example we'll use Strapi,

106
00:04:28,708 --> 00:04:30,495
because it's open source,

107
00:04:30,495 --> 00:04:33,414
and you can run it locally on your machine.

108
00:04:33,414 --> 00:04:35,672
This will allow me to give you a

109
00:04:35,672 --> 00:04:37,929
Strapi project you can download,

110
00:04:38,000 --> 00:04:41,767
and already includes some review data and images,

111
00:04:41,767 --> 00:04:43,931
so this will make it easy for you

112
00:04:43,931 --> 00:04:46,094
to follow along with the example.

113
00:04:46,160 --> 00:04:48,164
But, if you're choosing a CMS

114
00:04:48,164 --> 00:04:49,685
for your own projects,

115
00:04:49,754 --> 00:04:52,208
you may well have different requirements,

116
00:04:52,208 --> 00:04:54,548
so you may want to do your own research

117
00:04:54,548 --> 00:04:56,945
to see which CMS is the best

118
00:04:56,945 --> 00:04:59,256
fit for your specific case.

119
00:04:59,342 --> 00:05:02,445
Still, even though the details may differ

120
00:05:02,445 --> 00:05:05,224
all Content Management Systems provide

121
00:05:05,224 --> 00:05:07,344
the same basic functionality,

122
00:05:07,418 --> 00:05:10,645
so Strapi will still be a useful example of

123
00:05:10,645 --> 00:05:14,505
how to integrate a Next.js app with a CMS.