nextTranslate in next.config.js cause hard refresh of links on custom server

[ShadowBelmolve]

Hi,

I'm currently experiencing a bug with links hard refreshing on custom server, after some search I found that removing nextTranslate from next.config.js resolves it.

I'have create an example here https://github.com/ShadowBelmolve/next-translate-bug-example

Run with yarn dev, access http://localhost:3000/foo/a and click on link "B", it will hard refresh to /foo/b. Change next.config.js and try again, it will transition normaly.

The example is using next 11 but the bug happens in version 10 too.

[royletron]

Hey @ShadowBelmolve. We experienced the same issue and found this issue:

https://github.com/vinissimus/next-translate/issues/421

I hadn't quite realised that next-translate requires certain parts of the source - not just the compiled .next build, and this causes some hidden failure that results in hard loads for links. The files we found that we needed to add to our build containers were:

• A next.config.js - we actually made a custom one for production that just has next-translate in.
• The pages dir - eeek.
• The locales
• Your i18n.json

Hope this helps

[Ionut-Milas]

I can confirm that the @royletron solution works. I did this:

COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/locales ./locales
COPY --from=builder /app/i18n.json ./i18n.json
COPY --from=builder /app/next.config.js ./next.config.js
COPY --from=builder /app/package.json ./package.json
RUN ln -s /app/.next/server/pages ./pages

[billalouaali]

hi @ShadowBelmolve,

i have the same issue here, have you found a solution to your problem ?

[ShadowBelmolve]

Hi @billalouaali,

I'm not working on the project anymore but I could not make it work, the solution that @royletron proposed and @Ionut-Milas confirmed seems to be for production, yet the bug occurs for me on development.

[royletron]

Hi @billalouaali,

I'm not working on the project anymore but I could not make it work, the solution that @royletron proposed and @Ionut-Milas confirmed seems to be for production, yet the bug occurs for me on development.

Are you running your Dev environment in a docker container?

[ShadowBelmolve]

No, direct on my machine. I'm only using nvm for node versioning.

[billalouaali]

yeah that's exactly my problem on local, i don't even use docker for the moment, i used another famous i18n next library that have exactly the same behavior, as soon as i define a next.config.js using the library configuration, all routes using the same base url are refreshing with Link, router.push and so on...

[zergu]

We have similar problem on dev environment / local machine. Using newest next.js and next-translate 1.0.7 we had no problems. When we tried to use rewirtes to have translated routes, pages started continously hard refresh. Sometimes after random code change refreshing stops but not for long. On newest next-translate we see same behaviour.

[kaan-atakan]

I had a similar issue. Where it worked fine in prod but every link would reload in dev. It turned out to be a conflict with our mocking library: Mirage.js. It was intercepting the requests for the language files and returning a 404, which I guess created an error that forced the page to reload. I was able to resolve it by setting the whole /_next path to passthrough in the mirage configuration.

[JOrtmanns]

I had the same issue and fixed it for me. I was using a custom express server and instead of using the NextServer.getRequestHandler() i rendered all incoming requests: this.next.render(req, res, "${req.path}", req.query); What fixed it for me is this: this.next.getRequestHandler()(req, res); Still figuring out if i need the NextUrlWithParsedQuery param as the last argument in the RequestHandler

[DonovanCharpin]

I have the same issue on localhost when I build my next app in production. On every link it calls the server (SSR) and refresh the page. If I remove nextTranslate from the next.config.js`, the hard refresh does not happen (it does not translate though but that's normal).

So it seems that the refresh is done because of the nextTranslate middleware. I have another middleware (bundle analyzer) and it does not create any issue.

I don't see why the SSR is called when clicking on a link, it is like if the getInitialProps is not seen as it should, the behavior I get is typically the getServerSideProps here.