Next-translate: 0.20.0 is not running =(. Had to go back to 0.19.5.

[JoseGarciaM]

{
"name": "maneki-neko",
"version": "1.0.0",
"description": "Maneki Neko Design System",
"author": "Jose Carlos Garcia Mendizabal",
"license": "MIT",
"scripts": {
"dev": "next-translate && next dev",
"build": "next-translate && next build",
"start": "next start"
},
"dependencies": {
"@headlessui/react": "^0.2.0",
"@sanity/block-content-to-react": "^2.0.7",
"@sanity/client": "^2.0.9",
"@sanity/image-url": "^0.140.19",
"autoprefixer": "^10.0.2",
"body-scroll-lock": "^3.1.5",
"classnames": "^2.2.6",
"firebase": "^8.1.1",
"lottie-web": "^5.7.4",
"next": "^10.0.2",
"next-compose-plugins": "^2.2.1",
"next-google-fonts": "^1.2.1",
"next-pwa": "^3.1.5",
"next-sanity": "^0.1.8",
"next-translate": "^0.20.0",
"node-sass": "^5.0.0",
"postcss": "^8.1.9",
"prettier": "^2.2.0",
"react": "^17.0.1",
"react-cool-dimensions": "^1.1.10",
"react-dom": "^17.0.1",
"react-smooth-scroll-hook": "^1.3.4",
"rfs": "^9.0.3",
"sass": "^1.29.0",
"styled-jsx-plugin-sass": "^1.0.0",
"swr": "^0.3.9",
"use-click-away": "^12.0.1"
},
"devDependencies": {
"cssnano": "^4.1.10",
"eslint": "^7.14.0",
"eslint-config-google": "^0.14.0",
"eslint-plugin-jsdoc": "^30.7.8",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.21.5",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-import": "^13.0.0",
"postcss-preset-env": "^6.7.0",
"precss": "^4.0.0",
"tailwindcss": "^2.0.1"
},
"prettier": {
"singleQuote": true
}
}

[aralroca]

@JoseGarciaM What exactly do you get? I just tried it and it works. I got a 0.20.1 by cleaning the build a little bit because I put files that were wrong, I hope the 0.20.1 works for you.

[dasblitz]

Hi @aralroca I was just updating to nextjs 10 and updating next-translate as well. For me it isn't working either. I'm running into following:

Error: Cannot find module '/Users/aroca/i18n-next-static/node_modules/@babel/runtime/helpers/interopRequireDefault'

Seems like somewhere in the lib a require() is referencing your local machine?

I figured it might be related, so posting it here :)

Edit:

using these versions by the way:

"next": "^10.0.2",
"next-translate": "^0.20.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",

[aralroca]

@dasblitz thanks! you feedback was so useful! And this explains why it works well for me! 😅

I did npm publish without reinstalling dependencies, bringing me the dependencies of another branch. With version 0.20.2 it should be solved. Sorry about the issue! I think I will add the reinstallation of dependencies to the publish flow so that it does not happen again.

[aralroca]

I close the issue since I have checked that it is now working well with 0.20.2 on a machine other than mine 😅. Anything else do not hesitate to report it 🙏.

By the way @dasblitz, if you are migrating Next to version 10, surely you had a version prior to 0.19 of next-translate, right? If so, look at release 0.19 first because it has some breaking changes.

[JoseGarciaM]

Im having the same problem as @dasblitz =(. Gonna update to the latest version you said.

[JoseGarciaM]

It works!

[dasblitz]

Hi @aralroca. Tnx for pointing me to the change logs, works great now! Impressed with how fast you're rolling out new changes/fixes. I noticed that getStaticPaths() now receives an object with { locales, defaultLocale } instead of it being called for every locale with {locale}. Might be handy to put that in the release notes as well.

I preferred your implementation because I want to create separate projects on Vercel for each language to get parallel builds for each. In my project changing languages will always redirect to the homepage anyway and that way I can use a translated main-menu in _app.js and get proper page transitions. Now I probably have to write something so I can use an env var to set the default language in each project on Vercel somehow. Ah well.

Anyway tnx again for the quick fixes!

[aralroca]

Hi @aralroca. Tnx for pointing me to the change logs, works great now! Impressed with how fast you're rolling out new changes/fixes. I noticed that getStaticPaths() now receives an object with { locales, defaultLocale } instead of it being called for every locale with {locale}. Might be handy to put that in the release notes as well.

@dasblitz This change is on 0.19.0 release notes on point 4 of the migration guide! Hope it helps!

I preferred your implementation because I want to create separate projects on Vercel for each language to get parallel builds for each. In my project changing languages will always redirect to the homepage anyway and that way I can use a translated main-menu in _app.js and get proper page transitions. Now I probably have to write something so I can use an env var to set the default language in each project on Vercel somehow. Ah well.

I recommend that you take a look at https://nextjs.org/docs/advanced-features/i18n-routing

You can define the language depending on the domain:

i18n.js

const config = {
  locales: ["en", "ca", "es"],
  defaultLocale: "en",
  pages: {
    "*": ["common"],
    "/404": ["error"],
    "/": ["home"],
    "/dashboard": ["home"],
    "rgx:^/more-examples": ["more-examples"]
  },
  domains: [
      {
        domain: 'example.com',
        defaultLocale: 'en-US',
      },
      {
        domain: 'example.fr',
        defaultLocale: 'fr',
      },
      {
        domain: 'example.nl',
        defaultLocale: 'nl-NL',
        // specify other locales that should be redirected
        // to this domain
        locales: ['nl-BE'],
      }
   ]
}

All the routing part from version 0.19 is adapted to Next.js 10 . Then in the i18n.js configuration file you can use both the configuration that we specified in this library and the own features about internationalization of Next.js 10. Perhaps it would be good to clarify this in our documentation. I'll add it!

Also, if you change the language you can save the user's language preference in a cookie named NEXT_LOCALE.

[dasblitz]

@dasblitz This change is on 0.19.0 release notes on point 4 of the migration guide! Hope it helps!

@aralroca I can't find anything there about getStaticPaths. This function isn't working correctly for me anymore when using yarn build as it no longer receives the locale property. My function looked like this:

export const getStaticPaths: GetStaticPaths = async ({ locale }) => {
  let productSlugs = [];
  const products = await getProducts(locale);

  if (Array.isArray(products)) {
    productSlugs = products.map((product) => ({
      params: {
        slug: `${product.slug}`,
        id: String(product.id),
      },
    }));
  }

  return {
    paths: [...productSlugs],
    fallback: false,
  };
};

I don't understand what I need to change here

[aralroca]

@dasblitz are you receiving locales _(in plural)_ in getStaticPaths? You should provide all the slugs for each language.

[dasblitz]

@aralroca

So my page resides in pages_/[locale]/[id]/[slug].tsx and I've changed the getStaticPaths function to this:

export const getStaticPaths = async ({ locales }) => {
  const promises = locales.map(async (locale) => {
    const products = await getProducts(locale);
    if (products.length) {
      return products.map((product) => ({
        params: {
          locale,
          id: String(product.id),
          slug: `${product.slug}`,
        },
      }));
    }
    return [];
  });

  const paths = await Promise.all(promises);

  return {
    paths: [...paths.flat()],
    fallback: false,
  };
};

But the result of running next-translate && next build is that it outputs all the languages to the default locale e.g:

.next/server/pages/nl-nl/page-1
.next/server/pages/nl-nl/nl-nl/page-1
.next/server/pages/nl-nl/nl-be/page-1
.next/server/pages/nl-nl/de-de/page-1

Should I exclude this page from the next-translate somehow?

sorry for polluting this issue btw

[aralroca]

You don't need to create the [locales] folder. Your page pages_/[locale]/[id]/[slug].tsx should be pages_/[id]/[slug].tsx

[dasblitz]

If I try that I only get the pages in .next/server/pages/nl-nl/ but not in any of the other locales. I also wonder how does next-translate differentiate which paths returned from getStaticPaths() belong to which locale? That might help me understand what I'm doing wrong.

EDIT:

The error was that I included locale inside the params object 🤦

params: {
  locale,
  id: String(product.id),
  slug: `${product.slug}`,
},

it should be:

params: {
  id: String(product.id),
  slug: `${product.slug}`,
},
locale,

@aralroca All is working great now 👍 Sorry for all the inconvenience