NextJs, S3 & Cloudfront – Static site hosting

To host a static Next.js site on AWS S3 with CloudFront distribution, here are the steps to follow. The disadvantage of using next export to generate a static site is that you won’t have server-side rendering or API routes as part of your Next.js application. Consequently, all operations must be done on the client side, and any API keys used client-side could potentially be exposed except for those provided after user authentication.

Step 1: Configure Your Next.js Application for Static Export

First, make your Next.js application ready for static export:

next.config.js

module.exports = {
  // Use the 'exportPathMap' function if you need to customize pages' paths
  exportPathMap: function() {
    return {
      '/': { page: '/' },
      // Define other pages here
    };
  },
  // Add any other Next.js configurations here
};

Step 2: Export Your Next.js Application

Export your Next.js application to static files:

npx next build
npx next export

This will generate a out/ directory with your static files.

Step 3: Set Up AWS S3

1. Create a new S3 bucket through the AWS Management Console.
2. Under the bucket permissions, turn off “Block all public access”.
3. Update the bucket policy to allow public read access.

Step4: Upload Your Static Files to AWS S3

Upload the contents of the out/ directory to your S3 bucket either using the AWS Management Console or AWS CLI:

aws s3 sync out/ s3://your-bucket-name

Step 5: Create a CloudFront Distribution

1. Go to the AWS CloudFront console.
2. Click on “Create Distribution.”
3. Select “Web” distribution.
4. For the origin domain, choose the S3 bucket you created.
5. Set the “Origin Access Identity” to restrict access to the S3 bucket so only CloudFront can access it.
6. Optionally, set up additional settings like caching behavior and TLS certificate.

Step 6: Add Custom Domain to CloudFront

1. In the CloudFront distribution settings, scroll to the “Alternate Domain Names (CNAMEs)” section.
2. Add your custom domain name.
3. To handle HTTPS for your custom domain, request or import a certificate with AWS Certificate Manager (ACM) and associate it with your distribution.

Step 7: Update DNS Records for Your Custom Domain

• Go to your DNS provider and create a CNAME record that points your custom domain to the CloudFront distribution domain name (e.g., d123abc.cloudfront.net).

Step 8: Invalidate CloudFront Cache (if needed)

After updating your site:

aws cloudfront create-invalidation --distribution-id YOUR_DISTRIBUTION_ID --paths "/*"

This will force CloudFront to clear its cache and serve the latest version of your site.

Remember, with static hosting, dynamic server-side operations are not possible. You might need to use client-side JavaScript or third-party services for dynamic content and functionality.

Keep your API keys private, except those designed for public use, and always use environment variables or authenticated endpoints to manage sensitive keys. Never embed them directly into your client-side code.