Dynamic Routes and translations with getStaticPaths

[vemec]

Hi!👋

First of all, thank you very much for developing this excellent project.

I have a dynamic page that expects a "story" parameter. I would like to be able to get all the page translations (similar to when I use useTranslation ('xxxx') SSG) instead of passing each translation as a prop like I show in the example below

Is it possible to do this?

File [story].js

// Core
import getT from 'next-translate/getT'

// Layout
import PublicLayout from '@/layout/public'

const Story = ({ story, section }) => {
  const current = { canonical: `/chat-stories/${story}` }
  return (
    <PublicLayout current={current}>
      <p>{story}</p>
      <p>{section}</p>
    </PublicLayout>
  )
}

export async function getStaticPaths({ locales }) {
  const paths = []
  const stories = ['a', 'b', 'c']

  locales.forEach((locale) => {
    stories.forEach((story) => {
      paths.push({ params: { story }, locale })
    });
  });

  return { paths, fallback: true }
}

export async function getStaticProps({ params, locale }) {
  const t = await getT(locale, `${params.story}`)
  return {
    props: {
      story: params.story,
      section: t('section'),
    },
  }
}

export default Story

Something like this, but this example doesn't work

// Core
import useTranslation from 'next-translate/useTranslation'

// Layout
import PublicLayout from '@/layout/public'

const Story = ({ story }) => {
  const { t } = useTranslation(`${story}`)
  const current = { canonical: `/chat-stories/${story}` }

  return (
    <PublicLayout current={current}>
      <p>{t('section')}</p>
    </PublicLayout>
  )
}

export async function getStaticPaths({ locales }) {
  const paths = []
  const stories = ['a', 'b', 'c']

  locales.forEach((locale) => {
    stories.forEach((story) => {
      paths.push({ params: { story }, locale })
    });
  });

  return { paths, fallback: true }
}

export async function getStaticProps({ params }) {
  return { props: { story: params.story } }
}

export default Story

Sorry for my basic English :)

[aralroca]

@vemec did you tried the returnObjects?

https://github.com/vinissimus/next-translate#7-nested-translations

Example:

dictionary:

{
  "dynamic-translations": {
    "example": "Example {{count}}",
    "another-example": "Another example {{count}}" 
  }
}

t function to return all nested:

t('namespace:dynamic-translations', { count: 1 }, { returnObjects: true })
/*
// RESULT:
{
    "example": "Example 1",
    "another-example": "Another example 1" 
}
*/

Other way (recommended)

Is defining in the i18n.json the page as a function to load different namespaces depending the getStaticPaths params.

"/your-page": ({ params }) => params.story

Otherwise you need to put all the stories namespaces... "/your-page": [...allStories] and it's not recommended because is downloading all these namespaces for that page.

[vemec]

Thank you very much for the reply. try 'returnObjects' and it works as expected. What I don't understand is the example you recommend. Currently my i18n.json file contains

module.exports = {
  locales: ['en', 'es', 'pt'],
  defaultLocale: 'en',
  pages: {
    '*': ['common'],
    '/': ['home'],
    '/chat-stories': ['chat-stories'],
    '/chat-stories/a': ['a'],
    '/chat-stories/b': ['b'],
    '/chat-stories/c': ['c'],
  },
}

It's okay like that?

[aralroca]

It's ok yes, but I'm not sure if you can change it to:

module.exports = {
  locales: ['en', 'es', 'pt'],
  defaultLocale: 'en',
  pages: {
    '*': ['common'],
    '/': ['home'],
    '/chat-stories': ['chat-stories'],
    'rgx:^/chat-stories/': params => [params.story],
  },
}

In case you have a lot of stories. I don't remember if this works, I think it does.

[Ogenbd]

For people finding this in the future and dealing with the same issue note that to make this work it should be:

module.exports = {
  locales: ['en', 'es', 'pt'],
  defaultLocale: 'en',
  pages: {
    '*': ['common'],
    '/': ['home'],
    '/chat-stories': ['chat-stories'],
    'rgx:^/chat-stories/': ({params}) => [params.story],
  },
}

[vemec]

Hey @aralroca, I hope you are well. I have one more question regarding this scenario...

How can I have HTML inside the translations that come from the returnObjects using , like this:

Get translations in object form

const feature = t('home:features', {}, { returnObjects: true })

I got this

{
  title: 'the title',
  subTitle: 'the subtitle',
  description: '<0>some text</0> another text and <1>More more</1>',
}

and then when I want to replace the <0></0> with HTML elements

<Trans
  i18nKey={`${feature.description}`}
  components={[<span />, <strong />]}
/>

I get the warning

[next-translate] The text "<0>some text</0> another text and <1>More more</1>" has no namespace in front of it.

but replacing <0></0> by HTML tags works.

Is there any other way?

[aralroca]

@vemec in the Trans component you need to specify the entire path:

<Trans
  i18nKey="home:features.description"
  components={[<span />, <strong />]}
/>

I think this is the only way for now.

[aralroca]

useTranslation hook is independent of Trans component. They are 2 different entities

[vemec]

Sorry, to simplify the example I omitted information regarding the problem I am having.
The result I have when using returnObjects is an array:

[
  {
    title: 'the title',
    subTitle: 'the subtitle',
    description: '<0>some text</0> another text and <1>More more</1>',
  },
  {
    title: 'the title',
    subTitle: 'the subtitle',
    description: '<0>some text</0> another text and <1>More more</1>',
  }
]

{
  features.map((feature) => (
    <>
      <h1>{feature.title}</h1>
      <h2>{feature.subTitle}</h2>
      <Trans
        i18nKey={`${feature.description}`}
        components={[<span />, <strong />]}
      />
    </>
  ))
}

And when I walk through the array is where the problem occurs.

[aralroca]

I'll try it at home later, to see if I can find a good solution. For now I think you could solve it with an I18nProvider.

features.map((feature) => (
    <>
      <h1>{feature.title}</h1>
      <h2>{feature.subTitle}</h2>
      <I18nProvider lang={lang} namespaces={{ feature }}>
        <Trans
          i18nKey="feature:description"
          components={[<span />, <strong />]}
        />
      </I18nProvider>
    </>
  ))