diff --git a/examples/with-google-maps-embed/README.md b/examples/with-google-maps-embed/README.md
index ac952f12ab7ee..05e1599f008d4 100644
--- 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
deleted file mode 100644
index 23ec8e7d9a6be..0000000000000
--- a/examples/with-google-maps-embed/app/layout.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function RootLayout({ children }) {
- return (
-
- {children}
-
- );
-}
diff --git a/examples/with-google-maps-embed/app/layout.tsx b/examples/with-google-maps-embed/app/layout.tsx
new file mode 100644
index 0000000000000..3f15b790633ef
--- /dev/null
+++ 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 (
+
+ {children}
+
+ );
+}
diff --git a/examples/with-google-maps-embed/app/page.js b/examples/with-google-maps-embed/app/page.tsx
similarity index 100%
rename from examples/with-google-maps-embed/app/page.js
rename to 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
index 785750f2f80de..237f864b0ebd8 100644
--- 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
new file mode 100644
index 0000000000000..4b674cf8ce833
--- /dev/null
+++ 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
index 33c25ce6d8cc5..f81975facdaf4 100644
--- 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/examples/with-google-tag-manager/app/components/EventButton.js b/examples/with-google-tag-manager/_components/EventButton.tsx
similarity index 100%
rename from examples/with-google-tag-manager/app/components/EventButton.js
rename to examples/with-google-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
deleted file mode 100644
index 6df68834002fa..0000000000000
--- a/examples/with-google-tag-manager/app/layout.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { GoogleTagManager } from "@next/third-parties/google";
-
-const GTM_ID = process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID;
-
-export default function RootLayout({ children }) {
- return (
-
- {children}
-
-
- );
-}
diff --git a/examples/with-google-tag-manager/app/layout.tsx b/examples/with-google-tag-manager/app/layout.tsx
new file mode 100644
index 0000000000000..925cb8bf1804f
--- /dev/null
+++ 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 (
+
+ {children}
+
+
+ );
+}
diff --git a/examples/with-google-tag-manager/app/page.js b/examples/with-google-tag-manager/app/page.tsx
similarity index 62%
rename from examples/with-google-tag-manager/app/page.js
rename to examples/with-google-tag-manager/app/page.tsx
index 3a17690f92eac..81524eedd41e2 100644
--- a/examples/with-google-tag-manager/app/page.js
+++ b/examples/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
index 785750f2f80de..237f864b0ebd8 100644
--- 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
new file mode 100644
index 0000000000000..d8b93235f205e
--- /dev/null
+++ 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
index a52c65f767fe7..7cf2c2e88eae2 100644
--- 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
deleted file mode 100644
index 23ec8e7d9a6be..0000000000000
--- a/examples/with-youtube-embed/app/layout.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function RootLayout({ children }) {
- return (
-
- {children}
-
- );
-}
diff --git a/examples/with-youtube-embed/app/layout.tsx b/examples/with-youtube-embed/app/layout.tsx
new file mode 100644
index 0000000000000..724b8d5c5111c
--- /dev/null
+++ 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 (
+
+ {children}
+
+ );
+}
diff --git a/examples/with-youtube-embed/app/page.js b/examples/with-youtube-embed/app/page.tsx
similarity index 100%
rename from examples/with-youtube-embed/app/page.js
rename to examples/with-youtube-embed/app/page.tsx
diff --git a/examples/with-youtube-embed/package.json b/examples/with-youtube-embed/package.json
index 785750f2f80de..237f864b0ebd8 100644
--- 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
new file mode 100644
index 0000000000000..4b674cf8ce833
--- /dev/null
+++ 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"]
+}