1
00:00:03,000 --> 00:00:05,441
In the first part of this course

2
00:00:05,441 --> 00:00:07,501
we'll develop a Next.js app

3
00:00:07,501 --> 00:00:09,866
that is a fully static website.

4
00:00:10,519 --> 00:00:13,227
The app we'll build is a personal blog.

5
00:00:13,727 --> 00:00:16,024
Let me show you what it will look like,

6
00:00:16,024 --> 00:00:17,144
once it's finished.

7
00:00:17,144 --> 00:00:19,677
As you can see, it's a simple blog website,

8
00:00:20,295 --> 00:00:22,068
where we can post some articles,

9
00:00:22,568 --> 00:00:24,725
that we'll write in Markdown files.

10
00:00:25,225 --> 00:00:28,055
And the app will automatically generate

11
00:00:28,055 --> 00:00:30,232
a page for each Markdown file.

12
00:00:30,804 --> 00:00:33,463
We'll also implement a Dark Mode switch,

13
00:00:33,963 --> 00:00:36,420
so our users can toggle between

14
00:00:36,420 --> 00:00:38,163
light or dark colours.

15
00:00:38,742 --> 00:00:40,963
So it's a fairly simple website

16
00:00:40,963 --> 00:00:43,184
to get us started with Next.js,

17
00:00:43,755 --> 00:00:45,326
but it will already teach us

18
00:00:45,326 --> 00:00:46,391
quite a few things.

19
00:00:46,947 --> 00:00:49,856
We'll see how to set up a Next.js project.

20
00:00:50,356 --> 00:00:52,147
We'll talk about "Pre-rendering",

21
00:00:52,647 --> 00:00:56,622
that's perhaps the biggest advantage of using Next.js

22
00:00:56,622 --> 00:00:58,422
rather than plain React.

23
00:00:58,996 --> 00:01:01,737
We'll cover page navigation and routing.

24
00:01:02,237 --> 00:01:04,845
We'll see how to style our components,

25
00:01:05,345 --> 00:01:08,020
using a library called Styled JSX.

26
00:01:08,520 --> 00:01:11,174
A very important section explains

27
00:01:11,174 --> 00:01:13,989
how to load data in a Next.js page.

28
00:01:14,569 --> 00:01:17,016
In this example we'll read the data

29
00:01:17,016 --> 00:01:18,834
from local Markdown files,

30
00:01:18,834 --> 00:01:21,979
but the concepts we learn here will be useful

31
00:01:21,979 --> 00:01:23,377
in many other cases,

32
00:01:23,377 --> 00:01:26,523
like if we want to fetch data from a web API.

33
00:01:27,302 --> 00:01:29,995
Then we'll see how to build a "dynamic route",

34
00:01:30,495 --> 00:01:33,405
that allows us to use the same component

35
00:01:33,405 --> 00:01:35,588
for generating multiple pages,

36
00:01:35,588 --> 00:01:38,208
in this case for all our blog posts.

37
00:01:38,853 --> 00:01:41,664
As we've seen, we'll add a Dark Mode switch,

38
00:01:42,164 --> 00:01:44,102
which will also be an example

39
00:01:44,102 --> 00:01:46,910
of how to write client side functionality.

40
00:01:47,477 --> 00:01:50,653
And related to that we'll learn about Hydration,

41
00:01:51,153 --> 00:01:53,278
which is the mechanism used to

42
00:01:53,278 --> 00:01:55,332
add client side functionality

43
00:01:55,332 --> 00:01:59,016
to components that were rendered on the server side.

44
00:01:59,658 --> 00:02:03,240
Finally we'll see how to deploy our application,

45
00:02:03,240 --> 00:02:06,226
and we'll cover a few different options,

46
00:02:06,226 --> 00:02:09,734
from Vercel, that's the platform behind Next.js

47
00:02:09,734 --> 00:02:12,197
to building our app in a way that

48
00:02:12,197 --> 00:02:15,705
can be deployed to any static hosting provider.

49
00:02:15,705 --> 00:02:17,347
So, let's get started!