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 :
http://localhost:3000/articles/1
And I can switch it to french :
http://localhost:3000/fr/articles/1
My actual code looks at this :
(File: /articles/[id].js)
const Article = ({ article }) => {
const router = useRouter()
return (
<div>
<div className={styles.single__page}>
<h1>{article.title}</h1>
<p>{article.content}</p>
<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>
</Link>
</div>
</div>
)
}
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 :
http://localhost:3000/articles/article-english-slug
http://localhost:3000/fr/articles/article-french-slug
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 !