diff --git a/docs/01-app/03-building-your-application/01-routing/06-loading-ui-and-streaming.mdx b/docs/01-app/03-building-your-application/01-routing/06-loading-ui-and-streaming.mdx index 867243be7dc88..5856e68bcf272 100644 --- a/docs/01-app/03-building-your-application/01-routing/06-loading-ui-and-streaming.mdx +++ b/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**: > diff --git a/docs/01-app/03-building-your-application/06-optimizing/04-metadata.mdx b/docs/01-app/03-building-your-application/06-optimizing/04-metadata.mdx index 414db77be54b4..5ac90b2ce21b9 100644 --- a/docs/01-app/03-building-your-application/06-optimizing/04-metadata.mdx +++ b/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`. diff --git a/docs/01-app/04-api-reference/03-file-conventions/01-metadata/opengraph-image.mdx b/docs/01-app/04-api-reference/03-file-conventions/01-metadata/opengraph-image.mdx index de3abc1937936..7a2f7fbd786fc 100644 --- a/docs/01-app/04-api-reference/03-file-conventions/01-metadata/opengraph-image.mdx +++ b/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 `` 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( - ( -
- -
- ) - ) -} -``` - -```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( - ( -
- -
- ) - ) -} -``` - #### 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 `` element. The local asset should be placed relative to the root of your project, rather than the location of the example source file. diff --git a/docs/01-app/04-api-reference/04-functions/revalidatePath.mdx b/docs/01-app/04-api-reference/04-functions/revalidatePath.mdx index dd65815b8b1b0..a751493a5d0f1 100644 --- a/docs/01-app/04-api-reference/04-functions/revalidatePath.mdx +++ b/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). diff --git a/docs/01-app/04-api-reference/04-functions/revalidateTag.mdx b/docs/01-app/04-api-reference/04-functions/revalidateTag.mdx index 729e773b8f5e4..04f8cf375020d 100644 --- a/docs/01-app/04-api-reference/04-functions/revalidateTag.mdx +++ b/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 diff --git a/docs/01-app/04-api-reference/04-functions/unstable_expirePath.mdx b/docs/01-app/04-api-reference/04-functions/unstable_expirePath.mdx index e1dfcd5c2c5a6..5e7fdb7d6cc16 100644 --- a/docs/01-app/04-api-reference/04-functions/unstable_expirePath.mdx +++ b/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). diff --git a/docs/01-app/04-api-reference/04-functions/unstable_expireTag.mdx b/docs/01-app/04-api-reference/04-functions/unstable_expireTag.mdx index b51505a482e51..06acd3a729315 100644 --- a/docs/01-app/04-api-reference/04-functions/unstable_expireTag.mdx +++ b/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 diff --git a/examples/auth/app/api/auth/[...nextauth]/route.ts b/examples/auth/app/api/auth/[...nextauth]/route.ts index e47b0fd8f07f2..2e06971a07e70 100644 --- a/examples/auth/app/api/auth/[...nextauth]/route.ts +++ b/examples/auth/app/api/auth/[...nextauth]/route.ts @@ -1,2 +1 @@ export { GET, POST } from "@/auth"; -export const runtime = "edge"; diff --git a/examples/with-mux-video/app/v/[playbackId]/page.tsx b/examples/with-mux-video/app/v/[playbackId]/page.tsx index 5839c3edc0b56..2f00694c7d9f3 100644 --- a/examples/with-mux-video/app/v/[playbackId]/page.tsx +++ b/examples/with-mux-video/app/v/[playbackId]/page.tsx @@ -44,10 +44,6 @@ const Code = ({ children }: { children: React.ReactNode }) => ( ); -// 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 }) { const params = await props.params;