Den Dribbles

Exporting Static HTML From A Nextjs 10 Site

November 04, 2020

In this blog post, we’re going to take the default start from NextJS 10 and export a static site that we can host in S3.

This post goes alongside a partner post on deploying static websites to S3 using the AWS TypeScript CDK if you would like to get the site up and running on your AWS account.

Note: There are reasons for and against exporting static HTML for a NextJS application. Those needs may differ from person to person. Please see NextJS documentation on Static HTML Export for the latest caveats when using their static export feature.

Getting Started

We will use the latest create-next-app deployment to get things rolling.

# from the project root directory
npx create-next-app next-10-static-export

Once this runs, there will be a new folder that hosts your NextJS 10 application in next-10-static-export.

Building the application

Adjust your application’s package.json file to add a new script for export:

{
  // reduced for brevity
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    // add this
    "export": "next export"
  }
  // reduced for brevity
}

Building and exporting the website

Under pages/index.js I am going to make some small adjustments for the project and add a small paragraph that says This page has been updated to show how to build and export static html from a NextJS 10 project.

After making whatever adjustments you would like, run the following from your root directory:

# Build the NextJS application
npm run build
# Export the HTML to the `out` directory
npm run export

Once you have run both commands, you’ll notice that there is now a _next and out directory created.

The out directory is where next export will move the assets to.

Seeing the final product

We can now serve those assets locally to see the build in action.

If you do not have it already, I recommend globally installing Vercel’s Serve package package to enable you serve the out directory. This can be done with npm i -g serve.

Now, run serve out from the root directory and you will have a URL posted to the terminal to show you where the website is being served from (generally localhost port 5000 unless busy).

Head to the website and you will see the following:

NextJS 10 Exported Site

Congrats! You have your statically exported site.

What’s next?

If you would like to see how to deploy your website to AWS S3 using the AWS TypeScript CDK, head to the partner post and continue on.

Resources

  1. Vercel’s Serve package
  2. NextJS Static Export Caveats
  3. Deploying NextJS to AWS S3 Using The AWS TypeScript CDK
  4. Final, live website deployment via the deployment blog
  5. Final code

Image credit: Isi Parente


Related Articles

December 09, 2020

See how you can dynamically create UIs based on React State using dynamic imports, Next.js 10 and React State

December 02, 2020

Have you ever wanted to build a UI Component Library with TypeScript and React? This blog post will take you through a straightforward set up that uses the bare minimum to get a working component library that you can re-use across your different React projects.

November 28, 2020

This blog post will show you how I updated my Gatsby website to display a basic related articles section based on frontmatter tags.

November 16, 2020

This post will go through a simple example of setting up simple authentication with a user and password to your Next.js website.

November 08, 2020

This blog post will explore the new Next.js Image component for an optimised image experience on the web.

November 08, 2020

This blog post will explore the new internationalised routing in Next.js 10 and how you can use this to your advantage with react-intl for React.js

November 07, 2020

Learn how to create a test Stripe example, update that example and deploy to Vercel for a Stripe payment gateway, React 17, TypeScript 4 and Next.js 10

November 06, 2020

See a roundup of my look into Vercel's new analytics feature that you can enable on a Vercel project and see how I used GTMetrix to help push some numbers.

November 05, 2020

Learn how to deploy the base Next.js 10 app with the Vercel CLI and/or the Vercel GitHub Integration

October 28, 2020

Updating my previous post on using Create React App with Snowpack for the latest versions and NPM 7

A personal blog on all things of interest. Written by Dennis O'Keeffe, Follow me on Twitter