Mengambil Siaran Blog dalam Next.js Menggunakan API DEV.to
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
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
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
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();
}
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;
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;
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
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!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Stock Market GPT
Penyelidikan pelaburan dikuasakan AI untuk keputusan yang lebih bijak
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
JavaScript menyedari kesan penukaran imej klik: tutorial profesional
Sep 18, 2025 pm 01:03 PM
Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mencapai kesan mengklik pada imej. Idea teras adalah menggunakan atribut data HTML5 untuk menyimpan laluan imej alternatif, dan mendengar klik acara melalui JavaScript, secara dinamik menukar atribut SRC, dengan itu menyedari penukaran imej. Artikel ini akan memberikan contoh dan penjelasan kod terperinci untuk membantu anda memahami dan menguasai kesan interaktif yang biasa digunakan ini.
Bagaimana untuk mendapatkan lokasi pengguna dengan API Geolokasi di JavaScript?
Sep 21, 2025 am 06:19 AM
Pertama, periksa sama ada penyemak imbas menyokong GeolocationAPI. Jika disokong, hubungi getCurrentPosition () untuk mendapatkan koordinat lokasi semasa pengguna, dan dapatkan nilai latitud dan longitud melalui panggilan balik yang berjaya. Pada masa yang sama, berikan pengecualian pengendalian panggilan balik ralat seperti kebenaran penafian, ketiadaan lokasi atau tamat masa. Anda juga boleh lulus dalam pilihan konfigurasi untuk membolehkan ketepatan yang tinggi, menetapkan tempoh masa dan tempoh kesahihan cache. Seluruh proses memerlukan kebenaran pengguna dan pengendalian ralat yang sepadan.
Bagaimana untuk membuat rentetan berbilang baris dalam JavaScript?
Sep 20, 2025 am 06:11 AM
TheBestatorreateamulti-LinestringinjavascriptsisingSisisingTemplatalAlalSwithBackTticks, yangPreserveticks, whoPreserverekeandeexactlyaswritten.
Pemformatan nombor dalam JavaScript: Gunakan kaedah Tofixed () untuk mengekalkan tempat perpuluhan tetap
Sep 16, 2025 am 11:57 AM
Tutorial ini menerangkan secara terperinci bagaimana untuk memformat nombor ke dalam rentetan dengan dua perpuluhan tetap dalam JavaScript, walaupun bilangan bulat boleh dipaparkan dalam bentuk "#.00". Kami akan memberi tumpuan kepada penggunaan number.Prototype.TOfixed (), termasuk sintaksnya, fungsi, kod sampel, dan mata utama yang perlu diperhatikan, seperti jenis pulangannya sentiasa menjadi rentetan.
API Komposisi NUXT 3 dijelaskan
Sep 20, 2025 am 03:00 AM
Penggunaan teras API komposisi NUXT3 termasuk: 1. DefinePagemeta digunakan untuk menentukan maklumat meta halaman, seperti tajuk, susun atur dan middleware, yang perlu dipanggil terus di dalamnya dan tidak boleh diletakkan dalam pernyataan bersyarat; 2. Usehead digunakan untuk menguruskan tag header halaman, menyokong kemas kini statik dan responsif, dan perlu bekerjasama dengan DefinePagemeta untuk mencapai pengoptimuman SEO; 3. UseasyncData digunakan untuk mendapatkan data asynchronous secara selamat, secara automatik mengendalikan status pemuatan dan ralat, dan menyokong kawalan pemerolehan data pelayan dan klien; 4. UseFetch adalah enkapsulasi useasyncdata dan $ ambil, yang secara automatik memasuki kunci permintaan untuk mengelakkan permintaan pendua
Cara membuat selang berulang dengan setInterval dalam javascript
Sep 21, 2025 am 05:31 AM
Untuk membuat selang pengulangan dalam JavaScript, anda perlu menggunakan fungsi setInterval (), yang akan berulang kali melaksanakan fungsi atau blok kod pada selang milisaat tertentu. Sebagai contoh, setInterval (() => {console.log ("melaksanakan setiap 2 saat");}, 2000) akan mengeluarkan mesej setiap 2 saat sehingga dibersihkan oleh ClearInterval (intervalid). Ia boleh digunakan dalam aplikasi sebenar untuk mengemas kini jam, pelayan pengundian, dan lain -lain, tetapi memberi perhatian kepada had kelewatan minimum dan kesan masa pelaksanaan fungsi, dan membersihkan selang waktu ketika tidak lagi diperlukan untuk mengelakkan kebocoran ingatan. Terutama sebelum pemotongan komponen atau penutupan halaman, pastikan bahawa
Perangkap biasa dan penyelesaian untuk akses elemen DOM di JavaScript
Sep 15, 2025 pm 01:24 PM
Artikel ini bertujuan untuk menyelesaikan masalah kembali null apabila mendapatkan unsur -unsur DOM melalui document.getElementById () dalam JavaScript. Inti adalah untuk memahami masa pelaksanaan skrip dan status parsing DOM. Dengan betul meletakkan tag atau menggunakan acara domcontentloaded, anda dapat memastikan bahawa elemen itu dicuba lagi apabila ia tersedia, dengan berkesan mengelakkan kesilapan tersebut.
Bagaimana cara menyalin teks ke papan klip di JavaScript?
Sep 18, 2025 am 03:50 AM
Gunakan kaedah WriteText Clipboardapi untuk menyalin teks ke papan klip, ia perlu dipanggil dalam konteks keselamatan dan interaksi pengguna, menyokong penyemak imbas moden, dan versi lama boleh diturunkan dengan execcommand.
