Google AMP Stories Support

[oguzbilgic]

Google recently introduced a product called Google stories

As far as I can understand, this implements AMP with special HTML tags. Eventually, this ends up being published as an HTML page with a bookend.json file attached.

Not sure what would be the best way to implement this using next.js

[brunomarks7]

I have the same question. This tool allows you to create, export, and upload by FTP.

My CMS used in NextJS is WordPress, and it has an official plugin to create web-stories. However, WordPress uses an IP address and I don't know how SEO works with that.

[slavakurilyak]

@google provides SEO and technical best practices for implementing web stories.

Google started testing amp-script (custom JS in a web worker) using popular JS frameworks:

The team has tested amp-script with frameworks like Vue, Angular, Aurelia, and lit-html, but less extensively (amp.dev)

Google also recognizes JS bundle size limitations:

That said, React bundles often exceed amp-script's 150K limit. So it's recommended that you use Preact, a lightweight alternative to React (amp.dev)

[raphaeljoer]

Check this guys!
https://nextjs.org/docs/advanced-features/amp-support/adding-amp-components

[timofeysie]

Check this guys! https://nextjs.org/docs/advanced-features/amp-support/adding-amp-components

@raphaeljoer , that's for AMP components. This question is about Google AMP Stories, which have a very specific format. As @oguzbilgic pointed out, they are deployed with a bookend.json file attached. A Next.js example or tutorial on how to author an AMP Story would work, or possibly an addition to the cli to generate a boilerplate version.

However, as @slavakurilyak pointed out, bundle size might be a limitation, and so Preact is recommended. Does this mean that a regular Next.js app with AMP pages would not work for SEO which is the intended purpose of AMPs?

Since there is a Preact demo already, a version of this that is setup for AMPs and another version for AMP stories would be what is needed.

[devmoatassem]

@raphaeljoer can you please share any refrence for app router ?