1
00:00:03,000 --> 00:00:05,764
The project we'll build to learn the

2
00:00:05,764 --> 00:00:08,529
App Router is called "Next Reviews".

3
00:00:08,606 --> 00:00:12,759
We'll pretend that we are big fans of indie games,

4
00:00:12,759 --> 00:00:15,232
and we decided to create a website

5
00:00:15,232 --> 00:00:18,182
where we'll publish our own game reviews.

6
00:00:18,182 --> 00:00:20,966
Of course we'll have multiple pages,

7
00:00:20,966 --> 00:00:23,128
including one for each review.

8
00:00:23,128 --> 00:00:25,931
This application will allow us to learn

9
00:00:25,931 --> 00:00:28,016
all the Next.js fundamentals,

10
00:00:28,088 --> 00:00:31,219
like how to map each page to a URL path,

11
00:00:31,219 --> 00:00:34,719
layouts, rendering, navigation, styling,

12
00:00:34,719 --> 00:00:38,729
images and static assets, custom fonts, and so on.

13
00:00:38,729 --> 00:00:41,591
Now, for the first release of our website

14
00:00:41,591 --> 00:00:44,558
we'll keep all the data in local files.

15
00:00:44,558 --> 00:00:46,880
We'll write the content for each

16
00:00:46,880 --> 00:00:48,766
review in Markdown format,

17
00:00:48,839 --> 00:00:52,348
and then load and display that data in the page.

18
00:00:52,348 --> 00:00:54,703
Most of the content will be static,

19
00:00:54,703 --> 00:00:56,853
but we'll also have a tiny bit

20
00:00:56,853 --> 00:00:58,931
of interactive functionality,

21
00:00:59,003 --> 00:01:01,805
in the form of this "Share link" button,

22
00:01:01,805 --> 00:01:04,159
that users can click to copy the

23
00:01:04,159 --> 00:01:06,218
review URL to the clipboard,

24
00:01:06,292 --> 00:01:08,390
so they can share it on social

25
00:01:08,390 --> 00:01:09,859
networks for example.

26
00:01:09,929 --> 00:01:12,975
This will let us understand the difference between

27
00:01:12,975 --> 00:01:16,650
Server Components and Client Components.

28
00:01:16,650 --> 00:01:18,674
This example will cover all

29
00:01:18,674 --> 00:01:20,698
the main features available

30
00:01:20,773 --> 00:01:24,793
when using Next.js as a Static Site Generator.

31
00:01:24,793 --> 00:01:28,406
There are effectively two ways to use Next.js:

32
00:01:28,406 --> 00:01:30,960
as a Static Site Generator, or

33
00:01:30,960 --> 00:01:33,173
as a Full-Stack Framework.

34
00:01:33,258 --> 00:01:36,119
Static Site Generation means that

35
00:01:36,119 --> 00:01:38,694
we can build our code into a folder

36
00:01:38,694 --> 00:01:41,048
that only contains static files,

37
00:01:41,121 --> 00:01:44,729
that are HTML, JavaScript, and other assets.

38
00:01:44,729 --> 00:01:47,114
This way we can then deploy our

39
00:01:47,114 --> 00:01:49,113
website to any web server.

40
00:01:49,190 --> 00:01:51,587
To use Next.js as a Full-Stack

41
00:01:51,587 --> 00:01:53,745
Framework on the other hand

42
00:01:53,825 --> 00:01:57,843
you need to run your code in a Node.js server.

43
00:01:57,843 --> 00:02:00,753
This way, in addition to Static Pages,

44
00:02:00,753 --> 00:02:03,462
you can use Server-Side Rendering,

45
00:02:03,462 --> 00:02:05,250
meaning that the server will

46
00:02:05,250 --> 00:02:06,974
dynamically generate a page

47
00:02:07,038 --> 00:02:09,359
whenever a client requests it.

48
00:02:09,359 --> 00:02:11,996
It also supports Revalidation,

49
00:02:11,996 --> 00:02:14,368
which is a way to automatically

50
00:02:14,368 --> 00:02:16,205
regenerate static pages,

51
00:02:16,282 --> 00:02:19,011
either periodically or on demand.

52
00:02:19,011 --> 00:02:22,369
Running your application on a Node.js server

53
00:02:22,369 --> 00:02:25,762
gives you access to all the Next.js features.

54
00:02:25,762 --> 00:02:28,649
But most features are also supported

55
00:02:28,649 --> 00:02:30,733
by Static Site Generation.

56
00:02:30,814 --> 00:02:33,893
The only difference is effectively Server-Side

57
00:02:33,893 --> 00:02:35,701
Rendering and Revalidation.

58
00:02:35,768 --> 00:02:38,737
This means you can start using Next.js

59
00:02:38,737 --> 00:02:40,847
as a Static Site Generator,

60
00:02:40,925 --> 00:02:43,121
and then, later on, if you need

61
00:02:43,121 --> 00:02:44,750
the Full-Stack features

62
00:02:44,821 --> 00:02:48,452
you can switch to running it on a Node.js server.

63
00:02:48,452 --> 00:02:50,835
That is in fact what we'll do with

64
00:02:50,835 --> 00:02:52,588
our Next Reviews Project.

65
00:02:52,658 --> 00:02:54,126
Let's get started!