next.js app deployed with Amplify hosting '<myapp>.amplifyapp.com' page can’t be found'

I am deploying a next app via AWS CDK using Amplify hosting. When navigating to the successfully deployed site, receive 'This .amplifyapp.com page can’t be found'. build spec is as so:

      buildSpec: codebuild.BuildSpec.fromObjectToYaml({
        // Alternatively add a `amplify.yml` to the repo
        version: '1.0',
        frontend: {
          phases: {
            preBuild: {
              commands: [
                'pwd',
                'cd frontend',
                'npm install'
              ],
            },
            build: {
              commands: [
                'pwd',
                'npm run build'
              ],
            },
          },
          artifacts: {
            baseDirectory: 'frontend/.next',
            files: [ '**/*' ],
          },
        },
      })

The next.config.js is as so:

/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
  // Ensure Next.js works from the frontend subdirectory
  distDir: '.next',
  experimental: {
    // Enable app directory features
    appDir: true,
  },
  // target: 'serverless', // Required for SSR deployment in AWS Amplify
  // reactStrictMode: true,
  // webpack(config, { isServer }) {
  //   if (isServer) {
  //     require('./scripts/generate-sitemap'); // Optional: to generate a sitemap dynamically
  //   }
  //   return config;
  // },
}

export default nextConfig

I am fairly new to SSR Next. I am not sure why navigating to the app domain does not display the app, believe there is some next configuration that is not correct for Amplify hosting perhaps.

Any insight would be great. Thank you