Deploying Next.js app to S3

It has been a while since I have deployed Next.js to S3. Figured I would record how I got it done.

Configure Next.js to export artifacts

When building production artifacts Next.js needs to be instructed to produce outputs. For Next.js 14 series the following next.config.js file will do that.

// @ts-check

const { PHASE_PRODUCTION_BUILD } = require('next/constants')

module.exports = (phase, { defaultConfig }) => {
    const baseConfig = Object.assign({},defaultConfig,{ // (1)

    })
    if (phase === PHASE_PRODUCTION_BUILD) { // (2)
        return Object.assign(baseConfig,{
            output: 'export',
            trailingSlash: true,
        })
    }

    return Object.assign(baseConfig,{
        /* config options for all phases except development here */
    })
}

1 Provides a point for us to override any defaults passed in.
2 When we are building the production setup we override the configuration. This will result in a new directory out containing the artifacts.

S3 Deployment

Fairly simple. Replace ${bucket} with the name of your bucket. This assumes you have your AWS environment sufficiently initialized.

aws s3 sync out/ s3://${bucket}/

Now you just head to your exported buckets URL.