Locale Sub-routing doesn't work

Hi,

I’ve got this configuration on my next js with next-translate:

Inside next.config.js

const nextTranslate = require('next-translate');

module.exports = nextTranslate({
   webpack: (config, { isServer, webpack }) => {
      return config;
   },
   target: 'serverless'
});

And inside i18n.json

{
   "locales": [
      "en",
      "gr"
   ],
   "defaultLocale": "gr",
   "pages": {
      "*": [
         "common"
      ],
      "/": [
         "home"
      ],
      "/about": [
         "about"
      ]
   }
}

The problem I’m facing is when switching the locale to en all blog posts are broken e.g http://localhost:3000/blog/test <- Works

http://localhost:3000/en/blog/test <- 404 not found

Any ideas what I should do to make the sub-routing work correctly?

Thanks

[aralroca]

@ykyp You need to add the locales to the getStaticPaths:

export async function getStaticPaths({ locales }) {
   const paths = getAllPostIds(locales);
   return {
      paths,
      fallback: false,
   };
}

and your function:

export function getAllPostIds(locales) {
   const fileNames = fs.readdirSync(postsDirectory);

   return fileNames.flatMap((fileName) => {
      const params = {
         id: fileName.replace(/\.md$/, ""),
      }

      return [
         { params },
         ...locales.map(locale => ({ params, locale })),
      ]
   });
}

This is not handled by next-translate and is a Next.js requirement.

[ykyp]

Thanks a lot @aralroca confirming this has now fixed my issue 🙏