Adding new page to NextJS app on Amplify

I added a new page in src/pages/foo.tsx in my NextJS app

I can load the page fine if i go to http://localhost:3000/foo

However, when I push it to my Amplify app, the page doesn't load.

I have tried updating my routes in the Amplify console but can't get it to load

I see a directory for this page in my out directory:

out/foo/index.html

but if i try to go to that path it still doesn't load

This is my next.config.js

/* eslint-disable import/no-extraneous-dependencies */
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer({
  poweredByHeader: false,
  trailingSlash: true,
  basePath: '',
  // The starter code load resources from `public` folder with `router.basePath` in React components.
  // So, the source code is "basePath-ready".
  // You can remove `basePath` if you don't need it.
  reactStrictMode: true,
});

Can anyone help please?

Thank you