Convert amp example to TypeScript

[maxproske]

Converted AMP example over to TypeScript to match the Contribution guidelines, updated all dependencies, and made some necessary changes to allow AMP apps to build in TypeScript.

I added an additional .d.ts file, and referenced it in the tsconfig.json include array, as per the Next.js docs. These additional types are required to allow lowercase AMP elements to be a property on JSX.IntrinsicElements.

Fixes:

Property 'amp-img' does not exist on type 'JSX.IntrinsicElements'.ts

I also replaced all occurrences of styled JSX with @ijjk's workaround to get styles in the head at build time for AMP-only pages, hybrid AMP pages, and normal pages (non-AMP).

I tried using the useAmp hook first with multiple <style jsx> like this Next.js discussion, however AMP expects a single <style amp-custom> tag in the head.

Fixes:

The parent tag of tag 'style amp-custom' is 'body', but it can only be 'head'

Documentation / Examples

• Make sure the linting passes by running pnpm lint
• The examples guidelines are followed from our contributing doc

[ijjk]

I re-added the usage of styled-jsx here instead of the _document as that's the default we recommend for AMP but looks good other than that, thanks for the PR!

[maxproske]

Thanks @ijjk! However, it appears your re-adding the usage of styled-jsx prevents the example from building.

pnpm build

...

error  The parent tag of tag 'style amp-custom' is 'body', but it can only be 'head'.  https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#stylesheets
error  The parent tag of tag 'style amp-custom' is 'body', but it can only be 'head'.  https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#stylesheets            
error  The parent tag of tag 'style amp-custom' is 'body', but it can only be 'head'.  https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#stylesheets

> Build error occurred
Error: AMP Validation caused the export to fail. https://nextjs.org/docs/messages/amp-export-validation

If styled-jsx is the recommended default, I'd to figure out the correct usage to put this discussion to rest: #16755

[ijjk]

@maxproske that was due to a bug on stable which is fixed in the latest canary of Next.js v12.1.7-canary.41, please update and give it a try!

[maxproske]

@ijjk I updated and encounter the same error on v12.1.7-canary.41 and canary.

[ijjk]

Are you sure the latest canary is installed correctly? I'm not seeing any errors with the example:

[maxproske]

@ijjk You're completely right, it works! I was still on v12.1.7-canary.10.

Thanks for making contributing to Next.js fun! 😄