Wenn Sie Ihre DEV.to-Blogbeiträge auf Ihrer Next.js-Website präsentieren möchten, haben Sie Glück! DEV.to bietet eine benutzerfreundliche API, mit der Sie Ihre Blogbeiträge programmgesteuert abrufen können. In dieser Anleitung zeige ich Ihnen, wie Sie die API von DEV.to in Ihre Next.js-Anwendung integrieren und Ihre Blog-Inhalte dynamisch anzeigen.
Lass uns eintauchen!
1. Einrichten des Next.js-Projekts
Wenn Sie es noch nicht getan haben, richten Sie zunächst ein neues Next.js-Projekt ein, indem Sie Folgendes ausführen:
npx create-next-app@latest my-dev-blog
cd my-dev-blog
Nach dem Login kopieren
Da wir nun unsere Next.js-App fertig haben, können wir mit dem Abrufen unserer Blogbeiträge fortfahren.
2. Blog-Beiträge von der DEV.to-API abrufen
Die DEV.to-API ermöglicht den Zugriff auf Ihre veröffentlichten Artikel über eine einfache HTTP-Anfrage. Sie können Artikel nach Benutzer abrufen, indem Sie auf den Endpunkt klicken:
https://dev.to/api/articles?username=yourusername
Nach dem Login kopieren
Um die Blogbeiträge in Ihrer Next.js-App abzurufen, verwenden wir die SWR-Bibliothek. SWR ist eine beliebte Datenabrufbibliothek, die das Abrufen, Zwischenspeichern und Aktualisieren von Daten in Ihren React/Next.js-Anwendungen vereinfacht.
SWR installieren:
npm install swr
Nach dem Login kopieren
Jetzt erstellen wir eine Hilfsfunktion zur Verarbeitung der API-Anfrage:
// src/lib/fetcher.ts
export default async function fetcher(url: string) {
const response = await fetch(url);
if (!response.ok) {
throw new Error("Failed to fetch data");
}
return response.json();
}
Nach dem Login kopieren
3. Erstellen der Blog-Seite
Da wir nun das Fetcher-Dienstprogramm haben, erstellen wir eine Blog-Seite, auf der Ihre DEV.to-Beiträge angezeigt werden.
Rufen Sie in „pages/blog/index.tsx“ die Blog-Beiträge mit SWR ab und zeigen Sie sie an:
import { Container, Row, Col, Card, Button, Badge } from 'react-bootstrap';
import Head from 'next/head';
import useSWR from 'swr';
import fetcher from '../../lib/fetcher';
import Link from 'next/link';
import { formatDistanceToNow, parseISO } from 'date-fns';
interface BlogPost {
id: number;
title: string;
description: string;
slug: string;
cover_image: string;
tag_list: string[];
reading_time_minutes: number;
published_timestamp: string;
positive_reactions_count: number;
}
const Blog = () => {
const { data, error } = useSWR<BlogPost[]>('https://dev.to/api/articles?username=yourusername', fetcher);
if (error) return <div>Failed to load posts</div>;
if (!data) return <div>Loading...</div>;
return (
<>
<Head>
<title>Blog | Your Name</title>
</Head>
<Container>
<Row>
<Col>
<h1>Blog</h1>
<Row className="g-4">
{data.map((post: BlogPost) => (
<Col md={4} key={post.id}>
<Card className="blog-card" data-aos="fade-up">
<Card.Body>
<Card.Title>{post.title.length > 50 ? `${post.title.substring(0, 50)}...` : post.title}</Card.Title>
<Card.Text>{post.description}</Card.Text>
<div className="mb-2">
{post.tag_list.map((tag: string) => (
<Badge pill bg="secondary" className="me-1" key={tag}>
{tag}
</Badge>
))}
</div>
<div className="text-muted">
<small><i className="fa-solid fa-clock"></i> {post.reading_time_minutes} min read</small><br/>
<small><i className="fa-solid fa-calendar-day"></i> {formatDistanceToNow(parseISO(post.published_timestamp), { addSuffix: true })}</small><br/>
<small><i className="fa-solid fa-thumbs-up"></i> {post.positive_reactions_count} Likes</small>
</div>
<Link href={`/blog/${post.slug}`} passHref>
<Button variant="outline-primary" className="mt-3">Read More</Button>
</Link>
</Card.Body>
</Card>
</Col>
))}
</Row>
</Col>
</Row>
</Container>
</>
);
};
export default Blog;
Nach dem Login kopieren
4. Hinzufügen dynamischer Blog-Seiten
Next.js bietet dynamische Routen, mit denen Sie für jeden Blog-Beitrag individuelle Seiten generieren können. Lassen Sie uns eine dynamische Route erstellen, um jeden Beitrag anzuzeigen.
Erstellen Sie eine Datei mit dem Namen „pages/blog/[slug].tsx:
“.
import { useRouter } from 'next/router';
import useSWR from 'swr';
import { Container, Row, Col, Card, Button } from 'react-bootstrap';
import Head from 'next/head';
import Image from "next/image";
import fetcher from '../../lib/fetcher';
const BlogPost = () => {
const router = useRouter();
const { slug } = router.query;
const { data, error } = useSWR(slug ? `https://dev.to/api/articles/yourusername/${slug}` : null, fetcher);
if (error) return <div>Failed to load the post</div>;
if (!data) return <div>Loading...</div>;
return (
<>
<Head>
<title>{data.title} | Your Name</title>
</Head>
<Container>
<Row>
<Col>
<div className="section-title">
<h1>{data.title}</h1>
<p>{data.readable_publish_date}</p>
</div>
<section>
{data.cover_image && (
<Image
src={data.cover_image}
alt={data.title}
className="img-fluid mb-3"
width={1000}
height={420}
layout="responsive"
/>
)}
<div dangerouslySetInnerHTML={{ __html: data.body_html }} />
</section>
<Button variant="outline-dark" href="/blog">
Back to Blog
</Button>
</Col>
</Row>
</Container>
</>
);
};
export default BlogPost;
Nach dem Login kopieren
Diese Seite ruft einzelne Beiträge mithilfe des Slugs von der URL ab und rendert sie sicher mit HTML-Inhalten unter Verwendung von hazardlySetInnerHTML.
5. Letzte Handgriffe
Sie können jetzt Ihre Next.js-App starten, indem Sie Folgendes ausführen:
npm run dev
Nach dem Login kopieren
Besuchen Sie die /blog-Route und Sie sollten sehen, dass Ihre DEV.to-Blogbeiträge angezeigt werden. Wenn Sie auf einen Beitrag klicken, gelangen Sie zur Seite des einzelnen Blogbeitrags.
- Fazit
In diesem Tutorial haben wir gelernt, wie man Blogbeiträge von der DEV.to-API in einer Next.js-App abruft und anzeigt. Dies ist eine leistungsstarke Möglichkeit, Ihre DEV.to-Inhalte in Ihre persönliche Website zu integrieren und gleichzeitig die Vorteile der statischen Website-Generierung und des clientseitigen Renderings zu nutzen.
Sie können dieses Setup jederzeit weiter anpassen, Paginierung hinzufügen oder das Design verbessern, um es an das Design Ihrer Website anzupassen!
Lassen Sie es mich in den Kommentaren wissen, wenn Sie Fragen oder Vorschläge haben.
Das obige ist der detaillierte Inhalt vonBlog-Beiträge in Next.js mithilfe der DEV.to-API abrufen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
