Next.js Discord

Discord Forum

How to change name of the resources serving folder from "_next" to "resources" for example?

Answered
Pin-tailed Snipe posted this in #help-forum
Open in Discord
Pin-tailed SnipeOP
Normally, when I launch my NextJS approuter project and inspect my network tab in the browser, I can see that all resources (css, js chunks, etc.) are being fetched from (example in localhost): http://localhost:3000/_next/static/css/[hash].css. I want it to look like this: http://localhost:3000/resources/static/css/[hash].css ?
Answered by gin
if u have a next app runing on localhost:3010 and a frontend on domain.com
i for example hosted something on domain.com/next (example)
set the basePath to /next and proxied all request to /next to localhost:3010 in nginx
View full answer

12 Replies

Pin-tailed SnipeOP
As far as I understand, this is hard coded in various places in NextJS and there is no official supported way of changing it, am I right?

There are some workaround like custom NginX server to rewrite the URLs externaly (working as a reverse proxy). But this might cause some issues and its big overhead...
Asian black bear
I see no value in doing so at all - how come you want that?
Pin-tailed SnipeOP
I am working in a product company where we are making app migration to NextJS. The thing is, the project is pretty big, having a Launchpad with 20+ different apps and we want to migrate all of them from our custom frontend to React and we chose NextJS for that matter.

in next.config we are using basePath in order to "sync" the resource fetching from the right app (that was being navigated from the launchpad - like domain/launchpad/appHomepage for example).

We are forced to use some internal services. The whole launchpad is an internal service and is working with internal service for app routing. The pain point is that only on dynamic routes, the basePath configuration is suddenly missing and it looks like its trying to fetch the resources from the launchpad page, which results in 404. For all other pages (its appHomepage, and directly created by us pages) this basePath is there and all resources are being fetched correctly.

This is not reproducable with pages router (its working out of the box on top of our app router). Also, the approuter of NextJS is also working with no issues if we are not going through our internal services, which was expected that its not NextJS issue (which I honestly dont have control over).

After asking for support from our internal app routing service, they simply say that they dont know nextjs so... we are on our own.

There is some issue, some config rewriting or something like that, between our internal services and NextJS app router.

That is why I want to change "_next" folder to the name of the NextJS deployed app for example, so that I can hook into this name while internally trying to serve the right resources to the right application.

So I guess you see my pain point and why I need a workaround for this issue. I dont want to be forced from our infrastructure to go back to the pages router and miss a ton of features of app router, its killing a big portion of the migration and the future proofing so to say.
@Pin-tailed Snipe I am working in a product company where we are making app migration to NextJS. The thing is, the project is pretty big, having a Launchpad with 20+ different apps and we want to migrate all of them from our custom frontend to React and we chose NextJS for that matter. in next.config we are using basePath in order to "sync" the resource fetching from the right app (that was being navigated from the launchpad - like domain/launchpad/appHomepage for example). We are forced to use some internal services. The whole launchpad is an internal service and is working with internal service for app routing. The pain point is that only on dynamic routes, the basePath configuration is suddenly missing and it looks like its trying to fetch the resources from the launchpad page, which results in 404. For all other pages (its appHomepage, and directly created by us pages) this basePath is there and all resources are being fetched correctly. This is not reproducable with pages router (its working out of the box on top of our app router). Also, the approuter of NextJS is also working with no issues if we are not going through our internal services, which was expected that its not NextJS issue (which I honestly dont have control over). After asking for support from our internal app routing service, they simply say that they dont know nextjs so... we are on our own. There is some issue, some config rewriting or something like that, between our internal services and NextJS app router. That is why I want to change "_next" folder to the name of the NextJS deployed app for example, so that I can hook into this name while internally trying to serve the right resources to the right application. So I guess you see my pain point and why I need a workaround for this issue. I dont want to be forced from our infrastructure to go back to the pages router and miss a ton of features of app router, its killing a big portion of the migration and the future proofing so to say.
i get ur issue
i faced something similar aswell
rewriting with nginx was my solution....
if u have a next app runing on localhost:3010 and a frontend on domain.com
i for example hosted something on domain.com/next (example)
set the basePath to /next and proxied all request to /next to localhost:3010 in nginx
Answer
and _next will also be served under /next -> /next/_next
using that u can serve your assets from any domain u want
but have to take that extra step to make sure the assets are correctly and up to date on that server/ edge instance
Pin-tailed SnipeOP
Thanks for the detailed answer @gin!

You gave me some good ideas, I will use them as a foundation for my workaround.

I hope that in the near future this might come as a configuration in next.config, but in the meantime, I suppose this is really the only viable option.

I will mark this question as answered.

Thanks a lot once again!