AMP scripts not loaded using AWS CDK @sls-next/lambda-at-edge

Issue Summary

We are currently trying to deploy an amp application via import { Builder } from '@sls-next/lambda-at-edge'. the application is compiling and locale builds with prod, int or dev are showing an execellent working amp app (where all script tags are loaded.

if we build the app with AWS CDK using the { Builder } from '@sls-next/lambda-at-edge' and deploy the app, the markup is correct while the amp scripts are not injested and missing. They are not part of the build.

If we have, for example, an simple page with an the normal next build adds the javascript file automatically. So we just add into our page and next build adds a to our page.

It looks like the AmpOptimizer is not executed.

Actual behavior

AMP javascripts scripts are missing

Expected behavior

AMP javascripts scripts are injected during build process automatically

Steps to reproduce

build a simple amp page like

import React, { Component } from 'react';
import Head from 'next/head';
export const config = { amp: true };
export default class AmpPage extends Component {
    static async getInitialProps({ res, req }) {}
    render() {
        return (
            <div>
                <amp-carousel width="450" height="300" layout="responsive" type="slides" role="region" aria-label="Basic carousel">
                    <amp-img key={Buffer.from(Math.random().toString()).toString('base64')} src="https://amp.dev/static/inline-examples/images/image1.jpg" width="450" height="300"></amp-img>
                    <amp-img key={Buffer.from(Math.random().toString()).toString('base64')} src="https://amp.dev/static/inline-examples/images/image2.jpg" width="450" height="300"></amp-img>
                </amp-carousel>
            </div>
        );
    }
}

Screenshots/Code/Configuration/Logs

CDK contructs:

./bin/cdk-app.ts

#!/usr/bin/env node
import 'source-map-support/register';
import * as cdk from 'aws-cdk-lib';
import { AppConfiguration } from '../lib/common/AppConfiguration';
import { Builder } from '@sls-next/lambda-at-edge';
import { CdkLambdaatedge } from '../lib/cdk-lambdaatedge';

const builder = new Builder('.', './build', {
    cmd: './node_modules/.bin/next',
    cwd: process.cwd(),
    args: ['build'],
    minifyHandlers: true,
    // it is recommended to let your CF distribution do the compression as per the docs - https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/ServingCompressedFiles.html
    // however there have been issues in the past where CF doesn't compress lambda@edge responses, so we provide our own implementation in case is needed
    enableHTTPCompression: false
});

builder
    .build()
    .then(() => {
        const app = new cdk.App();
        const configUsEast1: AppConfiguration = {
            env: {
                account: app.node.tryGetContext(stage).account,
                region: 'us-east-1'
            },
        };

        new CdkLambdaatedge(app, `amp-lambdaatedge`, {
            ...configUsEast1,
        });
    })
    .catch((e) => {
        console.log(e);
        process.exit(1);
    });

../lib/cdk-lambdaatedge

import { Duration, Stack } from 'aws-cdk-lib';
import { Construct } from 'constructs';
import { AppConfiguration } from './common/AppConfiguration';
import { NextJSLambdaEdge } from '@sls-next/cdk-construct';
import { Runtime } from 'aws-cdk-lib/aws-lambda';

export class CdkLambdaatedge extends Stack {
    constructor(scope: Construct, id: string, props: AppConfiguration) {
        super(scope, id, props);
        const nextApp = new NextJSLambdaEdge(this, `AmpApp`, {
            serverlessBuildOutDir: './build',
            timeout: Duration.seconds(30),
            memory: {
                imageLambda: 1024,
                defaultLambda: 1024,
                apiLambda: 1024
            },
            runtime: Runtime.NODEJS_14_X,
            withLogging: true,
            description: `${id} : Functions Lambda@Edge for the application`
        });
    }
}

Versions

OS/Environment: AWS Cloud

package.json


"@sls-next/cdk-construct": "^3.7.0-alpha.7",
"@sls-next/lambda-at-edge": "^3.7.0-alpha.7",
"aws-cdk-lib": "^2.17.0",
"axios": "^0.26.1",
"buffer": "^6.0.3",
"constructs": "^10.0.76",
"http-browserify": "^1.7.0",
"https-browserify": "^1.0.0",
"next": "^12.1.0",
"prop-types": "^15.8.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"source-map-support": "^0.5.21"
},
"devDependencies": {
"@types/node": "^17.0.21",
"@types/react": "^17.0.41",
"@typescript-eslint/eslint-plugin": "^5.13.0",
"@typescript-eslint/parser": "^5.13.0",
"aws-cdk": "^2.17.0",
"eslint": "^8.10.0",
"eslint-config": "^0.3.0",
"eslint-config-next": "^12.1.0",
"eslint-config-prettier": "^8.4.0",
"eslint-plugin-prettier": "^4.0.0",
"prettier": "^2.5.1",
"ts-node": "^10.6.0",
"typescript": "~4.6.2"
}```

Next.js version: 12.1.0
CDK: 2.17.0

Additional context

Apps are compiling and running locale.

We could add a post processor script in our pipeline like manual triggering the AmpOptimizer if possible.

serverless-nextjs / serverless-next.js