Adds missing JavaScript codeblock in Opengraph Image API reference (#…

…50996)

Also changes JavaScript examples to use `.jsx` extensions so IDEs better recognize the JSX allowed as the first argument to `ImageResponse`. 

Fixes #50141

docs/02-app/02-api-reference/02-file-conventions/01-metadata/opengraph-image.mdx

@@ -146,7 +146,7 @@ export default async function Image() {
 }
 ```
 
-```jsx filename="app/about/opengraph-image.js" switcher
+```jsx filename="app/about/opengraph-image.jsx" switcher
 import { ImageResponse } from 'next/server'
 
 // Route segment config
@@ -225,7 +225,7 @@ export default function Image({ params }: { params: { slug: string } }) {
 }
 ```
 
-```jsx filename="app/shop/[slug]/opengraph-image.js" switcher
+```jsx filename="app/shop/[slug]/opengraph-image.jsx" switcher
 export default function Image({ params }) {
   // ...
 }
@@ -262,7 +262,7 @@ export const alt = 'My images alt text'
 export default function Image() {}
 ```
 
-```jsx filename="opengraph-image.js / twitter-image.js" switcher
+```jsx filename="opengraph-image.jsx / twitter-image.jsx" switcher
 export const alt = 'My images alt text'
 
 export default function Image() {}
@@ -280,7 +280,7 @@ export const size = { width: 1200, height: 630 }
 export default function Image() {}
 ```
 
-```jsx filename="opengraph-image.js / twitter-image.js" switcher
+```jsx filename="opengraph-image.jsx / twitter-image.jsx" switcher
 export const size = { width: 1200, height: 630 }
 
 export default function Image() {}
@@ -299,7 +299,7 @@ export const contentType = 'image/png'
 export default function Image() {}
 ```
 
-```jsx filename="opengraph-image.js / twitter-image.js" switcher
+```jsx filename="opengraph-image.jsx / twitter-image.jsx" switcher
 export const contentType = 'image/png'
 
 export default function Image() {}
@@ -326,7 +326,7 @@ export const runtime = 'edge'
 export default function Image() {}
 ```
 
-```jsx filename="app/opengraph-image.js" switcher
+```jsx filename="app/opengraph-image.jsx" switcher
 export const runtime = 'edge'
 
 export default function Image() {}
@@ -380,3 +380,43 @@ export default async function Image({ params }: { params: { slug: string } }) {
   )
 }
 ```
+
+```jsx filename="app/posts/[slug]/opengraph-image.jsx" switcher
+import { ImageResponse } from 'next/server'
+
+export const runtime = 'edge'
+
+export const alt = 'About Acme'
+export const size = {
+  width: 1200,
+  height: 630,
+}
+export const contentType = 'image/png'
+
+export default async function Image({ params }) {
+  const post = await fetch(`https://.../posts/${params.slug}`).then((res) =>
+    res.json()
+  )
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          fontSize: 48,
+          background: 'white',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {post.title}
+      </div>
+    ),
+    {
+      ...size,
+    }
+  )
+}
+```