Ich baue eine Next.js-App mit Internationalisierung mit next-i18next. Seiten werden für alle Seiten meiner Website sowohl für Englisch als auch für Französisch generiert, mit Ausnahme von Seiten mit dynamischen Routen: (d. h. blog/[id]/[blog-title]
). Für Seiten mit dynamischen Routen werden Seiten für Englisch generiert, aber nicht für Französisch.
Ich sollte beachten, dass die Blogeinträge in beiden Sprachen gleich sind. Wenn der Benutzer also auf einen Blogeintrag in der Liste klickt, erhält er denselben Blogeintrag.
Wenn ein französischsprachiger Benutzer auf eine Seite mit einer dynamischen Route geht, erhält er einen 404. Ich bin neu bei React and Next, also könnte ich hier etwas Dummes machen.
// next-i18next.config.js
module.exports = {
i18n: {
locales: ['en', 'fr'],
defaultLocale: 'en',
localeDetection: true,
},
}
//
// blog\[id]\How to generate dynamic paths for non-default locales in Next.js?
//
export async function getStaticPaths() {
const response = await axios.get('https://api.myappi.com/blog')
const posts = response.data
const paths = posts.map((post: Props) => ({
params: { id: post.Id, title: post.Title },
}))
return { paths, fallback: false }
}
export async function getStaticProps(props: IStaticProps) {
const { id, locale } = props.params
const response = await axios.get(`https://api.myappi.com/blog/${id}`)
const post = await response.data
if (!post) {
return {
notFound: true,
}
}
return {
props: {
Id: post.Id,
Title: post.Title,
Blog: post.Blog,
DatePosted: post.DatePosted,
PostedBy: post.PostedBy,
...(await serverSideTranslations(props.locale, ['common', 'blog']))
}
}
}