Export a Next.js Application with Nx
When it comes to deploying Next.js based applications we have basically two different possibilities: "exporting" our app, or just building it. The main difference is that "exporting" a Next.js app will generate a set of static files for us which can be hosted by really any static site hosting provider. Building a Next.js app is what you would want to do instead for deployment on Vercel.
Prefer to read along as well? Here's the accompanying article.
Instructor: [0:00] Once you're done developing all of the functionality of our blog or portfolio site, we definitely want to go and deploy it somewhere.
[0:08] In Next.js, we have the so-called export functionality. If I go into the workspace.json and I go to the actual site project, which is the one we're currently developing on, you can see that, in fact, further down here, apart from the serving which we have used during development, we have the so-called Export Target.
[0:26] Now, exporting here uses the build target site, build production. Basically, it executes first the so-called build, which uses this target with the production configuration, and then we are ready to actually export it.
[0:40] To invoke this target, we can simply run Nx export as usually, and then giving it the name of the application we want to export, which is Site, in this case. You could also just click here if you have Nx console installed. Now, whenever you run export, it will undergo a much more stricter control, also in terms of type checking. What you can see here is, it reveals a couple of typing issues which we haven't seen before when in development mode.
[1:05] Let's go to the Slug page, which is exactly where this typing issue happens. We can see that Visual Studio Code also underlines the error for us. The problem here is that we expect a return type of ArticleProps from this getStaticProps function, while now we return a front matter and HTML.
[1:23] What we can do is we can get rid of this entirely, have the type inferred. We could even go up here and use here as the typing, the so-called InferGetStaticPropsType, type of getStaticProps. By using this InferGetStaticPropsType, we automatically infer whatever getStaticProps returns, and therefore, have a nice and type-safe environment here.
[1:48] Once we have solved this TypeScript issue, we can go and re-export our Site project. This now creates a new folder here in dist/app/Site with the exported content. We can cd into dist/app/Site project and into the exported folder, and we could just launch a static HTTP server in that directory.
[2:12] Once that is launching, we can open up localhost:8080 and see our exported site. We can also, obviously, navigate to the article's dynamic routing. This would open up the article which we wrote. The reason is, basically, to export just individual HTML files for all of the various sites which we have created within our Next.js application.
[2:32] Obviously, this is fully static. You can just copy and paste this folder to any static hosting provider.