1
00:00:03,000 --> 00:00:05,116
In the second part of the course

2
00:00:05,116 --> 00:00:07,696
we'll build a more complex application,

3
00:00:08,262 --> 00:00:10,743
that uses both "Static" pages

4
00:00:10,743 --> 00:00:15,019
and "Server Side Rendering", abbreviated as "SSR".

5
00:00:15,019 --> 00:00:18,953
So in that sense it's a "Hybdrid" application.

6
00:00:19,625 --> 00:00:22,788
What we're going to build is a Shop website,

7
00:00:22,788 --> 00:00:24,801
where we sell indoor plants.

8
00:00:25,373 --> 00:00:27,449
We'll display a grid of products

9
00:00:27,449 --> 00:00:28,618
with their images.

10
00:00:29,182 --> 00:00:31,336
If the user selects a product

11
00:00:31,336 --> 00:00:34,305
we'll show a details page for that item.

12
00:00:34,880 --> 00:00:37,600
Then we'll also implement authentication,

13
00:00:37,600 --> 00:00:39,325
so the user can "Sign In".

14
00:00:40,880 --> 00:00:44,056
This way we can keep a Shopping Cart for each user,

15
00:00:44,556 --> 00:00:46,168
so when they view a product

16
00:00:46,168 --> 00:00:48,558
they'll be able to add it to their cart,

17
00:00:49,422 --> 00:00:51,000
and we'll show a summary

18
00:00:51,000 --> 00:00:53,301
with their potential order details.

19
00:00:53,867 --> 00:00:56,399
So there's a fair amount of functionality

20
00:00:56,399 --> 00:00:59,055
we're going to build into this application.

21
00:00:59,055 --> 00:01:00,970
And this will be an opportunity

22
00:01:00,970 --> 00:01:03,440
to learn more advanced Next.js features,

23
00:01:04,126 --> 00:01:07,118
but also some other tools and libraries.

24
00:01:07,618 --> 00:01:10,327
We'll start by setting up a new project,

25
00:01:10,327 --> 00:01:12,630
this time using "Create Next App".

26
00:01:13,198 --> 00:01:15,010
Then we'll add "Tailwind"

27
00:01:15,010 --> 00:01:18,272
that's a CSS framework we'll use for styling.

28
00:01:18,845 --> 00:01:22,163
We'll use a "Headless CMS" called Strapi,

29
00:01:22,163 --> 00:01:25,968
as our backend API where we store all the data.

30
00:01:26,549 --> 00:01:29,414
We'll see how to fetch data from that API

31
00:01:29,414 --> 00:01:30,742
in our Next.js app,

32
00:01:30,742 --> 00:01:34,097
and there quite a few different ways to do that.

33
00:01:34,737 --> 00:01:37,988
We'll cover "Incremental Static Regeneration",

34
00:01:37,988 --> 00:01:40,815
that is a Next.js feature that allows us

35
00:01:40,815 --> 00:01:42,511
to generate static pages

36
00:01:42,511 --> 00:01:45,620
but also keep them up to date automatically.

37
00:01:46,333 --> 00:01:48,483
We'll write some API routes,

38
00:01:48,483 --> 00:01:51,326
which is another Next.js feature that

39
00:01:51,326 --> 00:01:54,168
lets us create an API inside our app.

40
00:01:54,822 --> 00:01:57,871
We'll see how to do "Responsive Design"

41
00:01:57,871 --> 00:01:59,356
using Tailwind CSS.

42
00:01:59,935 --> 00:02:02,187
We'll implement authentication,

43
00:02:02,187 --> 00:02:04,658
using JSON Web Tokens and cookies.

44
00:02:05,231 --> 00:02:07,530
And we'll also use React Query,

45
00:02:07,530 --> 00:02:11,014
that is a library for fetching and caching data

46
00:02:11,014 --> 00:02:12,424
on the client side.

47
00:02:12,424 --> 00:02:15,836
So lots of stuff to learn. Let's dive into it!