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>
18 lines
322 B
TypeScript
18 lines
322 B
TypeScript
type LayoutProps = {
|
|
children?: React.ReactNode
|
|
}
|
|
|
|
export default function Layout({ children }: LayoutProps) {
|
|
return (
|
|
<>
|
|
{children}
|
|
<style jsx global>{`
|
|
body {
|
|
font-family: Roboto, sans-serif;
|
|
padding: 30px;
|
|
color: #444;
|
|
}
|
|
`}</style>
|
|
</>
|
|
)
|
|
}
|