How to apply stages in NextJS Serverless Framework

[romelBen]

Hello everyone. I am having problems using two stage deployment for dev and prod. I am hoping anyone can help me with my issue. I would appreciate it. I followed instructions with serverless --stage dev but this doesn't work. Here is my serverless.yml file:

custom:
  stages: ${opt:stage, self:provider.stage}
  settings:
    DOMAIN:
      prod: ["foo", "bar.com"]
    DISTRIBUTION:
      dev: "213521342343"
      #prod: ""
    ALIASES:
      dev: ["foo.bar.com"]
      prod: ["tee.mee.money"]
    CERTIFICATE:
      dev: "arn:aws:acm:us-west-1:123523523:certificate/asdfasd-asdfasdf12345234234"
      prod: "arn:aws:acm:us-west-1:12355:certificate/tdsaasdf52345234234rfdswf"

nextHostApp:
  component: "./node_modules/@sls-next/serverless-component"
  inputs:
    domain: ${self:custom.settings.DOMAIN.${self:custom.stage}}
    cloudfront:
      distributionId: ${self:custom.settings.DISTRIBUTION.${self:custom.stage}}
      comment: "This distribution will host my MF architecture of Lambda@Edges"
      aliases: ${self:custom.settings.ALIASES.${self:custom.stage}}
      certificate:
        cloudFrontDefaultCertificate: false
        acmCertificateArn: ${self:custom.settings.CERTIFICATE.${self:custom.stage}}
        minimumProtocolVersion: "TLSv1.2_2019"

This is the error that pops up:
0s › Template › Error: invalid reference ${self:custom.stage}

Am I doing something wrong on my side with the ${self:custom.stage}? I would appreciate any help!