diff --git a/types/next-server/amp.d.ts b/types/next-server/amp.d.ts new file mode 100644 index 0000000000..46db2c3ade --- /dev/null +++ b/types/next-server/amp.d.ts @@ -0,0 +1,12 @@ +import { NextComponentType } from "next"; + +export interface WithAmpConfig { + hybrid: boolean; +} + +export function withAmp( + Component: NextComponentType | React.ComponentType, + config?: WithAmpConfig +): React.ComponentType; + +export function useAmp(): boolean; diff --git a/types/next-server/test/next-server-amp-tests.tsx b/types/next-server/test/next-server-amp-tests.tsx new file mode 100644 index 0000000000..e53b29ca35 --- /dev/null +++ b/types/next-server/test/next-server-amp-tests.tsx @@ -0,0 +1,23 @@ +import * as React from "react"; +import { withAmp, useAmp } from "next-server/amp"; + +function HomePage() { + return
Welcome to AMP + Next.js.
; +} + +// 1. `withAmp()` +export const WithAmp = withAmp(HomePage); + +// 2. `withAmp()` + config +export const WithHybridAmp = withAmp(HomePage, { hybrid: true }); + +// 3. `useAmp()` hook +export function Image({ src, width, height }: any) { + const isAmp = useAmp(); + + // The 'amp-img' element is not in the JSX namespace, so for now we + // use `React.createElement()` to construct the amp-img element. + return isAmp ? React.createElement('amp-img', { src, width, height }) : ( +