Combination of dynamic routes, folder grouping and rewrites doesn't work on Vercel

[SergeySypalo]

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/cocky-blackburn-gd4fc5

To Reproduce

I have a page app(articles)(movies)\genres[genre]\page.js

import MovieList from '../../../../../components/movie-list'

import posts from '../../../../../data/posts'
import movies from '../../../../../data/movies'

export async function generateStaticParams() {  
    return [...new Set(movies.flatMap(movie => movie.genre))].map(genre => ({'genre': `best-${genre}-movies`}))   
}

export default function Posts({ params }) {
   const post = posts.find(post => post.slug == params.genre)   
    return <>      
        <MovieList post={post} genre={params.genre.replace('best-','').replace('-movies','')} />
    </>
}

and here is my next.config.js

const movies = require('./data/movies')

module.exports = {  
    images: {
        formats: ['image/avif', 'image/webp'],
    },
    async rewrites() {
        const rewrites = [...new Set(movies.flatMap(movie => movie.genre))].map(genre => ({
            source: `/best-${genre}-movies`,
            destination: `/genres/best-${genre}-movies`,
        }))     

        return rewrites
    }
}

Current vs. Expected behavior

on localhost everything works as expected, but when deployed to Vercel I'm getting empty page on my website, when following a link to that page. But if I refresh the page, or just paste a URL and press enter, the page displayed as expected. You can check it live: https://sypalo.com/best-romance-movies, just navigate in movies section and try to refresh the page

Verify canary release

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

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
Binaries:
  Node: 20.9.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.0.3
  eslint-config-next: 14.0.3
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

App Router, Routing (next/router, next/navigation, next/link)

Additional context

tried to upgrade to NextJS 14.0.4-canary 3 - same issue on Vercel, while even on SandBox everything seems to be working

[SergeySypalo]

After even more rigorous testing, I found the root cause. When adding pagination, I created /app/[page]/page.js so in the application root, but I also have a route group and a nested folder for movie genres. Both pages have generateStaticParams() with different routes, the first one for pagination, i.e. /2, /3 and so on, and the second one for movie genres, i.e., /best-comedy-movies, /best-drama-movies and so on. But the problem turned out to be that requests to movie-related pages were processed by the pagination route, even though the URLs are different. And the issue occurred only when deployed to Vercel; on the local PC, everything worked as expected. As a workaround, I had to move the main page pagination to a subfolder, so now it's /app/pagination/[page]/page.js and add rewrite rules for it. But this is strange and needs to be investigated/fixed.

[aadarsh-nagrath]

Weird that it works locally but acts up on Vercel, huh? 🤔 pagination route conflicting with the movie genre routes Your workaround, moving the main page pagination to a subfolder and adding rewrite rules is a bit quirky but gets the job done for now. <> Definitely agree </> This needs some proper investigation and fixing.

[SergeySypalo]

yes, as part of testing to make sure I'm not messing up with something I created a new repo https://github.com/SergeySypalo/nextjs14 a new Vercel project and here you can see before moving pagination to a subfolder: nextjs14-hirqhs1v8-sergeysypalo.vercel.app there are text at the top left corner: Best comedy movies on Node 20 Page 2 when you visit each page, you wll see that each has a prefix "My blog - page" which is only in pagination

After moving pagination to a subfolder: nextjs14-buppd81gs-sergeysypalo.vercel.app if you navigate to movies page you will see as expected only: best-comedy-movies

I know the example is not as ideal, but it was rather a quick test with the NextJS demo app.

[github-actions[bot]]

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.