Blog-Beiträge in Next.js mithilfe der DEV.to-API abrufen-js-Tutorial-php.cn

Blog-Beiträge in Next.js mithilfe der DEV.to-API abrufen

王林

Freigeben： 2024-09-07 06:43:13

Original

886 Leute haben es durchsucht

Fetching Blog Posts in Next.js Using the DEV.to API

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!