From e815f71c8cbcdd67e2372c96255a8be88983e27f Mon Sep 17 00:00:00 2001 From: Jan Amann Date: Fri, 10 Jan 2025 18:15:06 +0100 Subject: [PATCH] improve docs --- .../environments/actions-metadata-route-handlers.mdx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/docs/src/pages/docs/environments/actions-metadata-route-handlers.mdx b/docs/src/pages/docs/environments/actions-metadata-route-handlers.mdx index 7d7055492..23967e5e6 100644 --- a/docs/src/pages/docs/environments/actions-metadata-route-handlers.mdx +++ b/docs/src/pages/docs/environments/actions-metadata-route-handlers.mdx @@ -109,9 +109,9 @@ See the [App Router without i18n routing example](/examples#app-router-without-i ### Open Graph images -If you're programmatically generating [Open Graph images](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image), you can apply internationalization by calling functions from `next-intl` in the exported function: +If you're programmatically generating [Open Graph images](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image), you can call functions from `next-intl` in the exported component: -```tsx filename="opengraph-image.tsx" +```tsx filename="app/[locale]/opengraph-image.tsx" import {ImageResponse} from 'next/og'; import {getTranslations} from 'next-intl/server'; @@ -121,7 +121,13 @@ export default async function OpenGraphImage({params: {locale}}) { } ``` -Next.js will create a public route based on the segment where `opengraph-image.tsx` is placed. However, if you're using [i18n routing](/docs/routing) and you've customized the [`localePrefix`](/docs/routing#locale-prefix) setting, this route might not be accessible due to a redirect or rewrite of the middleware. +Next.js will create a public route based on the segment where `opengraph-image.tsx` is placed, e.g.: + +``` +http://localhost:3000/en/opengraph-image?f87b2d56cee109c7 +``` + +However, if you're using [i18n routing](/docs/routing) and you've customized the [`localePrefix`](/docs/routing#locale-prefix) setting, this route might not be accessible since Next.js doesn't know about potential rewrites of the middleware. If this applies to your app, you can adapt your [matcher](/docs/routing/middleware#matcher-config) to bypass requests to the `opengraph-image.tsx` file: