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.