[NEXT-1102] `opengraph-image` is 404 in route group segments, both image and dynamic

[filingroove]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 20.6.0: Tue Apr 19 21:04:45 PDT 2022; root:xnu-7195.141.29~1/RELEASE_X86_64
    Binaries:
      Node: 16.19.0
      npm: 9.3.1
      Yarn: 3.4.1
      pnpm: N/A
    Relevant packages:
      next: 13.3.1-canary.2
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue

https://stackblitz.com/edit/vercel-next-js-k4rkzr?file=app/(group)/segment/page.tsx

To Reproduce

In any Next.JS 13 project, in appDir:

1. Create route (group)
2. In the route (group), create a /segment/page.tsx
3. Create any /segment/opengraph-image, (jpg|png|...) or (js|jsx|tsx) – doesn't matter
4. You won't be able to access the OG Image for any page in the segment or it's leaf segments

Describe the Bug

While setting opengraph-image for a segment in the route group, it doesn't work. You will see a 404 page instead.

It is detected and compiled as evidence by the console messages referring to it:

wait  - compiling /opengraph-image.jpg/route (client and server)...
event - compiled successfully in 362 ms (299 modules)

warn  - metadata.metadataBase is not set for resolving url "/blog/opengraph-image.jpg?0a4faadd7eacd798", fallbacks to "http://localhost:3000". See https://beta.nextjs.org/docs/api-reference/metadata#metadatabase

Expected Behavior

opengraph-image should work the same on any nesting level, in a route group or outside of a route group.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-1102

[surjithctly]

I guess this is related : https://github.com/vercel/next.js/issues/48081

[huozhi]

This issue is fixed by https://github.com/vercel/next.js/pull/47985

[filingroove]

@huozhi on version 13.4.1, not fixed.

Same example URL I provided: 404

Locally: ERR_INVALID_URL

[huozhi]

@filingroove We're adding hash suffix for the opengraph-image under group routes now, for my case, If I add an og image I'll see the url http://localhost:3000/segment/opengraph-image-2c1y32.jpg?fab2915dd2f098ea as og:image metatag value in the /segment page.

I couldn't repro the error in the 2nd picture locally with the codesandbox one. Would you mind sharing a repo with which you bumped to this error that having /blog?

[filingroove]

@huozhi

I couldn't repro the error in the 2nd picture locally with the codesandbox one. Would you mind sharing a repo with which you bumped to this error that having /blog?

I understand what you're doing :) When I reported the issue, hash suffixes were already added to images under groups.

I can't share the repo with you as it's closed source, but I can provide you snippets with the bits you need to solve the issue.

Original system I tried and failed on is in the op, it still happens in the sandbox (though error is just 404 there and not "invalid path") and the system now is this:

    Platform: linux
      Arch: x64
      Version: #1 SMP PREEMPT_DYNAMIC Thu, 20 Apr 2023 16:11:55 +0000
    Binaries:
      Node: 16.20.0
      npm: 8.19.4
      Yarn: 3.4.1
      pnpm: N/A
    Relevant packages:
      next: 13.4.1
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

[huozhi]

Looks like your reproduction on stackblitz is using an old canary version. I forked it with lastest version and now can repro with the error on stackblitz

./node_modules/next/dist/build/webpack/loaders/next-metadata-image-loader.js?type=openGraph&segment=%2F(group)%2Fsegment&route=%2Fsegment&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js!./app/(group)/segment/opengraph-image.jpg?__next_metadata
EIO: i/o error, read

Original system I tried and failed on is in the op Is the above error the same one you had with your linux system?

[filingroove]

Is the above error the same one you had with your linux system?

It keeps giving different errors on different systems. On Mac I had no error, just 404 in Browser and nothing in terminal output in dev. On Linux it's ERR_INVALID_URL. On StackBlitz it's EIO: i/o error, read.

I know this makes things harder but mb they all have common root.

[huozhi]

For macOS, I'm not sure if it's having the same problem like linux, I couldn't repro with group routes locally.. Are you getting 404 on mac with latest nextjs and the og image url with hash?

[alainkaiser]

I may have encountered the same problem, but in a slightly different situation.

Starting point:

• "next": "^13.4.3"
• "app dir" enabled

Folder structure (app dir): app

• (web)
  • projekte
    • [slug]
      • opengraph-image.tsx
      • page.tsx
    • page.tsx

Now, when I am trying to access the generated image, I am redirected to the 404 page (as I have a 404 page setup).

Sample access url:

/projekte/neue-app/opengraph-image

When I look at the head tag, I see that the Opengraph image was generated:

The problem seems to be the hash suffix which is added to the URL as already mentioned by @huozhi. It would be cool if there would be a more accessible way to access the generated opengraph images especially for debugging & testing.

[codinsonn]

Can confirm this is still not fixed in 13.4.8, any /(routegroup)/ in the path for the opengraph-image still returns 404 but does work if you put it outside a route group at the same path

[BeroBurny]

Can confirm this is still not fixed in 13.4.8, any /(routegroup)/ in the path for the opengraph-image still returns 404 but does work if you put it outside a route group at the same path

I tested it with a canary and works fine, my setup can be found in issue https://github.com/vercel/next.js/issues/56210

[fsa317]

I think I have the same image as this, has anyone found a good workaround?

[cini9]

Having the same issue. I'm trying to get the openGraph ordering to work as per the documentation : https://nextjs.org/docs/app/building-your-application/optimizing/metadata#ordering

I have a layout which has a default static openGraph image, an index page which has a static openGraph image and a news/[slug] which has a dynamic openGraph image coming from the server. If there is an issue with the dynamic openGraph image, I would like the default image from the layout to be visible, but I keep getting the static image from the home page.

I tried putting the home page into a (index) route group with it's opengraph-image.png, but then the home image is no longer showing.

Any ideas on how to get this to work ?