"withAmp" is not producing sole amp output on some pages

Bug report

Describe the bug

I am using Next with an Express server, to take advantage of Express’s routing and all of Next.js’s fanciness. I am trying to create an app that has some Amp pages and some non-Amp pages (ideally, I would create a PWA AMP site, but I’m not quite there yet).

I’ve had AMP working fine on Next 7, but it required some not so pretty hacks to get working perfect. Today I upgraded to Next 8 and was very pleased to see how much code I could rip out of my project to get AMP working as expected with just the Next setup.

I have stumbled across one thing I think is a bug though.

According to the Page Mode docs, I expect that by using withAmp I will get an “AMP-only” version of the page, that includes no extraneous JS, etc, and that it will be valid (or Next will alert me to validation errors).

However, what seems to happen is more like the behavior described in the “hybrid” section of those docs. I get a page that lets me know that Amp is available, but is not actually the AMP code I was expecting.

For example, this code:

import React, { Component } from 'react'
import { useAmp, withAmp } from 'next/amp'

class Sound extends Component {
    static async getInitialProps({ query }) {
        const { sound } = query;
        
        return {
          sound
        }
      }

    state = {
        sound: this.props.sound
    }

  render() {
    return (
      <div>
        {this.state.sound}
      </div>
    )
  }
}

export default withAmp(Sound)

Produces a page in which the Amp validator chrome extension turns blue rather than green:

I don’t think this is the expected behavior, according to those docs? If I am misunderstanding, please let me know.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Pull down https://github.com/maddoxnelson/next-amp-bug (test repo I’ve made)
2. npm install && npm run dev
3. Visit http://localhost:4375
4. Notice that that page isn’t AMP – that is the correct behavior.
5. Click “bark” or “woof” – whichever is your favorite dog sound.
6. Or just go to http://localhost:4375/dog-sounds/woof which is my favorite dog sound.
7. If you have the chrome extension, note that it lets me know that AMP is available, but this is not actually AMP, just markup to direct me to an AMP version.
8. If you click through that chrome extension, you’ll see it takes me to the same page but at?amp=1. I don’t think this is really a bug since I’m on an express server and not handling that routing – but in this case, I don’t think I should have to?

TL;dr I don’t think that withAmp() is rendering only AMP markup, I think it’s rendering hybrid markup.

System information

• OS: [e.g. macOS, Windows]
• Browser (if applies) Chrome
• Version of Next.js: Canary – I think 8.1.16-canary (but it is specified in the test repo)

Additional Context: I have a sneaking suspicion that this might have something to do with the AMP Optimizer, but maybe I just don’t understand enough about how that works.

[ijjk]

Hi, your suspicion that it has to do with the AMP Optimizer is correct. For AMP only pages we create two versions a dirty optimized and a clean optimized. To view the clean optimized version of an AMP only page you add ?amp=1 to your URL.

Note: in development, we add script tags to provide automatic reloading of the page.

Looks like you replied before I posted my reply. The fix you applied is correct, the ?amp=1 query is how we tell AMP Optimizer to create a clean version and by default, it creates a dirty optimized version with a rel pointing to the clean AMP version.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.