1
00:00:03,000 --> 00:00:05,431
If don't need full-stack features

2
00:00:05,431 --> 00:00:07,421
like server-side rendering,

3
00:00:07,494 --> 00:00:10,286
then you can export your Next.js

4
00:00:10,286 --> 00:00:12,379
app as a static website,

5
00:00:12,466 --> 00:00:15,146
that you can deploy to any web server.

6
00:00:15,146 --> 00:00:16,654
Let's see how to do that.

7
00:00:16,654 --> 00:00:20,445
So far we've been using the "next build" command

8
00:00:20,445 --> 00:00:24,370
that generates files inside the ".next" folder,

9
00:00:24,370 --> 00:00:26,553
and then we've been testing it

10
00:00:26,553 --> 00:00:28,446
locally with "next start",

11
00:00:28,518 --> 00:00:32,499
that runs the Next.js server in production mode.

12
00:00:32,499 --> 00:00:35,406
To do a Static Export we need to change

13
00:00:35,406 --> 00:00:37,344
the Next.js configuration,

14
00:00:37,418 --> 00:00:41,593
that is in a file called "next.config.js".

15
00:00:41,593 --> 00:00:44,809
So far we didn't have any custom configuration.

16
00:00:44,809 --> 00:00:47,694
But in this file we can export an object,

17
00:00:47,694 --> 00:00:50,412
using the CommonJS convention.

18
00:00:50,412 --> 00:00:53,240
I'll also add a JSDoc comment here,

19
00:00:53,240 --> 00:00:56,014
specifying the "@type" of this object.

20
00:00:56,014 --> 00:00:57,787
We can import the right type

21
00:00:57,787 --> 00:00:59,243
from the "next" module:

22
00:00:59,307 --> 00:01:01,645
it's called "NextConfig".

23
00:01:01,667 --> 00:01:04,177
This will tell the editor which properties

24
00:01:04,177 --> 00:01:05,911
are available in this object.

25
00:01:05,971 --> 00:01:09,748
Anyway, here we want to set the "output" option,

26
00:01:09,748 --> 00:01:11,372
to "export".

27
00:01:11,372 --> 00:01:14,359
If we check the documentation for this property,

28
00:01:14,359 --> 00:01:17,519
"export" creates an "out" directory,

29
00:01:17,519 --> 00:01:21,962
"that only includes static HTML/CSS/JS",

30
00:01:21,962 --> 00:01:24,075
which is exactly what we want.

31
00:01:24,075 --> 00:01:26,219
There are many other configuration

32
00:01:26,219 --> 00:01:28,174
option we can set in this file,

33
00:01:28,237 --> 00:01:31,059
but we only need the "output" right now.

34
00:01:31,059 --> 00:01:34,029
With this, if we go and do a production build,

35
00:01:34,029 --> 00:01:36,825
by running "npm run build" as usual,

36
00:01:36,889 --> 00:01:39,373
this time it will no longer create

37
00:01:39,373 --> 00:01:41,418
files in the ".next" folder,

38
00:01:41,491 --> 00:01:44,413
but in a new folder, called "out".

39
00:01:44,413 --> 00:01:47,155
This contains only static files,

40
00:01:47,155 --> 00:01:51,035
like "index.html", and all the other pages.

41
00:01:51,035 --> 00:01:53,756
At this point we can simply upload this

42
00:01:53,756 --> 00:01:56,059
folder to a web server somewhere.

43
00:01:56,129 --> 00:01:58,724
But before we do that we'll want to

44
00:01:58,724 --> 00:02:01,171
test this static website locally.

45
00:02:01,245 --> 00:02:05,103
For that we can use an npm package called "serve",

46
00:02:05,103 --> 00:02:07,999
that's a simple web server we can run locally.

47
00:02:07,999 --> 00:02:10,297
We could install it into our project,

48
00:02:10,297 --> 00:02:13,775
but we can also launch it directly with "npx",

49
00:02:13,775 --> 00:02:15,932
that will automatically download

50
00:02:15,932 --> 00:02:17,549
the package if required.

51
00:02:17,616 --> 00:02:20,723
Let's make sure we use the "latest" version,

52
00:02:20,723 --> 00:02:22,972
and then we can pass it the folder

53
00:02:22,972 --> 00:02:24,493
containing our website.

54
00:02:24,559 --> 00:02:26,912
This will start a local server,

55
00:02:26,912 --> 00:02:30,149
returning the pages in the "out" folder.

56
00:02:30,149 --> 00:02:33,436
It's running on port 3000 by default,

57
00:02:33,436 --> 00:02:36,346
but this is not the Next.js server,

58
00:02:36,346 --> 00:02:38,900
it's a simpler HTTP server that

59
00:02:38,900 --> 00:02:41,042
only returns static files.

60
00:02:41,125 --> 00:02:44,556
This way we can test if all our pages are working,

61
00:02:44,556 --> 00:02:46,867
and everything seems to be okay.

62
00:02:46,867 --> 00:02:48,994
We could also check the network

63
00:02:48,994 --> 00:02:50,709
requests in the DevTools.

64
00:02:50,778 --> 00:02:54,090
Let's make sure the browser doesn't use the cache.

65
00:02:54,090 --> 00:02:57,138
The static files should load pretty quickly.

66
00:02:57,138 --> 00:02:59,733
It takes less than 100 milliseconds

67
00:02:59,733 --> 00:03:00,993
to load the page.

68
00:03:01,067 --> 00:03:02,989
Of course we're running everything

69
00:03:02,989 --> 00:03:04,233
locally at the moment,

70
00:03:04,290 --> 00:03:06,630
but this shows that our static

71
00:03:06,630 --> 00:03:08,659
site is working correctly.

72
00:03:08,737 --> 00:03:13,015
So, all we need to do to enable a Static Export,

73
00:03:13,015 --> 00:03:15,594
is to set the "output" property in

74
00:03:15,594 --> 00:03:17,946
the Next.js configuration file.

75
00:03:18,022 --> 00:03:20,536
And the build will create an "out"

76
00:03:20,536 --> 00:03:22,976
folder with all the static files.

77
00:03:23,050 --> 00:03:25,043
By the way, if you use Git

78
00:03:25,043 --> 00:03:28,603
you'll want to add that folder to the ignore list,

79
00:03:28,603 --> 00:03:31,370
because it contains generated files.

80
00:03:31,370 --> 00:03:34,478
You could also modify the package.json.

81
00:03:34,478 --> 00:03:37,681
If you know you'll only use Static Export,

82
00:03:37,681 --> 00:03:40,065
instead of running "next start",

83
00:03:40,065 --> 00:03:42,708
you could change the "start" script

84
00:03:42,708 --> 00:03:44,747
to run the "serve" command.

85
00:03:44,823 --> 00:03:46,414
But I'll leave it as it is.

86
00:03:46,414 --> 00:03:48,240
The important thing is that

87
00:03:48,240 --> 00:03:49,998
we have this "out" folder,

88
00:03:50,065 --> 00:03:52,542
containing our static website.

89
00:03:52,542 --> 00:03:55,674
In the next video I'll show you an example of

90
00:03:55,674 --> 00:03:59,063
deploying this folder to a hosting platform.