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!
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
Da wir nun unsere Next.js-App fertig haben, können wir mit dem Abrufen unserer Blogbeiträge fortfahren.
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
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
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();
}
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;
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;
Diese Seite ruft einzelne Beiträge mithilfe des Slugs von der URL ab und rendert sie sicher mit HTML-Inhalten unter Verwendung von hazardlySetInnerHTML.
Sie können jetzt Ihre Next.js-App starten, indem Sie Folgendes ausführen:
npm run dev
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.
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!
