Static Site Deployments With Next JS 14

This article starts at a point where you should already be comfortable setting up a next.js/react application. I'm just in at the point where things are running well and you simply need to build the artifact. So, you've gotten to a point where your site is ready for deployment.

Let's walk through how exactly you can deploy a static site to an S3 bucket. The reason for choosing an S3 bucket is a few reasons...

• Cheap
• Don't overcomplicate the process of infrastructure setup
• It makes sense for testing landing pages and sites that aren't dynamic in nature

To get your build prepared for deploying into S3, you'll need to do a few things beforehand:

Prep In your next.config.js file add the output key and set the value to standalone. This is how you're.

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "standalone",
};

export default nextConfig;

Build Your App From the command line, run npm run build. This creates the folder, out that in a nutshell is your artifact.

If your build is successful, you should see an ouput similar to this and if you look in your file directory you should see a folder labeled out . The files in this folder will be deployed into the S3 bucket