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](https://nextjs.org/docs/basic-features/typescript#existing-projects). 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](https://github.com/vercel/next.js/issues/7584#issuecomment-503376412) 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](https://github.com/vercel/next.js/discussions/16755), however AMP expects a [single `<style amp-custom>` tag in the head](https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#stylesheets).
Fixes:
> The parent tag of tag 'style amp-custom' is 'body', but it can only be 'head'
## Documentation / Examples
- [X] Make sure the linting passes by running `pnpm lint`
- [X] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
