Eine Schritt-für-Schritt-Anleitung zum Erstellen eines einfachen Next.js 13-Blogs

Inhaltsverzeichnis

1. Einführung
2. Einrichten des Projekts
3. Die Ordnerstruktur verstehen
4. Auflistung aller Blog-Beiträge
5. Präsentieren eines einzelnen Blog-Beitrags
6. Nutzung der Lade-Benutzeroberfläche und des Streamings in Next.js
7. Abschluss
8. Verweise

1. Einleitung

Hallo!

Im heutigen Tutorial begeben wir uns auf die Reise, um mit Next.js einen einfachen, aber leistungsstarken Blog zu erstellen.

Ganz gleich, ob Sie neu bei Next.js sind oder nur ein paar Grundlagen auffrischen möchten, dieser Leitfaden ist auf Sie zugeschnitten.

Wir befassen uns nicht nur mit der Einrichtung eines Projekts, sondern gehen auch auf Ordnerstrukturen, serverseitiges Rendering und mehr ein.

Das vollständige Repository finden Sie hier

Lasst uns gleich eintauchen!

2. Einrichten des Projekts

Schritt 1: Erstellen Sie die App

Lassen Sie uns zunächst den folgenden Befehl verwenden, um unsere Next.js-App einzurichten:

 npx create-next-app@latest blog-example

Navigieren Sie anschließend zum neu erstellten Projekt:

 cd blog-example

Schritt 2: Starten Sie den Entwicklungsserver

Obwohl ich in dieser Anleitung yarn verwende, können Sie auch npm oder pnpm verwenden:

 yarn dev

Besuchen Sie nun http://localhost:3000 , wo Sie die Standardvorlagenseite von Next.js finden.

3. Die Ordnerstruktur verstehen

An dieser Stelle ist es hilfreich, die Struktur unserer Next.js-App zu verstehen. Eine visuelle Darstellung des Ordnerlayouts finden Sie im folgenden Bild.

4. Auflisten aller Blog-Beiträge

4.1. API-Route

In /app/api/posts/route.js richten wir eine Dummy-API für Blogbeiträge ein. Hier gibt next: { revalidate: 60 } an, dass wir unsere Daten alle 60 Sekunden erneut validieren möchten.

Daten erneut validieren

Bei der erneuten Validierung wird der Datencache geleert und die neuesten Daten erneut abgerufen. Dies ist nützlich, wenn sich Ihre Daten ändern und Sie sicherstellen möchten, dass die neuesten Informationen angezeigt werden.

Zwischengespeicherte Daten können auf zwei Arten erneut validiert werden:

• Zeitbasierte Neuvalidierung : Daten nach Ablauf einer bestimmten Zeit automatisch erneut validieren. Dies ist nützlich für Daten, die sich selten ändern und deren Aktualität nicht so wichtig ist.
• Neuvalidierung bei Bedarf : Manuelle Neuvalidierung von Daten basierend auf einem Ereignis (z. B. Formularübermittlung). Bei der On-Demand-Revalidierung kann ein Tag-basierter oder pfadbasierter Ansatz verwendet werden, um Datengruppen auf einmal erneut zu validieren. Dies ist nützlich, wenn Sie sicherstellen möchten, dass die neuesten Daten so schnell wie möglich angezeigt werden (z. B. wenn Inhalte aus Ihrem Headless-CMS aktualisiert werden).

Zeitbasierte Revalidierung

Um Daten in einem bestimmten Zeitintervall erneut zu validieren, können Sie die Option next.revalidate von fetch verwenden, um die Cache-Lebensdauer einer Ressource (in Sekunden) festzulegen.

Hier ist ein Beispiel:

 import { NextResponse } from 'next/server' export async function GET() { const res = await fetch('https://dummyjson.com/posts', { next: { revalidate: 60 }, }); const data = await res.json(); return NextResponse.json(data); }

4.2. Anzeigen der Beiträge

Erstellen wir eine Komponente, PostsPage , die Beiträge von unserem Server abruft und anzeigt. Obwohl ich es minimal gestylt habe, können Sie es gerne aufpeppen!

 export default async function PostsPage() { const res = await fetch('http://localhost:3000/api/posts'); const { posts } = await res.json(); return ( // Styles are for readability; customize as you wish! <div> <h1>All Blog Posts</h1> <hr style={{ width: '220px' }} /> <div style={{ paddingTop: '40px' }}> {posts.map(post => ( <article key={post.id}> <h2>{post.title}</h2> <p style={{ paddingBottom: '30px'}}>{post.body}</p> </article> ))} </div> </div> ); }

Bisher sollten Sie eine Liste mit Artikeln sehen.

5. Präsentieren eines einzelnen Blog-Beitrags

5.1. Verlinkung des Beitrags

Um jeden Beitragstitel anklickbar zu machen, fügen wir die Link Komponente von Next.js hinzu:

 import Link from 'next/link'; export default async function PostsPage() { // ... rest of the code return ( <div> // ... rest of the code <div style={{ paddingTop: '40px' }}> {posts.map(post => ( <article key={post.id}> <Link href={`posts/${post.id}`}> <h2>{post.title}</h2> </Link> <p style={{ paddingBottom: '30px'}}>{post.body}</p> </article> ))} </div> </div> ); }

5.2. API-Route für einen einzelnen Beitrag

In der Next.js-API-Route rufen wir bestimmte Beiträge basierend auf ihrer ID ab:

 import { NextResponse } from 'next/server' export async function GET(request, { params }) { const { id } = params; const res = await fetch(`https://dummyjson.com/posts/${id}`, { next: {revalidate: 60} }); const post = await res.json(); return NextResponse.json({ post }); }

5.3. Einen einzelnen Beitrag anzeigen

Für die Anzeige einzelner Beiträge ist es wichtig, den Unterschied zwischen Server- und Client-Komponenten in Next.js zu verstehen.

Die angegebene Komponente SinglePost verwendet den clientseitigen Datenabruf.

Im Wesentlichen bedeutet dies, dass die Daten auf dem Client abgerufen werden, nachdem die Seite gerendert wurde. Es ermöglicht eine umfassende Interaktivität ohne Einbußen bei der Leistung. Mehr dazu kann in der Next.js-Dokumentation zu React Essentials nachgelesen werden.

Client-Komponenten

Mit Client-Komponenten können Sie Ihrer Anwendung clientseitige Interaktivität hinzufügen. In Next.js werden sie auf dem Server vorgerendert und auf dem Client hydriert. Sie können sich Client-Komponenten so vorstellen, wie Komponenten im Pages Router schon immer funktioniert haben.

 'use client' import Link from 'next/link'; import { useEffect, useState } from 'react'; export default function SinglePost({params}) { const [post, setPost] = useState(null); const fetchPost = async (id) => { const res = await fetch(`http://localhost:3000/api/posts/${id}`); const {post} = await res.json(); post && setPost(post); } useEffect(() => { fetchPost(params.id); }, []) return ( <div style={{ paddingTop: '20px', paddingLeft: '20px' }}> <Link href='/'>Back to home</Link> <div style={{ paddingTop: '50px' }}> <article> <h1 style={{ paddingBottom: '10px' }}>{post?.title}</h1> {post?.tags.map((tag, index) => <span style={{ fontWeight: 'lighter' }} key={index}>{tag} | </span>)} <br/> <p style={{ paddingTop: '10px' }}>{post?.body}</p> </article> </div> </div> ) }

Jetzt sollten Sie die Artikeldetails sehen können. Bitte entschuldigen Sie das fehlende Styling!

6. Nutzung der Lade-Benutzeroberfläche und des Streamings in Next.js

Tipp: Für ein verbessertes Benutzererlebnis sollten Sie das Hinzufügen einer Ladekomponente in Betracht ziehen. Next.js bietet eine integrierte Lösung mit der Lade-Benutzeroberfläche und dem Streaming. Es hilft dabei, einen Lade-Spinner anzuzeigen, bis Ihr Inhalt fertig ist. Tauchen Sie tiefer ein mit diesem offiziellen Leitfaden zum Laden der Benutzeroberfläche und zum Streaming .

Zum Beispiel:

 // You can add any UI inside Loading, including a Skeleton. export default function Loading() { return <LoadingSkeleton />}

7. Fazit

Das Erstellen einer Next.js-Anwendung kann sowohl Spaß machen als auch aufschlussreich sein.

Wir haben gelernt, ein Projekt einzurichten, unsere Ordnerstruktur zu verwalten, Blog-Beiträge aufzulisten, einzelne Beiträge zu präsentieren und sogar den Ladestatus zu berühren.

Angesichts des rasanten Wachstums von Next.js in der Webentwicklungs-Community sind die hier erlernten Fähigkeiten von unschätzbarem Wert.

Erweitern Sie diese Grundlage, entdecken Sie weitere Funktionen und viel Spaß beim Programmieren!

8. Referenzen

Offizielle Next.js-Dokumentation

Für die Daten des Artikels habe ich DummyJson verwendet

Zum Erstellen des Artikels habe ich StackEdit verwendet

Vielen Dank für Ihre Zeit und Ihr Engagement für das Lernen. Ihr Feedback ist immens wertvoll. Wenn Sie Ergänzungen oder Korrekturen zu diesem Beitrag haben, wenden Sie sich bitte an uns.

Vernetzen Sie sich mit mir unter: dev.to community @leandro_nnz

hackernoon.com -Community @leandronnz

Twitter @digpollution

Prost!