1ccf894501
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>
19 lines
364 B
JSON
19 lines
364 B
JSON
{
|
|
"private": true,
|
|
"scripts": {
|
|
"dev": "next",
|
|
"build": "next build",
|
|
"start": "next start"
|
|
},
|
|
"dependencies": {
|
|
"next": "latest",
|
|
"react": "^18.2.0",
|
|
"react-dom": "^18.2.0"
|
|
},
|
|
"devDependencies": {
|
|
"@types/node": "^18.0.0",
|
|
"@types/react": "^18.0.12",
|
|
"@types/react-dom": "^18.0.5",
|
|
"typescript": "^4.7.3"
|
|
}
|
|
}
|