[@types/next-server] add next/amp support (#35132)

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;

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 <p>Welcome to AMP + Next.js.</p>;
+}
+
+// 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 }) : (
+        <img src={src} width={width} height={height} />
+    );
+}

types/next-server/tsconfig.json

@@ -20,6 +20,7 @@
     },
     "files": [
         "index.d.ts",
+        "amp.d.ts",
         "asset.d.ts",
         "config.d.ts",
         "constants.d.ts",
@@ -29,6 +30,7 @@
         "next-config.d.ts",
         "router.d.ts",
         "test/next-server-tests.ts",
+        "test/next-server-amp-tests.tsx",
         "test/next-server-constants-tests.ts",
         "test/next-server-head-tests.tsx",
         "test/next-server-link-tests.tsx",

types/next/amp.d.ts

@@ -0,0 +1 @@
+export * from 'next-server/amp';

types/next/tsconfig.json

@@ -21,6 +21,7 @@
     "files": [
         "index.d.ts",
         "constants.d.ts",
+        "amp.d.ts",
         "app.d.ts",
         "document.d.ts",
         "dynamic.d.ts",