Exporting Static HTML From A Next.js 10 Site

Exporting Static HTML From A Next.js 10 Site

Learn how to export static HTML from a Nextjs 10 project to host

In this blog post, we’re going to take the default start from Next.js 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.

react web-development javascript next developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Next.js vs. React: The Developer Experience

The developer experience for Next.js vs. React is similar in some ways and drastically different in others. In the world of React, Next.js has become a popular framework for “hitting the ground running.” Next.js builds on top of React to provide a streamlined development experience. There is definitely a different experience when building a project with Next.js vs. React.

Tendencias Javascript y Web 2020. React, Next.js, Deno

Tendencias Javascript y Web 2020. React, Next.js, Deno. En este video te voy a mencionar algunas herramientas y frameworks que fueron, seguirán siendo o van a ser tendencia en este 2020. Entre ellas están React, Next.js, Deno, los Headless CMS como Strapi, entre otros.

Hire Dedicated React Native Developer

Have you ever thought of having your own app that runs smoothly over multiple platforms? React Native is an open-source cross-platform mobile application framework which is a great option to create mobile apps for both Android and iOS. **[Hire...

Hire Dedicated React Native Developer in India | React Native Development

Hire dedicated React Native developers for your next project. As the top react native development company we offer you the best service as per your business needs.