So erstellen Sie einen Blog mit Next und MDX

Next.js ist ein React-Framework, mit dem Sie schnell statische und dynamische Apps erstellen können. Es ist produktionsbereit und unterstützt standardmäßig serverseitiges Rendering und die Generierung statischer Websites, wodurch Next.js-Apps schnell und SEO-freundlich werden.

In diesem Tutorial werde ich zunächst erklären, was genau Next.js ist und warum Sie es anstelle von Create React App oder Gatsby verwenden würden. Anschließend zeige ich Ihnen, wie Sie mit Next.js und MDX einen Blog erstellen, in dem Sie Beiträge schreiben und rendern können.

Für den Einstieg benötigen Sie etwas Erfahrung mit React. Kenntnisse in Next.js wären praktisch, sind aber nicht zwingend erforderlich. Von diesem Tutorial profitieren diejenigen, die mit Next.js einen (persönlichen oder organisatorischen) Blog erstellen möchten oder noch nach einer geeigneten Verwendung suchen.

Tauchen wir ein.

Was ist Next.js?

Next.js ist ein React-Framework, das von Vercel erstellt und gepflegt wird. Es wurde mit React, Node.js, Babel und Webpack erstellt. Es ist produktionsbereit, weil es mit vielen großartigen Funktionen ausgestattet ist, die normalerweise in einer „Vanilla“ React-App eingerichtet würden.

Das Next.js-Framework kann Apps auf dem Server rendern oder statisch exportieren. Es wartet nicht darauf, dass der Browser das JavaScript lädt, um Inhalte anzuzeigen, was Next.js-Apps SEO-freundlich und blitzschnell macht.

Warum Next.js statt Create React App verwenden?

Create React App ist ein praktisches Tool, das ein modernes Build-Setup ohne Konfiguration und ohne den Aufwand bietet, Webpack, Babel usw. einrichten oder ihre Abhängigkeiten pflegen zu müssen. Dies ist heutzutage die empfohlene Methode, um React-Apps zu erstellen. Es hat eine Vorlage für TypeScript und wird auch mit der React Testing Library geliefert.

Wenn Sie jedoch eine mehrseitige App erstellen möchten, müssen Sie eine zusätzliche Bibliothek installieren, als ob Sie eine React-App auf dem Server rendern würden. Die zusätzliche Einrichtung könnte ein Problem darstellen, und alle installierten Pakete könnten die endgültige Bundle-Größe Ihrer App erhöhen.

Genau dieses Problem soll Next.js lösen. Es bietet die beste Entwicklererfahrung mit all den Dingen, die Sie für die Produktion benötigen. Es kommt mit mehreren coolen Features:

• Statischer Export (Pre-Rendering)
  Mit Next.js können Sie Ihre Next.js-App zur Erstellungszeit in statisches HTML exportieren, das ohne Server ausgeführt wird. Dies ist die empfohlene Methode zum Generieren Ihrer Website, da dies zur Erstellungszeit und nicht bei jeder Anforderung erfolgt.
• Serverseitiges Rendering (Pre-Rendering)
  Bei jeder Anfrage werden Seiten auf dem Server vorab in HTML gerendert.
• Automatisches Code-Splitting
  Im Gegensatz zu React teilt Next.js den Code automatisch auf und lädt nur das benötigte JavaScript, was die App schnell macht.
• Dateisystembasiertes Routing
  pages verwendet das Dateisystem, um das Routing in der App zu ermöglichen, was bedeutet, dass jede Datei im Seitenverzeichnis automatisch als Route behandelt wird.
• Heißes Neuladen von Code
  Next.js verlässt sich auf React Fast Refresh, um Ihren Code im laufenden Betrieb neu zu laden, was eine großartige Entwicklererfahrung bietet.
• Styling-Optionen
  Das Next.js-Framework bietet integrierte Unterstützung für Styled JSX, CSS-Module, Sass, LESS und mehr.

Next.js im Vergleich zu Gatsby

Gatsby ist ein statischer Site-Generator, der auf React und GraphQL aufbaut. Es ist beliebt und hat ein riesiges Ökosystem, das Themen, Plugins, Rezepte und so weiter bereitstellt.

Gatsby- und Next.js-Websites sind superschnell, da sie beide entweder auf dem Server oder statisch gerendert werden, was bedeutet, dass der JavaScript-Code nicht darauf wartet, dass der Browser geladen wird. Vergleichen wir sie anhand der Entwicklererfahrung.

Gatsby ist einfach zu starten, besonders wenn Sie React bereits kennen. Gatsby verwendet jedoch GraphQL, um lokale Daten und Seiten abzufragen. Die Verwendung von Gatsby zum Erstellen dieses einfachen Blogs könnte übertrieben sein, da GraphQL eine Lernkurve hat und die Abfrage- und Erstellungszeit statischer Seiten etwas länger wäre. Wenn Sie denselben Blog zweimal erstellt haben, zuerst mit Gatsby und dann mit Next.js, wäre der mit Next.js erstellte zur Erstellungszeit viel schneller, da er normales JavaScript verwendet, um lokale Daten und Seiten abzufragen.

Ich hoffe, Sie nutzen die Leistungsfähigkeit des Next.js-Frameworks und sehen, warum es so viel praktischer ist als einige Alternativen. Es ist auch eine gute Wahl, wenn Ihre Website stark auf SEO angewiesen ist, da Ihre App von Google-Robotern schnell und einfach gecrawlt werden kann. Aus diesem Grund verwenden wir in diesem Artikel Next.js, um einen Blog mit der MDX-Bibliothek zu erstellen.

Beginnen wir mit der Einrichtung einer neuen Next.js-App.

Einrichten

Es gibt zwei Möglichkeiten, eine Next.js-App zu erstellen. Wir können eine neue App manuell einrichten oder Create Next App verwenden. Wir werden uns für Letzteres entscheiden, da dies der empfohlene Weg ist und alles automatisch für uns eingerichtet wird.

Um eine neue App zu starten, führen Sie Folgendes in der Befehlszeilenschnittstelle (CLI) aus:

 npx create-next-app

Sobald das Projekt initialisiert ist, strukturieren wir die Next.js-App wie folgt:

 src ├── components | ├── BlogPost.js | ├── Header.js | ├── HeadPost.js | ├── Layout.js | └── Post.js ├── pages | ├── blog | | ├── post-1 | | | └── index.mdx | | ├── post-2 | | | └── index.mdx | | └── post-3 | | └── index.mdx | ├── index.js | └── \_app.js ├── getAllPosts.js ├── next.config.js ├── package.json ├── README.md └── yarn.lock

Wie Sie sehen können, hat unser Projekt eine einfache Dateistruktur. Es gibt drei Dinge zu beachten:

• _app.js ermöglicht es uns, einige Inhalte an die App.js Komponente anzuhängen, um sie global zu machen.
• getAllPosts.js hilft uns, die Blogbeiträge aus dem Ordner pages/blog abzurufen. Übrigens können Sie die Datei beliebig benennen.
• next.config.js ist die Konfigurationsdatei für unsere Next.js-App.

Ich werde später auf jede Datei zurückkommen und erklären, was sie tut. Sehen wir uns zunächst das MDX-Paket an.

Installieren der MDX-Bibliothek

MDX ist ein Format, mit dem wir nahtlos JSX schreiben und Komponenten in unsere Markdown-Dateien importieren können. Es ermöglicht uns, reguläres Markdown zu schreiben und auch React-Komponenten in unsere Dateien einzubetten.

Um MDX in der App zu aktivieren, müssen wir die Bibliothek @mdx-js/loader installieren. Navigieren wir dazu zunächst zum Stammverzeichnis des Projekts und führen Sie dann diesen Befehl in der CLI aus:

 yarn add @mdx-js/loader

Oder, wenn Sie npm verwenden:

 npm install @mdx-js/loader

Installieren Sie als Nächstes @next/mdx , eine für Next.js spezifische Bibliothek. Führen Sie diesen Befehl in der CLI aus:

 yarn add @next/mdx

Oder für npm:

 npm install @next/mdx

Toll! Wir sind mit der Einrichtung fertig. Machen wir uns die Hände schmutzig und programmieren etwas Sinnvolles.

Konfigurieren der next.config.js Datei

 const withMDX = require("@next/mdx")({ extension: /\.mdx?$/ }); module.exports = withMDX({ pageExtensions: ["js", "jsx", "md", "mdx"] });

Weiter oben in diesem Tutorial habe ich gesagt, dass Dateien im Seitenordner von Next.js zur Erstellungszeit als pages /Routen behandelt werden. Standardmäßig wählt Next.js nur Dateien mit den Erweiterungen .js oder .jsx . Aus diesem Grund benötigen wir eine Konfigurationsdatei, um dem Standardverhalten von Next.js einige Anpassungen hinzuzufügen.

Die Datei next.config.js teilt dem Framework mit, dass Dateien mit den Erweiterungen .md oder .mdx zur Erstellungszeit ebenfalls als pages /Routen behandelt werden sollten, da sich der blog -Ordner, der die Artikel enthält, im Seitenverzeichnis befindet.

Davon abgesehen können wir im nächsten Teil mit dem Abrufen der Blog-Posts beginnen.

Abrufen von Blogbeiträgen

Einer der Gründe, warum das Erstellen eines Blogs mit Next.js einfach und unkompliziert ist, ist, dass Sie kein GraphQL oder ähnliches benötigen, um lokale Beiträge abzurufen. Sie können einfach normales JavaScript verwenden, um die Daten abzurufen.

In getAllPosts.js :

 function importAll(r) { return r.keys().map((fileName) => ({ link: fileName.substr(1).replace(/\/index\.mdx$/, ""), module: r(fileName) })); } export const posts = importAll( require.context("./pages/blog/", true, /\.mdx$/) );

Diese Datei kann zunächst einschüchternd sein. Es ist eine Funktion, die alle MDX-Dateien aus dem Ordner pages/blog importiert und für jeden Beitrag ein Objekt mit dem Pfad der Datei ohne die Erweiterung ( /post-1 ) und den Daten des Blog-Beitrags zurückgibt.

Damit können wir nun die Komponenten erstellen, um Daten in unserer Next.js-App zu stylen und anzuzeigen.

Aufbau der Komponenten

In components/Layout.js :

 import Head from "next/head"; import Header from "./Header"; export default function Layout({ children, pageTitle, description }) { return ( <> <Head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta charSet="utf-8" /> <meta name="Description" content={description}></meta> <title>{pageTitle}</title> </Head> <main> <Header /> <div className="content">{children}</div> </main> </> ); }

Hier haben wir die Layout Komponente, die wir als Wrapper für den Blog verwenden werden. Es erhält die Metadaten, die im Kopf der Seite angezeigt werden sollen, und die anzuzeigende Komponente.

In components/Post.js :

 import Link from 'next/link' import { HeadPost } from './HeadPost' export const Post = ({ post }) => { const { link, module: { meta }, } = post return ( <article> <HeadPost meta={meta} /> <Link href={'/blog' + link}> <a>Read more →</a> </Link> </article> ) }

Diese Komponente ist für die Anzeige einer Vorschau eines Blogbeitrags verantwortlich. Es empfängt das post -Objekt, das als Requisiten angezeigt werden soll. Als nächstes verwenden wir die Destrukturierung, um den link des Beitrags und das meta aus dem Objekt herauszuziehen. Damit können wir nun die Daten an die Komponenten übergeben und das Routing mit der Link -Komponente abwickeln.

In components/BlogPost.js :

 import { HeadPost } from './HeadPost' export default function BlogPost({ children, meta}) { return ( <> <HeadPost meta={meta} isBlogPost /> <article>{children}</article> </> ) }

Die BlogPost Komponente hilft uns, einen einzelnen Artikel zu rendern. Es erhält den anzuzeigenden Beitrag und sein meta .

Bisher haben wir viel behandelt – aber wir haben keine Artikel zu zeigen. Lassen Sie uns das im nächsten Abschnitt beheben.

Beiträge mit MDX schreiben

 import BlogPost from '../../../components/BlogPost' export const meta = { title: 'Introduction to Next.js', description: 'Getting started with the Next framework', date: 'Aug 04, 2020', readTime: 2 } export default ({ children }) => <BlogPost meta={meta}>{children}</BlogPost>; ## My Headline Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus pellentesque dolor non egestas. In sed tristique elit. Cras vehicula, nisl vel ultricies gravida, augue nibh laoreet arcu, et tincidunt augue dui non elit. Vestibulum semper posuere magna, quis molestie mauris faucibus ut.

Wie Sie sehen können, importieren wir die BlogPost Komponente, die das meta und den Text des Beitrags erhält.

Der Parameter children ist der Body des Blogposts oder genauer gesagt alles, was nach dem meta Objekt kommt. Es ist die Funktion, die für das Rendern des Beitrags verantwortlich ist.

Mit dieser Änderung können wir zur Datei index.js und die Beiträge auf der Startseite anzeigen.

Beiträge anzeigen

 import { Post } from "../components/Post"; import { posts } from "../getAllPosts"; export default function IndexPage() { return ( <> {posts.map((post) => ( <Post key={post.link} post={post} /> ))} </> ); }

Hier beginnen wir mit dem Importieren der Post -Komponente und der aus dem blog -Ordner abgerufenen Posts. Als Nächstes durchlaufen wir das Array von Artikeln und verwenden für jeden Beitrag die Post -Komponente, um ihn anzuzeigen. Nachdem dies erledigt ist, können wir die Beiträge jetzt abrufen und auf der Seite anzeigen.

Wir sind fast fertig. Die Layout Komponente wird jedoch immer noch nicht verwendet. Wir können es hier verwenden und unsere Bauteile damit umhüllen. Aber das wirkt sich nicht auf die Artikelseiten aus. Hier kommt die Datei _app.js ins Spiel. Lassen Sie uns das im nächsten Abschnitt verwenden.

Verwenden der _app.js Datei

Hier ist das Unterstrichsymbol ( _ ) wirklich wichtig. Wenn Sie es weglassen, behandelt Next.js die Datei als Seite/Route.

 import Layout from "../components/Layout"; export default function App({ Component, pageProps }) { return ( <Layout pageTitle="Blog" description="My Personal Blog"> <Component {...pageProps} /> </Layout> ); }

Next.js verwendet die App -Komponente zum Initialisieren von Seiten. Der Zweck dieser Datei besteht darin, sie zu überschreiben und dem Projekt einige globale Stile hinzuzufügen. Wenn Sie Stile oder Daten haben, die im gesamten Projekt geteilt werden müssen, legen Sie sie hier ab.

Wir können jetzt den Projektordner in der CLI durchsuchen und den folgenden Befehl ausführen, um eine Vorschau des Blogs im Browser anzuzeigen:

 yarn dev

Oder in npm:

 npm run dev

Wenn Sie https://localhost:3000 im Browser öffnen, können Sie Folgendes sehen:

Toll! Unser Blog sieht gut aus. Wir haben die Blog-App mit Next.js und MDX erstellt.

Fazit

In diesem Tutorial haben wir Next.js durchlaufen, indem wir mithilfe der MDX-Bibliothek einen Blog erstellt haben. Das Next.js-Framework ist ein praktisches Tool, das React-Apps SEO-freundlich und schnell macht. Damit lassen sich im Handumdrehen statische, dynamische JAMstack-Websites erstellen, da es produktionsreif ist und einige nette Features mitbringt. Next.js wird häufig von großen Unternehmen verwendet und seine Leistung verbessert sich ständig. Es ist definitiv etwas, das Sie für Ihr nächstes Projekt ausprobieren sollten.

Sie können das fertige Projekt auf CodeSandbox in der Vorschau anzeigen.

Danke fürs Lesen!

Ressourcen

Diese nützlichen Ressourcen gehen über den Rahmen dieses Tutorials hinaus.

• Next.js-Dokumentation
• Next.js- und MDX-Dokumentation
• „Erstellen Sie eine Next.js-App“, Next.js