Implementierung von getStaticPaths

Zuerst richten wir die Dateien ein:

• Erstelle eine Datei namens [id].js im Verzeichnis pages/posts.
• Entferne außerdem first-post.js im Verzeichnis pages/posts — wir werden diese nicht mehr verwenden.

Öffne dann pages/posts/[id].js in deinem Editor und füge den folgenden Code ein. Die ... werden wir später ausfüllen:

import Layout from '../../components/layout';
 
export default function Post() {
  return <Layout>...</Layout>;
}

Öffne anschließend lib/posts.js und füge die folgende getAllPostIds-Funktion am Ende hinzu. Sie gibt die Liste der Dateinamen (ohne .md) im posts-Verzeichnis zurück:

export function getAllPostIds() {
  const fileNames = fs.readdirSync(postsDirectory);
 
  // Gibt ein Array zurück, das so aussieht:
  // [
  //   {
  //     params: {
  //       id: 'ssg-ssr'
  //     }
  //   },
  //   {
  //     params: {
  //       id: 'pre-rendering'
  //     }
  //   }
  // ]
  return fileNames.map((fileName) => {
    return {
      params: {
        id: fileName.replace(/\.md$/, ''),
      },
    };
  });
}

Wichtig: Die zurückgegebene Liste ist nicht einfach ein Array von Strings — es muss ein Array von Objekten sein, die wie im obigen Kommentar beschrieben aussehen. Jedes Objekt muss den Schlüssel params enthalten und ein Objekt mit dem Schlüssel id (weil wir [id] im Dateinamen verwenden). Andernfalls schlägt getStaticPaths fehl.

Zum Schluss importieren wir die getAllPostIds-Funktion und verwenden sie innerhalb von getStaticPaths. Öffne pages/posts/[id].js und kopiere den folgenden Code oberhalb der exportierten Post-Komponente:

import { getAllPostIds } from '../../lib/posts';
 
export async function getStaticPaths() {
  const paths = getAllPostIds();
  return {
    paths,
    fallback: false,
  };
}

• paths enthält das Array der bekannten Pfade, die von getAllPostIds() zurückgegeben werden, einschließlich der von pages/posts/[id].js definierten Parameter. Mehr dazu in der paths-Key-Dokumentation
• Ignoriere fallback: false vorerst — wir werden das später erklären.

Wir sind fast fertig — aber wir müssen noch getStaticProps implementieren. Das machen wir auf der nächsten Seite!