Dynamic route taking precedence over static route

[wbertolo]

Hi,

I am working on a NextJS implementation of a WP using NextJS on the front end.

Contrary to the posts I have been reading, the dynamic route /music of my site is taking precedence over the /music/page.tsx static I have in the src directory.

I can see the content of my remote WP page, not the custom code that my static route is supposed to do.

The most interesting part is that, once in every 10 builds (average), it does what is supposed to happen (build from the static route).

The static route also uses the remote site’s content, but it comes from a diff API endpoint which delivers a different kind of data (not a WP page data) which is processed differently.

My page code contains this:

export default async function Music() {

	const res = await fetch(`${process.env.WP_API}/releases`);
	const releases = await res.json();
        // then the content above is processed down the page to output the page's custom content.

I have my next.confg.js set like this:

const nextConfig = {
    output: 'export',

Expected behaviour: the static route should always be build.
Current behaviour: most of the time, the generated page’s content comes from the remote site’s graphQL content.

Deployment URL or Custom Domain:
Environment (local, preview, production): production
Project Framework: nextJS (latest)
Build Settings:
  Framework Preset:
  Build Command (if not default): npm run build
  Output Directory (if not default): out
  Install Command (if not default): 
Node/Runtime Version: 20.17.0
Package Manager:
Relevant Packages:

[pawlean (Pauline P. Narvas)]

Hi, @wbertolo! Welcome to the Vercel Community

@wbertolo

const nextConfig = {
    output: 'export',

First, it’s important to note that when using output: 'export' in your next.config.js, Next.js generates static HTML files for your pages.

@wbertolo

, the dynamic route /music of my site is taking precedence over the /music/page.tsx static I have in the src directory.

In Next.js, more specific routes typically take precedence over less specific ones . So, /music/page.tsx should indeed take precedence over a dynamic /music route.

Maybe you can try to explicitly defining the /music route in your next.config.js:

const nextConfig = {
  ...
  ) {
    return {
      ...defaultPathMap,
      '/music': { page: '/music' },
    }
  },
}

Could you also make sure that there are no conflicting rewrite rules in your next.config.js that might be interfering with the /music route?

It’s worth also double-checking that your WordPress API isn’t returning conflicting data for the /music route. You might want to log the API responses to see if there’s any unexpected behavior.

A minimal reproducible example may also be helpful if you’d like to share one with us.

[wbertolo]

Hi @pawlean , thanks for the quick response.

I checked the API response and it’s returning the correct slug for that page, ‘music’, but that should be overridden by the static route /music/page.tsx.

It was not clear to me how to wrap the suggested code you sent above for the nextconfig file, so I tried to use exportPathMap, but then I got a message that reads like the "exportpathmap" configuration cannot be used with the "app" directory. please use generatestaticparams() instead..

Could you share the complete example of the nextconfig file?

Also, isn’t it strange that every x builds, it does what it is supposed to do? It’s pretty random, but most of the time, it does the wrong thing.

Thanks.