Error: Catch-all must be the last part of the URL when using opengraph-image.tsx inside a catch-all route

[patrick91]

Verify canary release

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

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.3.0: Mon Jan 30 20:38:37 PST 2023; root:xnu-8792.81.3~2/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.16.0
      npm: 8.19.3
      Yarn: 1.22.19
      pnpm: 7.13.5
    Relevant packages:
      next: 13.3.1-canary.3
      eslint-config-next: 13.3.0
      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), Metadata (metadata, generateMetadata, next/head, head.js)

Link to the code that reproduces this issue

https://github.com/EuroPython/website/tree/fa47fe9a3d7a732d9536ed0200dfe9b3f992565a

(newer version have a "workaround")

To Reproduce

in the repo above try to do npm install and then npm run dev, you should get an error

Describe the Bug

When using opengraph-image.tsx inside app/[...parts]/ I get the following error:

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
warn  - You have enabled experimental feature (appDir) in next.config.js.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

info  - Thank you for testing `appDir` please leave your feedback at https://nextjs.link/app-feedback
event - compiled client and server successfully in 2.2s (371 modules)
wait  - compiling...
Error: Catch-all must be the last part of the URL.
    at UrlNode._insert (/Users/patrick/github/europython/website/node_modules/next/dist/shared/lib/router/utils/sorted-routes.js:54:19)
    at UrlNode._insert (/Users/patrick/github/europython/website/node_modules/next/dist/shared/lib/router/utils/sorted-routes.js:136:40)
    at UrlNode.insert (/Users/patrick/github/europython/website/node_modules/next/dist/shared/lib/router/utils/sorted-routes.js:8:14)
    at /Users/patrick/github/europython/website/node_modules/next/dist/shared/lib/router/utils/sorted-routes.js:159:46
    at Array.forEach (<anonymous>)
    at Object.getSortedRoutes (/Users/patrick/github/europython/website/node_modules/next/dist/shared/lib/router/utils/sorted-routes.js:159:21)
    at Watchpack.<anonymous> (/Users/patrick/github/europython/website/node_modules/next/dist/server/dev/next-dev-server.js:544:55) {
  type: 'Error'
}

removing opengraph-image.tsx fixes the issue.

Expected Behavior

I should be able to use opengraph-image.tsx inside a catch-all route

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[patrick91]

I worked around this creating two non catch all routes (as I have only two levels), but I imagine this won't work in all cases 😊

[cosmicknox]

i got this same errror today

Error: Catch-all must be the last part of the URL.

i had some pages name [...addresss] , [...tokenId]

removing .... got rid of the bug

[haneenmahd]

It's because you have sub routes inside the catch all route, which for example might [...nextAuth]. If you have sub routes inside catch all routes, it will throw an error. You need to move out the sub routes to anther route.

[huozhi]

It's not possible now as dynamic og image could recieve params so it's could be a lambda/edge route, but all the possible paths including the request url paths to og image are caught by the catch-all routes.

For your case as it doesn't receive any params, so you can add a (group) routes on top of catch all routes

app
├── (catch-all)
│   ├── [...all]
│   │   └── page.tsx
│   └── opengraph-image.js
├── layout.js
├── opengraph-image.png
├── page.js

So it will generate a special path for og image under that group with a suffix, which is distinct from others

[patrick91]

@huozhi not sure if this means it will never be supported?

My use case is about having a catch-all route for pages on my site /page/nested-page, again I solved this by having two nested routes, but ideally this should work for any level, no?

[github-actions]

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