rsnext/examples/amp/next-env.d.ts

/// <reference types="next" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.
Convert amp example to TypeScript (#37744) 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> 2022-06-18 19:18:21 +02:00			`/// <reference types="next" />`
			`/// <reference types="next/image-types/global" />`

			`// NOTE: This file should not be edited`
			`// see https://nextjs.org/docs/basic-features/typescript for more information.`