examples: convert @next/third-parties examples from JS to TS (#73602)

### What? - `with-google-maps-embed` example - `with-google-tag-manager` example - `with-youtube-embed` example ### Why? The examples are written in JavaScript. ### How? Converted JavaScript examples to TypeScript. --------- Co-authored-by: samcx <[email protected]>
vercel · Dec 17, 2024 · 6a609fa · 6a609fa
1 parent fd0028e
commit 6a609fa
Show file tree

Hide file tree

Showing 19 changed files with 161 additions and 39 deletions.
diff --git a/examples/with-google-maps-embed/README.md b/examples/with-google-maps-embed/README.md
@@ -1,6 +1,6 @@
 ## Example app using Google Maps Embed
 
-This example shows how to embed a Google Maps Embed using `@next/third-parties`.
+This example shows how to embed a Google Maps Embed using [`@next/third-parties`](https://nextjs.org/docs/app/building-your-application/optimizing/third-party-libraries).
 
 ## Deploy your own
 

diff --git a/examples/with-google-maps-embed/app/layout.js b/examples/with-google-maps-embed/app/layout.js
diff --git a/examples/with-google-maps-embed/app/layout.tsx b/examples/with-google-maps-embed/app/layout.tsx
@@ -0,0 +1,18 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "With Google Maps Embed",
+  description: "Next.js example with Google Maps Embed.",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/examples/with-google-maps-embed/app/page.js → examples/with-google-maps-embed/app/page.tsx b/examples/with-google-maps-embed/app/page.js → examples/with-google-maps-embed/app/page.tsx
diff --git a/examples/with-google-maps-embed/package.json b/examples/with-google-maps-embed/package.json
@@ -6,9 +6,14 @@
     "start": "next start"
   },
   "dependencies": {
-    "next": "latest",
     "@next/third-parties": "latest",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "next": "latest",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.0.1",
+    "typescript": "^5.7.2"
   }
 }
diff --git a/examples/with-google-maps-embed/tsconfig.json b/examples/with-google-maps-embed/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/examples/with-google-tag-manager/README.md b/examples/with-google-tag-manager/README.md
@@ -1,6 +1,6 @@
 ## Example app using Google Tag Manager
 
-This example shows how to include Google Tag Manager in a Next.js application using `@next/third-parties`. The GTM container is instantiated in `layout.js` and the `sendGTMEvent` function is fired in the `EventButton` client component.
+This example shows how to include Google Tag Manager in a Next.js application using [`@next/third-parties`](https://nextjs.org/docs/app/building-your-application/optimizing/third-party-libraries). The GTM container is instantiated in `layout.tsx` and the `sendGTMEvent` function is fired in the `EventButton` client component.
 
 ## Deploy your own
 

diff --git a/...tag-manager/app/components/EventButton.js → ...e-tag-manager/_components/EventButton.tsx b/...tag-manager/app/components/EventButton.js → ...e-tag-manager/_components/EventButton.tsx
diff --git a/examples/with-google-tag-manager/app/layout.js b/examples/with-google-tag-manager/app/layout.js
diff --git a/examples/with-google-tag-manager/app/layout.tsx b/examples/with-google-tag-manager/app/layout.tsx
@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { GoogleTagManager } from "@next/third-parties/google";
+
+export const metadata: Metadata = {
+  title: "With Google Tag Manager",
+  description: "Next.js example with Google Tag Manager.",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+      <GoogleTagManager
+        gtmId={process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID as string}
+      />
+    </html>
+  );
+}
diff --git a/examples/with-google-tag-manager/app/page.js → ...ples/with-google-tag-manager/app/page.tsx b/examples/with-google-tag-manager/app/page.js → ...ples/with-google-tag-manager/app/page.tsx
@@ -1,4 +1,4 @@
-import { EventButton } from "./components/EventButton";
+import { EventButton } from "@/_components/EventButton";
 
 export default function Page() {
   return (

diff --git a/examples/with-google-tag-manager/package.json b/examples/with-google-tag-manager/package.json
@@ -6,9 +6,14 @@
     "start": "next start"
   },
   "dependencies": {
-    "next": "latest",
     "@next/third-parties": "latest",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "next": "latest",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.0.1",
+    "typescript": "^5.7.2"
   }
 }
diff --git a/examples/with-google-tag-manager/tsconfig.json b/examples/with-google-tag-manager/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/examples/with-youtube-embed/README.md b/examples/with-youtube-embed/README.md
@@ -1,6 +1,6 @@
 ## Example app using YouTube Embed
 
-This example shows how to embed a YouTube Embed using `@next/third-parties`.
+This example shows how to embed a YouTube Embed using [`@next/third-parties`](https://nextjs.org/docs/app/building-your-application/optimizing/third-party-libraries).
 
 ## Deploy your own
 

diff --git a/examples/with-youtube-embed/app/layout.js b/examples/with-youtube-embed/app/layout.js
diff --git a/examples/with-youtube-embed/app/layout.tsx b/examples/with-youtube-embed/app/layout.tsx
@@ -0,0 +1,18 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "With YouTube Embed",
+  description: "Next.js example with YouTube Embed.",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/examples/with-youtube-embed/app/page.js → examples/with-youtube-embed/app/page.tsx b/examples/with-youtube-embed/app/page.js → examples/with-youtube-embed/app/page.tsx
diff --git a/examples/with-youtube-embed/package.json b/examples/with-youtube-embed/package.json
@@ -6,9 +6,14 @@
     "start": "next start"
   },
   "dependencies": {
-    "next": "latest",
     "@next/third-parties": "latest",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "next": "latest",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.0.1",
+    "typescript": "^5.7.2"
   }
 }
diff --git a/examples/with-youtube-embed/tsconfig.json b/examples/with-youtube-embed/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}