AMP and blocking fallback

[Timer]

For context, I'm using Next 9.5.5 and 9.5.6-canary.11 to test this and building my site locally using yarn next build as well as deploying to Vercel.

I know this feature is still marked as unstable, but I'm having some trouble getting it to work with incrementally generated pages. If you look at the code below, you can see I'm building a page with the slug about at build time. I'm able to access the amp page for about, but for any other page that is incrementally built, it returns a 404 page if I add .amp or ?amp=1.

After building the site, I tested it a bunch trying to get it to generate an AMP page incrementally. I have a page with slug oss. Initially accessing that page with oss.amp returned 404, but then it worked for about 30 seconds. After that, it went back to 404.

export const getStaticProps: GetStaticProps = async (ctx) => {  
  const slug = processNextQueryStringParam(ctx.params?.slug);

  const page = await getPage({
    slug
  });

  return {
    props: {
      page: page ?? null
    },
    revalidate: 60 // seconds
  }
};

export async function getStaticPaths() {
  return {
    paths: [
      { params: { slug: 'about' } }
    ],
    fallback: 'unstable_blocking'
  };
}

export const config = { amp: 'hybrid' }

You can view the rest of the file in this repo.

When I look at my .next folder, I can see it successfully generating all the AMP pages, but for some reason, they still return 404 when I try and access them. This seems like a bug that it generates the page, but I'm unable to access it.

Update I must have made a mistake. ISG hybrid AMP pages work with Next 9.5.5, but only locally and not on Vercel. If I update to 9.5.6-canary.11 it no longer works locally or on Vercel.

Originally posted by @christianjuth in https://github.com/vercel/next.js/issues/15637#issuecomment-714589265

[christianjuth]

Not sure if this is helpful, but I updated my project to Next.js 10, and it seems to be working correctly locally. It's not until I deploy to Vercel that amp pages stop working. If I visit a page using the AMP Validator, it says it references an AMP URL ending in ?amp=1, but when I validate that page, it says it's not an AMP page.

I'm using the same configuration I posted originally except I changed fallback: unstable_blocking to fallback: blocking after upgrading to Next.js 10.

[yassinebridi]

@christianjuth the same thing for me on next@10, it works locally with ?amp=true but not in production deployed to vercel, it just refresh to the normal page. i noticed also when i add .amp it tries to take slug + amp as the whole slug, then it can't generate the page. the console of slug: slug: wolverhampton-wanderers-vs-crystal-palace-english-premier-league-mn6K2v6IN.amp

[yhay81]

Same as @yassinebridi here.

This is a simple sample app to reproduce the problem. https://vercel.com/webvjp/vercel-amp-isr-sample https://github.com/yhay81/vercel-amp-isr-sample https://vercel-amp-isr-sample.vercel.app/

[angelnikolov]

I wonder if anyone has solved this? All of my dynamically generated pages using a blocking fallback are failing in Search Console. Even if this is not yet solved, does anyone have ideas on how to work around it?