Internationalizations with Next.js (blog - slug)

Hi everyone,

I discovered Strapi a week ago, so I’m sorry if this question is not as clear as I want.
I’m creating a very simple multilanguages blog to discover Strapi (and play with it) using Next.js.

Everything’s alright with the parameters and content types : I can easily translate all the content I want. I reproduced all tutorials I found on Strapi Resources. Then I found this tutorial to correctly get all datas when switching locale (fr / en-US) and everything’s working. So I can go to the URL to read my article in english :
And I can switch it to french :

My actual code looks at this :
(File: /articles/[id].js)

const Article = ({ article }) => {
  const router = useRouter()

  return (
      <div className={styles.single__page}>
        <Link href={router.asPath} locale={router.locale === 'en-US' ? 'fr' : 'en-US'}>
          <a>{router.locale === 'en-US' ? 'Lire en français' : 'Read in english'}</a>
export const getServerSideProps = async (context) => {
  const { id } = context.params
  const { locale } = context

  let translation = undefined

  const initialRes = await fetch(`http://localhost:1337/articles/${id}`)
  const initial = await initialRes.json()

  if (locale === 'fr') {
    const translationRes = await fetch(`http://localhost:1337/articles/${initial.localizations[0].id}`)
    translation = await translationRes.json()

  return {
    props: {
      article: translation ? translation : initial

For a better reading (and better sharing), I’d like to create routes with slugs like this :
But I have no idea how to get datas without the id. I tried to replace all id’s calls with slugs but it does not working.

Does anyone have a solution to my problem ?
I hope to find some help here ! Thanks !

Hello !

Did you find a solution to your problem ?