Récupération d'articles de blog dans Next.js à l'aide de l'API DEV.to-js tutoriel-php.cn

Récupération d'articles de blog dans Next.js à l'aide de l'API DEV.to

王林

Libérer： 2024-09-07 06:43:13

original

885 Les gens l'ont consulté

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

Si vous souhaitez présenter vos articles de blog DEV.to sur votre site Web Next.js, vous avez de la chance ! DEV.to fournit une API facile à utiliser qui vous permet de récupérer vos articles de blog par programmation. Dans ce guide, je vais vous montrer comment intégrer l'API de DEV.to dans votre application Next.js et afficher dynamiquement le contenu de votre blog.

Plongeons-nous !

1. Configuration du projet Next.js

Tout d'abord, si ce n'est pas déjà fait, configurez un nouveau projet Next.js en exécutant :

npx create-next-app@latest my-dev-blog
cd my-dev-blog

Copier après la connexion

Maintenant que notre application Next.js est prête, passons à la récupération de nos articles de blog.

2. Récupération des articles de blog depuis l'API DEV.to

L'API DEV.to permet d'accéder à vos articles publiés via une simple requête HTTP. Vous pouvez récupérer des articles par utilisateur en appuyant sur le point de terminaison :

https://dev.to/api/articles?username=yourusername

Copier après la connexion

Pour récupérer les articles de blog dans votre application Next.js, nous utiliserons la bibliothèque SWR. SWR est une bibliothèque de récupération de données populaire conçue pour faciliter la récupération, la mise en cache et la mise à jour des données dans vos applications React/Next.js.

Installer SWR :

npm install swr

Copier après la connexion

Maintenant, créons une fonction utilitaire pour gérer la requête API :

// 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();
}

Copier après la connexion

3. Création de la page du blog

Maintenant que nous avons l'utilitaire de récupération, créons une page de blog qui affichera vos publications DEV.to.

Dans pages/blog/index.tsx, récupérez et affichez les articles du blog en utilisant SWR :

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;

Copier après la connexion

4. Ajout de pages de blog dynamiques

Next.js fournit des itinéraires dynamiques qui vous permettent de générer des pages individuelles pour chaque article de blog. Créons un parcours dynamique pour afficher chaque publication.

Créez un fichier appelé 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;

Copier après la connexion

Cette page récupère les publications individuelles à l'aide du slug de l'URL et les restitue avec du contenu HTML en toute sécurité à l'aide de dangereusementSetInnerHTML.

5. Touches finales

Vous pouvez maintenant démarrer votre application Next.js en exécutant :

npm run dev

Copier après la connexion

Visitez la route /blog et vous devriez voir vos articles de blog DEV.to affichés. En cliquant sur n’importe quel article, vous accéderez à la page de l’article de blog individuel.

Conclusion Dans ce didacticiel, nous avons appris comment récupérer et afficher des articles de blog à partir de l'API DEV.to dans une application Next.js. Il s'agit d'un moyen puissant d'intégrer votre contenu DEV.to dans votre site Web personnel tout en tirant parti des avantages de la génération de sites statiques et du rendu côté client.

N'hésitez pas à personnaliser davantage cette configuration, à ajouter une pagination ou à améliorer le style pour qu'il corresponde au design de votre site !

Faites-moi savoir dans les commentaires si vous avez des questions ou des suggestions.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!