Low-Code-Tools wie WordPress vereinfachen den Blog-Erstellungsprozess. Sie können ein vorgefertigtes Design verwenden und innerhalb weniger Stunden mit dem Schreiben von Blog-Beiträgen beginnen. Wenn Sie mehr Kontrolle über Ihren Code haben möchten und etwas Zeit zur Verfügung haben, ist es besser, Ihr Blog von Grund auf neu zu erstellen. Sie können sogar ein Framework wie Next.js verwenden, um den Prozess zu vereinfachen.

Erfahren Sie, wie Sie einen einfachen Next.js-Blog erstellen, der Markdown-Posts rendert.

Erstellen eines Next.js-Projekts

Next.js ist ein React-Framework, das die Erstellung von Anwendungen vereinfacht. Es bietet viele sofort einsatzbereite Tools und Konfigurationen, sodass Sie sofort nach der Installation mit dem Schreiben von Code beginnen können.

Der einfachste Weg, mit Next.js zu beginnen, besteht darin, den Befehl create-next-app in einem Terminal auszuführen:

npx erstellen-nächste-App-Markdown-Blog

Dieser Befehl erstellt ein Next.js-Projekt, das alle zum Starten erforderlichen Dateien enthält.

instagram viewer

Das Wichtigste zuerst: Aufräumen index.js Datei so aussehen:

importieren Kopf aus 'weiter/Kopf'
importieren Stile aus '../styles/Home.module.css'
ExportStandardFunktionHeim() {
zurückkehren (
<div className={styles.container}>
<Kopf>
<Titel>Nächste App erstellen</title>
<metaname="Beschreibung" Inhalt="Generiert von Create Next App" />
<link rel="Symbol" href="/favicon.ico" />
</Head>
</div>
 )
}

Erstellen Sie Markdown-Blogbeiträge

Der Blog wird gerendert Markdown-Dateien lokal im Projektordner gespeichert. Erstellen Sie also einen neuen Ordner im Stammverzeichnis namens Inhalt um die Dateien zu speichern. Erstellen Sie in diesem Ordner eine neue Datei mit dem Namen create-active-link-nextjs.md und folgendes hinzufügen:


Titel: Wie erstellen ein aktiver VerknüpfungIn Nextjs
Beschreibung: Anpassen aktiver Links mit useRouter()
Ist veröffentlicht: WAHR
Erscheinungsdatum: 22.07.2022
Stichworte:
 - nächste

## Hauptinhalt

Der Name der Markdown-Datei wird Teil der Post-URL sein, also stellen Sie sicher, dass es sich um einen guten Namen handelt. Beachten Sie auch den Inhalt zwischen den Bindestrichen. Dies sind die Metadaten des Beitrags und werden als Front Matter bezeichnet.

Parsing von Markdown-Dateien

Für jeden Blogbeitrag müssen Sie den Markdown-Inhalt und die Titelei analysieren. Verwenden Sie für Markdown React-Markdown und für die Front Matter-Daten Gray-Matter.

React-Markdown ist eine React-Komponente, die auf Bemerkungen aufbaut und Markdown sicher in HTML umwandelt. Die Gray-Matter-Bibliothek parst Front Matter und wandelt YAML in ein Objekt um.

Führen Sie den folgenden Befehl im Terminal aus, um React-Markdown und Gray-Matter zu installieren.

npm Installieren Reagieren-Markdown graue Materie

Erstellen Sie in einem neuen Ordner namens utils eine neue Datei namens md.js. Sie erstellen Hilfsfunktionen, die den Inhalt von Blogposts in dieser Datei zurückgeben.

Erhalten Sie alle veröffentlichten Beiträge

Fügen Sie in md.js den folgenden Code hinzu, um alle Beiträge im Inhaltsordner zurückzugeben.

importieren fs aus "FS";
importieren Weg aus "Weg";
importieren Gegenstand aus "graue Substanz";
Exportkonst getPath = (Ordner: Zeichenfolge) => {
zurückkehren path.join (process.cwd(), `/${Ordner}`); // Vollständigen Pfad abrufen 
}


Exportkonst getFileContent = (Dateiname: Zeichenfolge, Ordner:string) => {
konst POSTS_PATH = getPath (Ordner)
 return fs.readFileSync (path.join (POSTS_PATH, Dateiname), "utf8");
};


Exportkonst getAllPosts = (Ordner: Zeichenfolge) => {
konst POSTS_PATH = getPath (Ordner)
zurückkehren fs
 .readdirSync (POSTS_PFAD) // Dateien im Verzeichnis abrufen
 .filter((Pfad) => /\\.md?$/.test (Pfad)) // nur .md-Dateien
 .map((Dateiname) => { // über jede Datei abbilden
konst source = getFileContent (Dateiname, Ordner); // Dateiinhalt abrufen
konst slug = Dateiname.Ersetzen (/\\.md?$/, ""); // Holen Sie sich den Slug aus dem Dateinamen
konst { Daten } = Materie (Quelle); // Titelseite extrahieren
zurückkehren {
 Titelseite: Daten,
 Schnecke: Schnecke,
 };
 });
};

In der Funktion getAllPosts():

  • Rufen Sie den vollständigen Pfad zum Inhaltsordner mit dem Pfadmodul ab.
  • Rufen Sie die Dateien im Inhaltsordner mit der Methode fs.readdirSync() ab.
  • Filtern Sie die Dateien so, dass sie nur Dateien mit der Erweiterung .md enthalten.
  • Rufen Sie den Inhalt jeder Datei ab, einschließlich der Titelei, indem Sie die map-Methode verwenden.
  • Gibt ein Array zurück, das die Titelei und den Slug (den Dateinamen ohne die Erweiterung .md) jeder Datei enthält.

Um nur die veröffentlichten Posts zu erhalten, können Sie alle Posts filtern und nur diejenigen zurückgeben, deren isPublished-Schlüssel in der Titelei auf „true“ gesetzt ist.

Exportkonst getAllPublished = (Ordner: Zeichenfolge) => {
konst posts = getAllPosts (Ordner)
konst veröffentlicht = posts.filter((post) => {
zurückkehren post.frontmatter.isPublished WAHR
 })
zurückkehren veröffentlicht
 }

Fügen Sie in md.js die Funktion getSinglePost() hinzu, um den Inhalt eines einzelnen Beitrags abzurufen.

Exportkonst getSinglePost = (slug: string, Ordner:string) => {
konst source = getFileContent(`${Schnecke}.md`, Ordner);
konst { Daten: Titel, Inhalt } = Inhalt (Quelle);
zurückkehren {
 Titelseite,
 Inhalt,
 };
};

Diese Funktion ruft die Funktion getFileContent() auf, um den Inhalt jeder Datei abzurufen. Dann ruft die Funktion unter Verwendung des Gray-Matter-Pakets die Front Matter und den Markdown-Inhalt ab.

Alle Blogbeiträge anzeigen

Next.js bietet verschiedene Rendering-Optionen, eine davon ist die statische Generierung. Statische Generierung ist eine Art Vorrendering, bei dem Next.js alle HTML-Seiten während der Erstellungszeit generiert. Sie verwenden es, um schnelle statische Seiten zu erstellen.

Besuche die offizielle Nextjs-Dokumentation für weitere Informationen zum Rendern.

Next.js rendert eine Seite zur Build-Zeit vorab unter Verwendung der Requisiten, die von der getStaticProps-Funktion zurückgegeben werden. In diesem Fall handelt es sich bei den Requisiten um eine Reihe veröffentlichter Posts.

Exportkonst getStaticProps = asynchron () => {
 const posts = getAllPublished("Beiträge");
zurückkehren {
 Requisiten: { Beiträge },
 };
};

Ändern Sie die Datei index.js, um eine Liste mit Blogbeiträgen anzuzeigen.

importieren Kopf aus "nächster/Kopf";
importieren Verknüpfung aus "weiter/Link";
importieren { getAllPublished } aus "../utils/md";
FunktionHeim({ Beiträge }) {
zurückkehren (
<div className={styles.container}>
<Kopf>
<Titel>Nächste App erstellen</title>
<metaname="Beschreibung" Inhalt="Generiert von Create Next App" />
<link rel="Symbol" href="/favicon.ico" />
</Head>
<div>
 {Beiträge.map((Beitrag) => (
<Artikelschlüssel={post.slug}>
<P>[ {post.frontmatter.tags.join(", ")} ]</P>
`Beiträge/${post.slug}`}>
<A>{post.frontmatter.title}</A>
</Link>{""}
<P>{post.frontmatter.description}</P>
</article>
 ))}
</div>
</div>
 );
}


Exportkonst getStaticProps = asynchron () => {
 const posts = getAllPublished("Inhalt");


zurückkehren {
 Requisiten: { Beiträge },
 };
};
ExportStandard Heim;

Die Home-Komponente verwendet die von getStaticProps zurückgegebenen Posts. Es iteriert sie mithilfe der Kartenfunktion und zeigt für jeden Beitrag einen Titel, einen Link zum vollständigen Beitrag und eine Beschreibung an.

Zeigen Sie einen Blogbeitrag an

Wie bereits erwähnt, werden die Dateinamen der Beiträge als URL-Pfade verwendet. Diese Pfade sind ebenfalls dynamisch, sodass Sie sie während der Erstellungszeit generieren müssen. Next.js ermöglicht Ihnen dies mit der Funktion getStaticPaths().

In diesem Code werden die Pfade beispielsweise aus den Namen der Markdown-Dateien generiert.

Exportkonst getStaticPaths = asynchron () => {
 konstante Pfade = getAllPublished("Beiträge").map(({Schnecke}) => ({ Parameter: { Slug } }));
zurückkehren {
 Wege,
 zurückgreifen: FALSCH,
 };
};

Beachten Sie, dass Sie die Beitragsdaten verwenden, die von der zuvor erstellten Hilfsfunktion getAllPublished() zurückgegeben werden.

Sie setzen Fallback auch auf false, was a zurückgibt 404 Fehler für Pfade, die es nicht gibt.

getStaticPaths() wird normalerweise mit getStaticProps() verwendet, das den Inhalt jedes Beitrags basierend auf den Parametern abruft.

Exportkonst getStaticProps = asynchron ({ Parameter }) => {
konst Beitrag = erwarten getSinglePost (params.slug, "Beiträge");
zurückkehren {
 Requisiten: {... post },
 };
};

Um den Markdown in HTML zu rendern, verwenden Sie React-Markdown.

importieren ReagierenMarkdown aus 'Reagieren-Markdown'
importieren { getAllPosts, getSinglePost } aus "../../utils/md";
konst Beitrag = ({ Inhalt, Titelseite }) => {
zurückkehren (
<div>
<P>{frontmatter.tags.join(', ')}</P>
<h2>{frontmatter.title}</h2>
<Spanne>{frontmatter.publishedDate}</span>
<ReagierenMarkdown>{Inhalt}</ReactMarkdown>
</div>
 );
};

Diese Komponente rendert den Inhalt jedes Blogbeitrags und die entsprechende URL.

Wenn Sie einen Entwickler-Blog erstellen, können Sie das tun Syntaxhervorhebung hinzufügen Fähigkeit für jede Komponente.

Gestaltung des Next.js Markdown-Blogs

Bisher haben Sie einen Next.js-Markdown-Blog erstellt, der eine Liste von Blogbeiträgen anzeigt und den Inhalt dieses Beitrags darstellt. Um den Blog schöner aussehen zu lassen, sollten Sie CSS-Stile hinzufügen.

Next.js hat eine gute CSS-Unterstützung, und Sie können CSS-in-JS-Bibliotheken wie gestylte Komponenten verwenden. Wenn Sie es vorziehen, CSS von JS zu trennen, können Sie CSS-Module verwenden.