Inhaltsverzeichnis  Einführung  Einrichten des Projekts  Die Ordnerstruktur verstehen  Auflistung aller Blog-Beiträge  Präsentieren eines einzelnen Blog-Beitrags  Nutzung der Lade-Benutzeroberfläche und des Streamings in Next.js  Abschluss  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   verwende, können Sie auch   oder   verwenden: yarn npm pnpm   yarn dev  Besuchen Sie nun   , wo Sie die Standardvorlagenseite von Next.js finden. http://localhost:3000  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   richten wir eine Dummy-API für Blogbeiträge ein. Hier gibt   an, dass wir unsere Daten alle 60 Sekunden erneut validieren möchten. /app/api/posts/route.js next: { revalidate: 60 }   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:    : 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. Zeitbasierte Neuvalidierung    : 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). Neuvalidierung bei Bedarf   Zeitbasierte Revalidierung  Um Daten in einem bestimmten Zeitintervall erneut zu validieren, können Sie die Option   von   verwenden, um die Cache-Lebensdauer einer Ressource (in Sekunden) festzulegen. next.revalidate fetch  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,   , die Beiträge von unserem Server abruft und anzeigt. Obwohl ich es minimal gestylt habe, können Sie es gerne aufpeppen! PostsPage   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   Komponente von Next.js hinzu: Link   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   verwendet den clientseitigen Datenabruf. SinglePost  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   nachgelesen werden. Next.js-Dokumentation zu React Essentials   Client-Komponenten  Mit Client-Komponenten können Sie Ihrer Anwendung clientseitige Interaktivität hinzufügen. In Next.js werden sie auf dem Server   und auf dem Client hydriert. Sie können sich Client-Komponenten so vorstellen, wie Komponenten im   schon immer funktioniert haben. vorgerendert Pages Router   '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    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   . Tipp: 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   verwendet DummyJson  Zum Erstellen des Artikels habe ich   verwendet StackEdit  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:   community  dev.to @leandro_nnz    -Community  hackernoon.com @leandronnz  Twitter  @digpollution  Prost!

Read My Stories

Portfolio

Hire Me

Buy Me a Coffee

Next.Js 13 Parallel Routes: A Comprehensive Guide

Mastering JavaScript Shorthands

PostgreSQL or MySQL: What Should I Choose for My Full-Stack Project?

Dieses Audio ist in der Originalsprache der Geschichte produziert!

Zu lang; Lesen

Make resilience your competitive advantage

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

About Author

KOMMENTARE

Hängeetiketten

DIESER ARTIKEL WURDE VORGESTELLT IN

Related Stories

HackerNoon Decoded 2024: Celebrating Our Management Community!

Genuine Content Creation in the Age of AI: Why Startups Need Quality Content

HackerNoon's DeFi Writing Contest with SORA Network: XSTUSD Use Cases

HackerNoon Decoded 2024: Celebrating Our Writing Community!

HackerNoon Decoded 2024: Celebrating Our Management Community!

Genuine Content Creation in the Age of AI: Why Startups Need Quality Content

HackerNoon's DeFi Writing Contest with SORA Network: XSTUSD Use Cases

HackerNoon Decoded 2024: Celebrating Our Writing Community!

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps