1
00:00:00,000 --> 00:00:04,000
And that's now it for this section.

2
00:00:04,000 --> 00:00:08,000
In this section, we had a in-depth look into NextJS

3
00:00:08,000 --> 00:00:10,000
using this App Router

4
00:00:10,000 --> 00:00:13,000
and you learned how you can set up routes

5
00:00:13,000 --> 00:00:16,000
by using the file system instead of app

6
00:00:16,000 --> 00:00:18,000
and by using these special file names

7
00:00:18,000 --> 00:00:22,000
like page.js and layout.js.

8
00:00:22,000 --> 00:00:25,000
You also learned about other special files

9
00:00:25,000 --> 00:00:28,000
like error.js for handling errors,

10
00:00:28,000 --> 00:00:31,000
or not-found.js for handling not found errors,

11
00:00:31,000 --> 00:00:34,000
or the loading js file, which I'm not using here,

12
00:00:34,000 --> 00:00:36,000
but which we used temporarily

13
00:00:36,000 --> 00:00:39,000
to show some loading state on the screen.

14
00:00:39,000 --> 00:00:42,000
Though you learned that you have more granular control

15
00:00:42,000 --> 00:00:46,000
by using suspense, which is what we then did.

16
00:00:46,000 --> 00:00:49,000
Now you also learned how to configure dynamic routes

17
00:00:49,000 --> 00:00:53,000
where some path segments aren't known in advance,

18
00:00:53,000 --> 00:00:58,000
like here, where we load pages for individual meals,

19
00:00:58,000 --> 00:01:02,000
where we don't know in advance how many meals we'll have

20
00:01:02,000 --> 00:01:06,000
and most importantly, you learned that all those pages

21
00:01:06,000 --> 00:01:10,000
in the end just export standard React components,

22
00:01:10,000 --> 00:01:12,000
but that those components

23
00:01:12,000 --> 00:01:16,000
are kind of special when using NextJS.

24
00:01:16,000 --> 00:01:18,000
That they are server components

25
00:01:18,000 --> 00:01:21,000
that are executed on the server,

26
00:01:21,000 --> 00:01:23,000
that are rendered on the server, therefore.

27
00:01:24,000 --> 00:01:27,000
And it's not just those page components,

28
00:01:27,000 --> 00:01:29,000
but instead all components

29
00:01:29,000 --> 00:01:33,000
unless you explicitly opt out of this behavior

30
00:01:33,000 --> 00:01:37,000
by adding this use client directive to convert a file

31
00:01:37,000 --> 00:01:40,000
and its components into a client component,

32
00:01:40,000 --> 00:01:43,000
which then is rendered on the client and which then

33
00:01:43,000 --> 00:01:48,000
therefore may use client side functionality like useState

34
00:01:48,000 --> 00:01:50,000
or handling user events.

35
00:01:50,000 --> 00:01:54,000
You therefore also learned that you can take advantage

36
00:01:54,000 --> 00:01:57,000
of those Server components by fetching data directly

37
00:01:57,000 --> 00:01:59,000
inside of those components.

38
00:01:59,000 --> 00:02:02,000
There is no need to use user effect

39
00:02:02,000 --> 00:02:05,000
and send requests to separate backends.

40
00:02:05,000 --> 00:02:08,000
Instead, you can fetch the data from right

41
00:02:08,000 --> 00:02:10,000
inside your Server components.

42
00:02:10,000 --> 00:02:13,000
And you can just fetch the data,

43
00:02:13,000 --> 00:02:18,000
you also learned about Server Actions, async functions

44
00:02:18,000 --> 00:02:22,000
that either have to use Server directive inside of them

45
00:02:22,000 --> 00:02:26,000
or that are stored in a file with used Server at the top.

46
00:02:26,000 --> 00:02:30,000
And the special thing about those Server Actions is

47
00:02:30,000 --> 00:02:35,000
that you can assign them as values to the action prop

48
00:02:35,000 --> 00:02:39,000
on form elements, either directly

49
00:02:39,000 --> 00:02:42,000
or as we're doing it here with help of useFormState,

50
00:02:43,000 --> 00:02:47,000
which is a hook provided by react-dom

51
00:02:47,000 --> 00:02:52,000
to handle responses returned by the Server action function

52
00:02:52,000 --> 00:02:56,000
and then potentially update the UI based on those responses.

53
00:02:56,000 --> 00:02:59,000
Like here where we are conditionally

54
00:02:59,000 --> 00:03:01,000
showing an error message.

55
00:03:01,000 --> 00:03:05,000
Speaking of updating the UI based on Server Actions,

56
00:03:05,000 --> 00:03:09,000
you also learned about the useFormStatus hook,

57
00:03:09,000 --> 00:03:12,000
which can be used to find out whether a form

58
00:03:12,000 --> 00:03:13,000
is currently being submitted

59
00:03:13,000 --> 00:03:18,000
or not, which can then be used to update the UI accordingly.

60
00:03:18,000 --> 00:03:21,000
Now, related to all of that, you also learned

61
00:03:21,000 --> 00:03:26,000
that NextJS does some pretty aggressive caching

62
00:03:26,000 --> 00:03:30,000
and that therefore you should call revalidatePath

63
00:03:30,000 --> 00:03:34,000
whenever you change some data to make sure

64
00:03:34,000 --> 00:03:36,000
that the latest data is fetched

65
00:03:36,000 --> 00:03:39,000
and represented on your pages.

66
00:03:39,000 --> 00:03:41,000
And you also saw that it can be dangerous

67
00:03:41,000 --> 00:03:44,000
if you never test your app in production mode

68
00:03:44,000 --> 00:03:47,000
because everything worked in development mode

69
00:03:47,000 --> 00:03:48,000
in our app here,

70
00:03:48,000 --> 00:03:52,000
but then suddenly the data was missing in production mode.

71
00:03:52,000 --> 00:03:55,000
So this is an important function

72
00:03:55,000 --> 00:03:58,000
and an important concept to understand in general.

73
00:04:00,000 --> 00:04:04,000
Now, last but not least, we also talked about metadata

74
00:04:04,000 --> 00:04:08,000
that can be added to pages, static metadata

75
00:04:08,000 --> 00:04:12,000
as we have it here or dynamically generated metadata.

76
00:04:12,000 --> 00:04:14,000
And therefore at this point you

77
00:04:14,000 --> 00:04:18,000
have a super solid NextJS foundation

78
00:04:18,000 --> 00:04:20,000
and you are ready to use NextJS

79
00:04:20,000 --> 00:04:23,000
with its App Router in your future projects.