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

[filingroove]

Verify canary release

• 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 : #48081

[huozhi]

This issue is fixed by #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 #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 ?

[debkanchan]

I had this issue until I realized the page i was trying to access was blocked because middleware auth. Please check your middlewares and auth

[samcx]

Hi everyone—

I will be closing this issue since the original issue has since been fixed and there are separate issues that came via the comments.

If you have an separate issue you wish to share, please do not hesitate to re-submit a new issue via the bug report.

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.