1
00:00:03,000 --> 00:00:06,591
As I mentioned in the introduction for this section,

2
00:00:06,591 --> 00:00:09,354
another option for deploying our website

3
00:00:09,354 --> 00:00:11,702
is to make a "Static HTML Export".

4
00:00:12,340 --> 00:00:13,902
Let's see how that works,

5
00:00:13,902 --> 00:00:15,588
using our Blog application.

6
00:00:16,239 --> 00:00:19,848
We know that we can use the "next" command line tool

7
00:00:19,848 --> 00:00:22,970
to "build" our project, run it in "dev" mode,

8
00:00:22,970 --> 00:00:25,260
or "start" it in production mode.

9
00:00:25,899 --> 00:00:27,728
We can use that same tool

10
00:00:27,728 --> 00:00:30,070
to make a static export as well.

11
00:00:30,644 --> 00:00:32,165
Let me stop the dev server

12
00:00:32,165 --> 00:00:34,096
so we can run some commands here.

13
00:00:34,743 --> 00:00:38,427
Remember that we can always see usage instructions

14
00:00:38,427 --> 00:00:42,257
by running the "next" tool with the "--help" switch.

15
00:00:42,831 --> 00:00:45,160
And one of the commands it supports

16
00:00:45,160 --> 00:00:46,424
is called "export".

17
00:00:46,990 --> 00:00:49,079
Now, we can also get instructions

18
00:00:49,079 --> 00:00:50,471
for a specific command

19
00:00:51,034 --> 00:00:54,594
by running that command followed by "--help".

20
00:00:55,094 --> 00:00:57,621
So we can read here that "next export"

21
00:00:57,621 --> 00:01:01,078
"Exports the application for production deployment",

22
00:01:01,078 --> 00:01:04,003
and we can optionally pass it a few options,

23
00:01:04,635 --> 00:01:06,965
the most useful one is "-o"

24
00:01:06,965 --> 00:01:09,295
that sets "the output dir".

25
00:01:09,881 --> 00:01:11,886
So that's the name of the folder

26
00:01:11,886 --> 00:01:14,266
where out website will be exported to.

27
00:01:14,828 --> 00:01:16,633
Now, before we do an export

28
00:01:16,633 --> 00:01:19,708
we need to make sure to "build" our app first.

29
00:01:21,461 --> 00:01:23,453
Ok, now that we've done a fresh build

30
00:01:24,227 --> 00:01:26,685
we can try that "next export" command,

31
00:01:27,185 --> 00:01:30,231
and I'll set the output directory to "dist",

32
00:01:30,731 --> 00:01:32,337
short for "distribution".

33
00:01:32,837 --> 00:01:34,257
Exporting is very quick,

34
00:01:34,257 --> 00:01:36,387
it basically just copied some files.

35
00:01:36,947 --> 00:01:39,111
And we should now have a "dist" folder

36
00:01:39,111 --> 00:01:40,935
at the top-level of our project,

37
00:01:42,280 --> 00:01:45,740
containing static files, like the HTML pages.

38
00:01:45,740 --> 00:01:48,816
So we could now take this "dist" folder,

39
00:01:48,816 --> 00:01:51,969
and upload it to any standard web server.

40
00:01:52,623 --> 00:01:53,884
But before we do that

41
00:01:53,884 --> 00:01:56,406
it would be good to test it locally first.

42
00:01:56,966 --> 00:02:00,024
We can start a simple HTTP server locally

43
00:02:00,024 --> 00:02:01,962
using the "serve" package,

44
00:02:01,962 --> 00:02:04,721
that we can run directly using "npx".

45
00:02:05,370 --> 00:02:07,694
So if we pass "dist" as argument

46
00:02:08,193 --> 00:02:11,955
it will serve our "dist" folder as a static website.

47
00:02:12,455 --> 00:02:14,461
And it's running on port 5000,

48
00:02:14,461 --> 00:02:16,200
so if we open that address

49
00:02:16,766 --> 00:02:18,098
we can see our Blog,

50
00:02:18,098 --> 00:02:20,228
as exported to a static website,

51
00:02:20,794 --> 00:02:22,362
and we can quickly check that

52
00:02:22,362 --> 00:02:23,550
everything is working.

53
00:02:24,627 --> 00:02:27,276
It's always a good idea to test things locally

54
00:02:27,276 --> 00:02:29,349
before deploying them to production.

55
00:02:29,906 --> 00:02:31,939
But we now have our "dist" folder

56
00:02:31,939 --> 00:02:34,157
and we checked that it's good to go.

57
00:02:35,239 --> 00:02:37,484
So at this point we simply need to

58
00:02:37,484 --> 00:02:40,389
upload this folder to some hosting platform.

59
00:02:40,955 --> 00:02:43,215
And the provider I'm going to use

60
00:02:43,215 --> 00:02:45,132
for this example is Netlify.

61
00:02:45,921 --> 00:02:49,044
Netlify is similar to Vercel in many ways:

62
00:02:49,044 --> 00:02:51,051
it's a serverless platform,

63
00:02:51,051 --> 00:02:53,059
it has a free starter plan,

64
00:02:53,707 --> 00:02:55,969
we can log in with our GitHub account,

65
00:02:55,969 --> 00:02:57,159
among other options.

66
00:02:59,873 --> 00:03:01,996
And this is my dashboard page.

67
00:03:02,496 --> 00:03:03,600
If we look under "Sites"

68
00:03:04,696 --> 00:03:07,938
here I have an existing site, that I have obfuscated.

69
00:03:08,438 --> 00:03:12,179
But we could create a new site from a Git repository,

70
00:03:12,179 --> 00:03:15,426
like we did with Vercel in the previous video.

71
00:03:15,426 --> 00:03:17,614
And in fact Netlify also offers

72
00:03:17,614 --> 00:03:20,861
full support for running Next.js applications.

73
00:03:21,572 --> 00:03:24,519
But for this example I want to use Netlify

74
00:03:24,519 --> 00:03:26,202
just for static hosting,

75
00:03:26,202 --> 00:03:28,657
and we can create a new static site

76
00:03:28,657 --> 00:03:32,024
simply by dragging and dropping our folder here.

77
00:03:32,734 --> 00:03:34,088
So let's try that.

78
00:03:34,588 --> 00:03:37,062
If I bring forward my Finder window

79
00:03:38,322 --> 00:03:40,732
I can simply drag the "dist" folder

80
00:03:40,732 --> 00:03:42,248
onto the Netlify page,

81
00:03:43,087 --> 00:03:45,812
and this will upload and deploy the website.

82
00:03:45,812 --> 00:03:47,422
In fact it's done already,

83
00:03:47,983 --> 00:03:50,724
you can see that it says "Your site is deployed".

84
00:03:51,224 --> 00:03:54,326
We could optionally follow the other steps

85
00:03:54,326 --> 00:03:56,985
to set up a custom domain and HTTPS,

86
00:03:57,558 --> 00:03:59,731
but for this example I'll just open

87
00:03:59,731 --> 00:04:01,407
this auto-generated domain,

88
00:04:01,969 --> 00:04:04,276
hosted under "netlify.app".

89
00:04:04,776 --> 00:04:07,053
So once again, here's our Blog,

90
00:04:07,053 --> 00:04:09,550
but this time deployed to Netlify.

91
00:04:10,123 --> 00:04:12,000
As usual, we can quickly check that

92
00:04:12,000 --> 00:04:12,911
everything works.

93
00:04:13,465 --> 00:04:16,199
Navigation, and also the Dark Mode switch.

94
00:04:16,199 --> 00:04:17,110
It's all good.

95
00:04:17,675 --> 00:04:20,988
And this is how to export a Next.js app

96
00:04:20,988 --> 00:04:22,689
as a static website,

97
00:04:23,274 --> 00:04:25,126
and deploy it to Netlify,

98
00:04:25,126 --> 00:04:28,682
just as an example of a static hosting platform.