Next-translate: Error 404 after page reload in browser

[haw0k]

I developing static landing page with dynamic routes.
After adding i18n by next-translate I always got 404 error when try to page reload in browser if URL if different from '/' and language different from defaultLanguage.

My git repository is https://github.com/haw0k/gloria-logistic/tree/38d0d29ed42c2d9f72ba156d84f1ca499c09400f

Page preview https://gloria-logistic.haw0k.now.sh

[aralroca]

The problem I guess is in your next.config.js. Try to remove the exportPathMap:

module.exports = {
  exportTrailingSlash: true,
-  exportPathMap: function() {
-    return {
-      '/': { page: '/' },
-      '/business': { page: '/business' }
-    };
-  }
};

Or if you need aexportPathMap you should add all the lang paths. However, it should work by just removing it.

[haw0k]

exportPathMap removed with same result - always got 404 error after page reload

[haw0k]

After changing exportPathMap at next.config.js 404 error gone but after page reload I always got pages with defaultLanguage translation:

exportPathMap: function() {
    return {
      '/': { page: '/' },
      '/en': { page: '/' },
      '/es': { page: '/' },
      '/ru': { page: '/' },
      '/business': { page: '/business' },
      '/en/business': { page: '/business' },
      '/es/business': { page: '/business' },
      '/ru/business': { page: '/business' }
    };
  }

[haw0k]

After changing exportPathMap at next.config.js 404 error gone but after page reload I always got pages with defaultLanguage translation:
exportPathMap: function() { return { '/': { page: '/' }, '/en': { page: '/' }, '/es': { page: '/' }, '/ru': { page: '/' }, '/business': { page: '/business' }, '/en/business': { page: '/business' }, '/es/business': { page: '/business' }, '/ru/business': { page: '/business' } }; }

[aralroca]

Removing exportPathMap should be enough. Ensure that you are calling next-translate CLI before next build.

I tried your project under the localhost (doing npx serve out after yarn build && yarn export) and looks correct:

Another thing that I see is that you forgot to add the pages into the .gitignore.

[haw0k]

yarn build && yarn export && npx serve out works great - thank you for your help!
But error 404 after page reload at yarn dev mode still present.

[haw0k]

And warning in browser console at yarn dev mode:

Warning: Prop href did not match. Server: "/en" Client: "/en/"

[aralroca]

The exportTrailingSlash Next.js property only works in the moment that you export the page.

docs: https://nextjs.org/docs/api-reference/next.config.js/exportPathMap#adding-a-trailing-slash

So in dev the routes are: http://localhost:3000/es/business or http://localhost:3000/es, and not http://localhost:3000/es/business/ or http://localhost:3000/es/.

So your links, should be:

-<Link href="/business/">
+<Link href="/business">
   <a className={cs(isMobile ? "mobile-menu__link" : "main-menu__link")}>
      {t("common:menuBusiness")}
    </a>
</Link>

[haw0k]

I turned off exportTrailingSlash in next.config.js and now everything works without warning