Wie generiert man dynamische Pfade für nicht standardmäßige Gebietsschemata in Next.js?

Lesezeit: 2 Minuten

Benutzer-Avatar
Bill Hack

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']))
    }
  }
}

Benutzer-Avatar
Juliomalben

Für dynamische Routen müssen Sie explizit die Gebietsschemata zurückgeben, aus denen Sie vorab generiert werden sollen getStaticPaths Funktion. Wenn Sie dies nicht tun, generiert Next.js nur Seiten für das Standardgebietsschema.

Aus Internationalisiertes Routing Dokumentation:

Für Seiten mit getStaticProps Bei dynamischen Routen müssen alle Gebietsschemavarianten der Seite, die vorgerendert werden soll, zurückgegeben werden getStaticPaths. Zusammen mit params Objekt zurückgegeben für
pathsSie können auch a zurückgeben locale Feld, das angibt, welches Gebietsschema Sie rendern möchten.

Dies kann erreicht werden, indem Sie Ihre ändern getStaticPaths Funktion, um einen Pfad für jede Slug/Locale-Kombination zu generieren.

export async function getStaticPaths({ locales }) { // Get available locales from `context`
   const response = await axios.get('https://api.myappi.com/blog')
   const posts = response.data

   const paths = posts
       .map((post: Props) => locales.map((locale) => ({
           params: { id: post.Id, title: post.Title },
           locale // Pass locale here
       })))
       .flat() // Flatten array to avoid nested arrays
 
   return { paths, fallback: false }
}

  • Das hat es getan. Danke dafür. Ich schwöre, ich habe in den Dokumenten nach einer Lösung gesucht. Offensichtlich musste ich genauer hinschauen! Danke noch einmal. Außerdem muss ich auf flat() lernen. Das ist mir neu.

    – Bill Hack

    8. Januar um 1:28

1018290cookie-checkWie generiert man dynamische Pfade für nicht standardmäßige Gebietsschemata in Next.js?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy