Implementierung von getStaticProps

Pre-rendering in Next.js

Next.js bietet zwei Formen des Pre-renderings: Statische Generierung (Static Generation) und Serverseitiges Rendering (Server-side Rendering). Der Unterschied liegt darin, wann das HTML für eine Seite generiert wird.

• Statische Generierung (Static Generation) ist die Pre-rendering-Methode, die HTML zur Build-Zeit generiert. Das vorgerenderte HTML wird dann bei jedem Request wiederverwendet.
• Serverseitiges Rendering (Server-side Rendering) ist die Pre-rendering-Methode, die HTML bei jedem Request neu generiert.

Wichtig ist, dass Next.js Ihnen die Wahl lässt, welche Pre-rendering-Methode für jede Seite verwendet werden soll. Sie können eine "hybride" Next.js-App erstellen, indem Sie Statische Generierung für die meisten Seiten und Serverseitiges Rendering für andere verwenden.

Verwendung der statischen Generierung (getStaticProps())

Nun müssen wir einen Import für getSortedPostsData hinzufügen und diese Funktion innerhalb von getStaticProps in pages/index.js aufrufen.

Öffnen Sie pages/index.js in Ihrem Editor und fügen Sie folgenden Code oberhalb der exportierten Home-Komponente ein:

import { getSortedPostsData } from '../lib/posts';
 
export async function getStaticProps() {
  const allPostsData = getSortedPostsData();
  return {
    props: {
      allPostsData,
    },
  };
}

Indem wir allPostsData innerhalb des props-Objekts in getStaticProps zurückgeben, werden die Blogbeiträge als Prop an die Home-Komponente übergeben. Nun können Sie auf die Blogbeiträge wie folgt zugreifen:

export default function Home ({ allPostsData }) { ... }

Um die Blogbeiträge anzuzeigen, aktualisieren wir die Home-Komponente, indem wir einen weiteren <section>-Tag mit den Daten unterhalb des Abschnitts mit Ihrer Selbstvorstellung hinzufügen. Vergessen Sie nicht, auch die Props von () zu ({ allPostsData }) zu ändern:

export default function Home({ allPostsData }) {
  return (
    <Layout home>
      {/* Behalten Sie den bestehenden Code hier bei */}
 
      {/* Fügen Sie diesen <section>-Tag unterhalb des bestehenden <section>-Tags hinzu */}
      <section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
        <h2 className={utilStyles.headingLg}>Blog</h2>
        <ul className={utilStyles.list}>
          {allPostsData.map(({ id, date, title }) => (
            <li className={utilStyles.listItem} key={id}>
              {title}
              <br />
              {id}
              <br />
              {date}
            </li>
          ))}
        </ul>
      </section>
    </Layout>
  );
}

Sie sollten nun die Blogdaten sehen, wenn Sie http://localhost:3000 aufrufen.

Glückwunsch! Wir haben erfolgreich externe Daten (aus dem Dateisystem) abgerufen und die Indexseite mit diesen Daten vorgerendert.

Auf der nächsten Seite besprechen wir einige Tipps zur Verwendung von getStaticProps.