Mengambil Siaran Blog dalam Next.js Menggunakan API DEV.to-tutorial js-php.cn

Mengambil Siaran Blog dalam Next.js Menggunakan API DEV.to

王林

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

asal

741 orang telah melayarinya

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

Jika anda ingin mempamerkan siaran blog DEV.to anda di tapak web Next.js anda, anda bertuah! DEV.to menyediakan API yang mudah digunakan yang membolehkan anda mengambil catatan blog anda secara pemrograman. Dalam panduan ini, saya akan menunjukkan kepada anda cara untuk menyepadukan API DEV.to ke dalam aplikasi Next.js anda dan memaparkan kandungan blog anda secara dinamik.

Jom selami!

1. Menyediakan Projek Next.js

Pertama sekali, jika anda belum berbuat demikian, sediakan projek Next.js baharu dengan menjalankan:

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

Salin selepas log masuk

Sekarang kami mempunyai apl Next.js kami sedia, mari teruskan untuk mengambil siaran blog kami.

2. Mengambil Catatan Blog daripada DEV.to API

API DEV.to menyediakan akses kepada artikel anda yang diterbitkan melalui permintaan HTTP yang mudah. Anda boleh mengambil artikel mengikut pengguna dengan menekan titik akhir:

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

Salin selepas log masuk

Untuk mengambil catatan blog dalam apl Next.js anda, kami akan menggunakan pustaka SWR. SWR ialah perpustakaan pengambilan data popular yang direka untuk memudahkan pengambilan, cache dan kemas kini data dalam aplikasi React/Next.js anda.

Pasang SWR:

npm install swr

Salin selepas log masuk

Sekarang, mari buat fungsi utiliti untuk mengendalikan permintaan 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();
}

Salin selepas log masuk

3. Membuat Laman Blog

Sekarang kita mempunyai utiliti fetcher, mari buat halaman blog yang akan memaparkan siaran DEV.to anda.

Dalam halaman/blog/index.tsx, ambil dan paparkan catatan blog menggunakan 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;

Salin selepas log masuk

4. Menambah Halaman Blog Dinamik

Next.js menyediakan laluan dinamik yang membolehkan anda menjana halaman individu untuk setiap catatan blog. Mari buat laluan dinamik untuk memaparkan setiap siaran.

Buat fail bernama 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;

Salin selepas log masuk

Halaman ini mengambil siaran individu menggunakan slug daripada URL dan menjadikannya dengan kandungan HTML dengan selamat menggunakan dangerouslySetInnerHTML.

5. Sentuhan Akhir

Anda kini boleh memulakan apl Next.js anda dengan menjalankan:

npm run dev

Salin selepas log masuk

Lawati laluan /blog, dan anda akan melihat siaran blog DEV.to anda dipaparkan. Mengklik pada mana-mana siaran akan membawa anda ke halaman catatan blog individu.

Kesimpulan Dalam tutorial ini, kami mempelajari cara untuk mengambil dan memaparkan catatan blog daripada API DEV.to dalam apl Next.js. Ini ialah cara yang berkesan untuk menyepadukan kandungan DEV.kepada laman web peribadi anda sambil memanfaatkan faedah penjanaan tapak statik dan pemaparan sebelah pelanggan.

Jangan teragak-agak untuk menyesuaikan persediaan ini lagi, menambah penomboran atau memperbaik penggayaan agar sepadan dengan reka bentuk tapak anda!

Beri tahu saya dalam ulasan jika anda mempunyai sebarang soalan atau cadangan.

Atas ialah kandungan terperinci Mengambil Siaran Blog dalam Next.js Menggunakan API DEV.to. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!