All language subtitles for 003 Static Export_en

If don't need full-stack features

like server-side rendering,

then you can export your Next.js

app as a static website,

that you can deploy to any web server.

Let's see how to do that.

So far we've been using the "next build" command

that generates files inside the ".next" folder,

and then we've been testing it

locally with "next start",

that runs the Next.js server in production mode.

To do a Static Export we need to change

the Next.js configuration,

that is in a file called "next.config.js".

So far we didn't have any custom configuration.

But in this file we can export an object,

using the CommonJS convention.

I'll also add a JSDoc comment here,

specifying the "@type" of this object.

We can import the right type

from the "next" module:

it's called "NextConfig".

This will tell the editor which properties

are available in this object.

Anyway, here we want to set the "output" option,

to "export".

If we check the documentation for this property,

"export" creates an "out" directory,

"that only includes static HTML/CSS/JS",

which is exactly what we want.

There are many other configuration

option we can set in this file,

but we only need the "output" right now.

With this, if we go and do a production build,

by running "npm run build" as usual,

this time it will no longer create

files in the ".next" folder,

but in a new folder, called "out".

This contains only static files,

like "index.html", and all the other pages.

At this point we can simply upload this

folder to a web server somewhere.

But before we do that we'll want to

test this static website locally.

For that we can use an npm package called "serve",

that's a simple web server we can run locally.

We could install it into our project,

but we can also launch it directly with "npx",

that will automatically download

the package if required.

Let's make sure we use the "latest" version,

and then we can pass it the folder

containing our website.

This will start a local server,

returning the pages in the "out" folder.

It's running on port 3000 by default,

but this is not the Next.js server,

it's a simpler HTTP server that

only returns static files.

This way we can test if all our pages are working,

and everything seems to be okay.

We could also check the network

requests in the DevTools.

Let's make sure the browser doesn't use the cache.

The static files should load pretty quickly.

It takes less than 100 milliseconds

to load the page.

Of course we're running everything

locally at the moment,

but this shows that our static

site is working correctly.

So, all we need to do to enable a Static Export,

is to set the "output" property in

the Next.js configuration file.

And the build will create an "out"

folder with all the static files.

By the way, if you use Git

you'll want to add that folder to the ignore list,

because it contains generated files.

You could also modify the package.json.

If you know you'll only use Static Export,

instead of running "next start",

you could change the "start" script

to run the "serve" command.

But I'll leave it as it is.

The important thing is that

we have this "out" folder,

containing our static website.

In the next video I'll show you an example of

deploying this folder to a hosting platform.