As I mentioned in the introduction for this section,
another option for deploying our website
is to make a "Static HTML Export".
Let's see how that works,
using our Blog application.
We know that we can use the "next" command line tool
to "build" our project, run it in "dev" mode,
or "start" it in production mode.
We can use that same tool
to make a static export as well.
Let me stop the dev server
so we can run some commands here.
Remember that we can always see usage instructions
by running the "next" tool with the "--help" switch.
And one of the commands it supports
is called "export".
Now, we can also get instructions
for a specific command
by running that command followed by "--help".
So we can read here that "next export"
"Exports the application for production deployment",
and we can optionally pass it a few options,
the most useful one is "-o"
that sets "the output dir".
So that's the name of the folder
where out website will be exported to.
Now, before we do an export
we need to make sure to "build" our app first.
Ok, now that we've done a fresh build
we can try that "next export" command,
and I'll set the output directory to "dist",
short for "distribution".
Exporting is very quick,
it basically just copied some files.
And we should now have a "dist" folder
at the top-level of our project,
containing static files, like the HTML pages.
So we could now take this "dist" folder,
and upload it to any standard web server.
But before we do that
it would be good to test it locally first.
We can start a simple HTTP server locally
using the "serve" package,
that we can run directly using "npx".
So if we pass "dist" as argument
it will serve our "dist" folder as a static website.
And it's running on port 5000,
so if we open that address
we can see our Blog,
as exported to a static website,
and we can quickly check that
everything is working.
It's always a good idea to test things locally
before deploying them to production.
But we now have our "dist" folder
and we checked that it's good to go.
So at this point we simply need to
upload this folder to some hosting platform.
And the provider I'm going to use
for this example is Netlify.
Netlify is similar to Vercel in many ways:
it's a serverless platform,
it has a free starter plan,
we can log in with our GitHub account,
among other options.
And this is my dashboard page.
If we look under "Sites"
here I have an existing site, that I have obfuscated.
But we could create a new site from a Git repository,
like we did with Vercel in the previous video.
And in fact Netlify also offers
full support for running Next.js applications.
But for this example I want to use Netlify
just for static hosting,
and we can create a new static site
simply by dragging and dropping our folder here.
So let's try that.
If I bring forward my Finder window
I can simply drag the "dist" folder
onto the Netlify page,
and this will upload and deploy the website.
In fact it's done already,
you can see that it says "Your site is deployed".
We could optionally follow the other steps
to set up a custom domain and HTTPS,
but for this example I'll just open
this auto-generated domain,
hosted under "netlify.app".
So once again, here's our Blog,
but this time deployed to Netlify.
As usual, we can quickly check that
everything works.
Navigation, and also the Dark Mode switch.
It's all good.
And this is how to export a Next.js app
as a static website,
and deploy it to Netlify,
just as an example of a static hosting platform.