docs: opengraph-image files work with the node.js runtime (#75274)

Co-authored-by: Jiachi Liu <[email protected]>

Author: leerob

docs/01-app/03-building-your-application/01-routing/06-loading-ui-and-streaming.mdx

@@ -61,7 +61,7 @@ In the same folder, `loading.js` will be nested inside `layout.js`. It will auto
 
 ## Streaming with Suspense
 
-In addition to `loading.js`, you can also manually create Suspense Boundaries for your own UI components. The App Router supports streaming with [Suspense](https://react.dev/reference/react/Suspense) for both [Node.js and Edge runtimes](/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes).
+In addition to `loading.js`, you can also manually create Suspense Boundaries for your own UI components. The App Router supports streaming with [Suspense](https://react.dev/reference/react/Suspense).
 
 > **Good to know**:
 >

docs/01-app/03-building-your-application/06-optimizing/04-metadata.mdx

@@ -286,7 +286,6 @@ export async function GET() {
 >
 > - Examples are available in the [Vercel OG Playground](https://og-playground.vercel.app/).
 > - `ImageResponse` uses [@vercel/og](https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation), [Satori](https://github.com/vercel/satori), and Resvg to convert HTML and CSS into PNG.
-> - Only the Edge Runtime is supported. The default Node.js runtime will not work.
 > - Only flexbox and a subset of CSS properties are supported. Advanced layouts (e.g. `display: grid`) will not work.
 > - Maximum bundle size of `500KB`. The bundle size includes your JSX, CSS, fonts, images, and any other assets. If you exceed the limit, consider reducing the size of any assets or fetching at runtime.
 > - Only `ttf`, `otf`, and `woff` font formats are supported. To maximize the font parsing speed, `ttf` or `otf` are preferred over `woff`.

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

@@ -96,8 +96,8 @@ The easiest way to generate an image is to use the [ImageResponse](/docs/app/api
 
 ```tsx filename="app/about/opengraph-image.tsx" switcher
 import { ImageResponse } from 'next/og'
-
-export const runtime = 'edge'
+import { readFile } from 'node:fs/promises'
+import { join } from 'node:path'
 
 // Image metadata
 export const alt = 'About Acme'
@@ -110,10 +110,10 @@ export const contentType = 'image/png'
 
 // Image generation
 export default async function Image() {
-  // Font
-  const interSemiBold = fetch(
-    new URL('./Inter-SemiBold.ttf', import.meta.url)
-  ).then((res) => res.arrayBuffer())
+  // Font loading, process.cwd() is Next.js project directory
+  const interSemiBold = await readFile(
+    join(process.cwd(), 'assets/Inter-SemiBold.ttf')
+  )
 
   return new ImageResponse(
     (
@@ -140,7 +140,7 @@ export default async function Image() {
       fonts: [
         {
           name: 'Inter',
-          data: await interSemiBold,
+          data: interSemiBold,
           style: 'normal',
           weight: 400,
         },
@@ -152,8 +152,8 @@ export default async function Image() {
 
 ```jsx filename="app/about/opengraph-image.js" switcher
 import { ImageResponse } from 'next/og'
-
-export const runtime = 'edge'
+import { readFile } from 'node:fs/promises'
+import { join } from 'node:path'
 
 // Image metadata
 export const alt = 'About Acme'
@@ -166,10 +166,10 @@ export const contentType = 'image/png'
 
 // Image generation
 export default async function Image() {
-  // Font
-  const interSemiBold = fetch(
-    new URL('./Inter-SemiBold.ttf', import.meta.url)
-  ).then((res) => res.arrayBuffer())
+  // Font loading, process.cwd() is Next.js project directory
+  const interSemiBold = await readFile(
+    join(process.cwd(), 'assets/Inter-SemiBold.ttf')
+  )
 
   return new ImageResponse(
     (
@@ -196,7 +196,7 @@ export default async function Image() {
       fonts: [
         {
           name: 'Inter',
-          data: await interSemiBold,
+          data: interSemiBold,
           style: 'normal',
           weight: 400,
         },
@@ -400,62 +400,6 @@ export default async function Image({ params }) {
 }
 ```
 
-#### Using Edge runtime with local assets
-
-This example uses the Edge runtime to fetch a local image on the file system and passes it as an `ArrayBuffer` to the `src` attribute of an `<img>` element. The local asset should be placed relative to the example source file location.
-
-```tsx filename="app/opengraph-image.tsx" switcher
-import { ImageResponse } from 'next/og'
-
-export const runtime = 'edge'
-
-export default async function Image() {
-  const logoSrc = await fetch(new URL('./logo.png', import.meta.url)).then(
-    (res) => res.arrayBuffer()
-  )
-
-  return new ImageResponse(
-    (
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <img src={logoSrc} height="100" />
-      </div>
-    )
-  )
-}
-```
-
-```jsx filename="app/opengraph-image.js" switcher
-import { ImageResponse } from 'next/og'
-
-export const runtime = 'edge'
-
-export default async function Image() {
-  const logoSrc = await fetch(new URL('./logo.png', import.meta.url)).then(
-    (res) => res.arrayBuffer()
-  )
-
-  return new ImageResponse(
-    (
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <img src={logoSrc} height="100" />
-      </div>
-    )
-  )
-}
-```
-
 #### Using Node.js runtime with local assets
 
 This example uses the Node.js runtime to fetch a local image on the file system and passes it as an `ArrayBuffer` to the `src` attribute of an `<img>` element. The local asset should be placed relative to the root of your project, rather than the location of the example source file.

docs/01-app/04-api-reference/04-functions/revalidatePath.mdx

@@ -7,7 +7,6 @@ description: API Reference for the revalidatePath function.
 
 > **Good to know**:
 >
-> - `revalidatePath` is available in both [Node.js and Edge runtimes](/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes).
 > - `revalidatePath` only invalidates the cache when the included path is next visited. This means calling `revalidatePath` with a dynamic route segment will not immediately trigger many revalidations at once. The invalidation only happens when the path is next visited.
 > - Currently, `revalidatePath` invalidates all the routes in the [client-side Router Cache](/docs/app/building-your-application/caching#client-side-router-cache) when used in a server action. This behavior is temporary and will be updated in the future to apply only to the specific path.
 > - Using `revalidatePath` invalidates **only the specific path** in the [server-side Route Cache](/docs/app/building-your-application/caching#full-route-cache).

docs/01-app/04-api-reference/04-functions/revalidateTag.mdx

@@ -7,7 +7,6 @@ description: API Reference for the revalidateTag function.
 
 > **Good to know**:
 >
-> - `revalidateTag` is available in both [Node.js and Edge runtimes](/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes).
 > - `revalidateTag` only invalidates the cache when the path is next visited. This means calling `revalidateTag` with a dynamic route segment will not immediately trigger many revalidations at once. The invalidation only happens when the path is next visited.
 
 ## Parameters

docs/01-app/04-api-reference/04-functions/unstable_expirePath.mdx

@@ -8,7 +8,6 @@ version: unstable
 
 > **Good to know**:
 >
-> - `unstable_expirePath` is available in both [Node.js and Edge runtimes](/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes).
 > - `unstable_expirePath` only invalidates the cache when the included path is next visited. This means calling `unstable_expirePath` with a dynamic route segment will not immediately trigger many expirations at once. The invalidation only happens when the path is next visited.
 > - Currently, `unstable_expirePath` invalidates all the routes in the [client-side Router Cache](/docs/app/building-your-application/caching#client-side-router-cache) when used in a server action. This behavior is temporary and will be updated in the future to apply only to the specific path.
 > - Using `unstable_expirePath` invalidates **only the specific path** in the [server-side Route Cache](/docs/app/building-your-application/caching#full-route-cache).

docs/01-app/04-api-reference/04-functions/unstable_expireTag.mdx

@@ -8,7 +8,6 @@ version: unstable
 
 > **Good to know**:
 >
-> - `unstable_expireTag` is available in both [Node.js and Edge runtimes](/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes).
 > - `unstable_expireTag` only invalidates the cache when the path is next visited. This means calling `unstable_expireTag` with a dynamic route segment will not immediately trigger many expirations at once. The invalidation only happens when the path is next visited.
 
 ## Reference

examples/auth/app/api/auth/[...nextauth]/route.ts

@@ -1,2 +1 @@
 export { GET, POST } from "@/auth";
-export const runtime = "edge";

examples/with-mux-video/app/v/[playbackId]/page.tsx

@@ -44,10 +44,6 @@ const Code = ({ children }: { children: React.ReactNode }) => (
   </code>
 );
 
-// this function communicates with no external services and relies on no Node APIs
-// it's perfect for the edge
-export const runtime = "edge";
-
 export default async function Page(props: { params: Promise<Params> }) {
   const params = await props.params;