Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 4 commits into from
Jan 24, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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**:
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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`.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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(
(
Expand All @@ -140,7 +140,7 @@ export default async function Image() {
fonts: [
{
name: 'Inter',
data: await interSemiBold,
data: interSemiBold,
style: 'normal',
weight: 400,
},
Expand All @@ -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'
Expand All @@ -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(
(
Expand All @@ -196,7 +196,7 @@ export default async function Image() {
fonts: [
{
name: 'Inter',
data: await interSemiBold,
data: interSemiBold,
style: 'normal',
weight: 400,
},
Expand Down Expand Up @@ -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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 0 additions & 1 deletion examples/auth/app/api/auth/[...nextauth]/route.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
export { GET, POST } from "@/auth";
export const runtime = "edge";
4 changes: 0 additions & 4 deletions examples/with-mux-video/app/v/[playbackId]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
Loading