Create ColorUpload App

[elicharlese]

SST, Next.js and AWS

Install the Serverless Stack Toolkit (SST) globally using the npm package manager:

npm install -g serverless-stack

Create a new SST app using the sst-app command:

sst-app create my-app

This will create a new directory called my-app with a basic SST app structure.

Initialize a Next.js project in the my-app directory:

cd my-app
npx create-next-app

This will create a new Next.js app inside the my-app directory.

Install the @serverless-stack/resources package as a dev dependency in the my-app directory:

npm install --save-dev @serverless-stack/resources

This package provides a set of reusable resources that we can use in our app.

Open the sst.json file in the my-app directory and update it with the following:

{
  "app": "my-app",
  "buildCommand": "next build",
  "stacks": [
    {
      "name": "frontend",
      "env": {
        "REGION": "us-east-1"
      },
      "resources": [
        {
          "type": "@serverless-stack/resources/s3-static-site",
          "params": {
            "buildOutput": "out",
            "indexDocument": "index.html",
            "errorDocument": "index.html"
          }
        }
      ],
      "hooks": {
        "build": "next build && next export"
      }
    }
  ]
}

This defines a stack called "frontend" that creates an S3 bucket for hosting our static files. We've also specified a build command that will run next build and next export to build and export our Next.js app as static files.

Build and deploy the app using the deploy command:

sst deploy

This will build and deploy the app to AWS. Once the deployment is complete, you should see a URL where you can access your app.

That's it! You now have a serverless Next.js app running on AWS.