Implementierung von getStaticProps

Wir müssen die notwendigen Daten abrufen, um den Beitrag mit der gegebenen id zu rendern.

Öffnen Sie dazu erneut lib/posts.js und fügen Sie die folgende getPostData-Funktion am Ende hinzu. Sie gibt die Beitragsdaten basierend auf der id zurück:

export function getPostData(id) {
  const fullPath = path.join(postsDirectory, `${id}.md`);
  const fileContents = fs.readFileSync(fullPath, 'utf8');
 
  // Verwendung von gray-matter zum Parsen des Metadaten-Abschnitts des Beitrags
  const matterResult = matter(fileContents);
 
  // Kombination der Daten mit der id
  return {
    id,
    ...matterResult.data,
  };
}

Öffnen Sie dann pages/posts/[id].js und ersetzen Sie diese Zeile:

import { getAllPostIds } from '../../lib/posts';

durch folgenden Code:

import { getAllPostIds, getPostData } from '../../lib/posts';
 
export async function getStaticProps({ params }) {
  const postData = getPostData(params.id);
  return {
    props: {
      postData,
    },
  };
}

Die Beitragsseite verwendet nun die getPostData-Funktion in getStaticProps, um die Beitragsdaten abzurufen und als Props zurückzugeben.

Aktualisieren wir nun die Post-Komponente, um postData zu verwenden. Ersetzen Sie in pages/posts/[id].js die exportierte Post-Komponente durch folgenden Code:

export default function Post({ postData }) {
  return (
    <Layout>
      {postData.title}
      <br />
      {postData.id}
      <br />
      {postData.date}
    </Layout>
  );
}

Das war's! Versuchen Sie, diese Seiten aufzurufen:

• http://localhost:3000/posts/ssg-ssr
• http://localhost:3000/posts/pre-rendering

Sie sollten die Blog-Daten für jede Seite sehen können:

Großartig! Wir haben erfolgreich dynamische Routen generiert.

Etwas falsch?

Wenn Sie auf einen Fehler stoßen, stellen Sie sicher, dass Ihre Dateien den korrekten Code enthalten:

• pages/posts/[id].js sollte so aussehen.
• lib/posts.js sollte so aussehen.
• (Falls es immer noch nicht funktioniert) Der restliche Code sollte so aussehen.

Wenn Sie immer noch nicht weiterkommen, können Sie sich gerne an die Community auf GitHub Discussions wenden. Es wäre hilfreich, wenn Sie Ihren Code auf GitHub pushen und verlinken könnten, damit andere einen Blick darauf werfen können.

Zusammenfassung

Hier noch einmal die grafische Zusammenfassung dessen, was wir gemacht haben:

Wir haben den Markdown-Inhalt des Blogs noch nicht angezeigt. Das machen wir als Nächstes.