NextJS app on different base path

[apotdevin]

So I am trying to deploy a nextjs app with a graphql api endpoint (Docker image) behind nginx with a different base path and running into different issues.

First as some context, the basePath im testing is zone and this is the nginx config:

location /zone/ {
		rewrite ^/zone(.*)$ $1 break;
		proxy_pass http://next_app:3000/;

Have added the base path to different parts in the app. For example:

• for all the links

<Link href={`${basePath}${to}`}>

• for graphql:

const link = new HttpLink({
  uri: `${basePath}/api/v1`,
  credentials: 'same-origin',
  fetch,
});

• for graphql frontend:

const handler = apolloServer.createHandler({ path: `${basePath}/api/v1`});

• for next.config.js

assetPrefix: basePath

Also I have fonts and images inside the /public folder.

When I deploy the application, routes are working but still have multiple issues.

• all assets in the /public folder don't get the assetPrefix attached so they are not found
• link prefetching isn't working, all requests fail and the request url seems to have the prefix in 2 locations. Here an example with zone at the beggining and end: http://test.domain.com/zone/_next/static/gIl8N0aYX2uecNphmmgCU/pages/zone/user.js
• api routes are not being found even though they have the correct assetPrefix. Here an example url: ``http://test.domain.com/zone/api/v1` gives 404 error

Any idea or suggestion to get this working would be awesome and will also update if I have any progress

[timneutkens]

We've landed experimental support for basePath here: #9872 it should help a bit with <Link> etc. Only thing we can't do is add it before a reference to a file in /public ofcourse as that is outside of Next.js compilation. For those cases you can use const {basePath} = useRouter() to append it yourself.

Do note this is experimental so not as stable as features on the main release line.

[apotdevin]

Thanks! It helped solve some problems. So following your answer:

• for assets in /public folder I just attached manually the basePath and got them working.
• Decided to disable link prefetching for now (while feature is experimental).
• API routes was a config error. The basePath had to be appended on the frontend but not the backend (since nginx is already handling removing it from the request url)

Also realized that I was doing the router push wrong so:

• appended basePath to any push(urlWithBasePath)

App works, every page loads and info can be retrieved from the api but I now have a new problem. Any page change causes a complete re-render. So styles are refetched, queries as well, everything is download again. Basically all SPA behavior is lost.

Could this be because of the link prefetching disabled?

[timneutkens]

Are you on the latest version of next?

[apotdevin]

Yes, 9.3.4

[timneutkens]

Make sure you're on 9.3.5: https://github.com/zeit/next.js/releases/tag/v9.3.5

[apotdevin]

Done but still same issue. Could it maybe be a nginx config more than nextjs?

[apotdevin]

So have tried different nginx configs, but the app keeps rerendering an every page url change. Feel like it is coming from NextJS. Is there any header that has to be passed to avoid this rerendering? Or how is it determined when to rerender?

[timneutkens]

It generally means the JS bundle could not be loaded, if you open devtools, go to the network tab and click preserve log, after that click on a link that causes a full page transition. If it results in a 404 a full page transition happens

[apotdevin]

Yes, it does result in a 404 error and looking at the request url I see the basePath included in two places. Here an example:

https://test.domain.com/ZONE/_next/static/k9DBUeMqYI7E5aV7S00Am/pages/ZONE/users.js

Is this meant to be? Will never find the bundle there since that path doesnt exist in the app

[timneutkens]

That seems to be a bug in the basePath behavior, it indeed should load this url instead:

https://test.domain.com/ZONE/_next/static/k9DBUeMqYI7E5aV7S00Am/pages/users.js

Could you verify that url is correctly served?

[apotdevin]

Just tested and yes, that url is correctly served

[apotdevin]

Trying to use nginx rewrites to remove the basePath from the urls:

location /ZONE/ {
		rewrite ^/ZONE(/_next/.*)/ZONE/(.*)$ $1/$2 break;
		rewrite ^/ZONE(.*)$ $1 break;
		proxy_pass http://localhost:3000/;
	}

And its now loading the JS bundle but unable to route to any other page. So now clicking any button fetches the js bundle but nothing else happens

[apotdevin]

Found the reason. Was on my side. I was manually adding the basePath to the Link url and forgot to remove it after the update to 9.3.5 (which adds it).

Still when going from on route localhost:3000/ZONE/users to another one (for example dogs it removes the basePath from the url in the browser and ends at localhost:3000/dogs.

Had to add the as parameter to the Link component such as as={`${basePath}${url}`} but unsure if it's intended to have this behaviour where it removes the basePath when going to another route.

[ijjk]

Hi, it sounds there may be a change in your project that isn't needed when using basePath. Next.js should be automatically adding/removing the basePath consistently now even if manually added to the href. See below screenshots for it working with and without manually specifying the basePath on the href

With basePath in href

Without basePath in href

If the above behavior isn't working for you please provide a reproduction so we can investigate further

[apotdevin]

Hi, yeah it wasn't removing the basePath when fetching the next page or prefetching links. This is the repo: https://github.com/apotdevin/thunderhub

This line https://github.com/apotdevin/thunderhub/blob/f29ba3d2ae0337de8311cd835f973c1aef08ab40/src/components/link/Link.tsx#L81 before was ${basePath}${to} and was causing this error. When I removed it all routing and prefetching was working perfectly