Aplikasi Web Fullstack Next.js 15 · Pelajaran

Mengintegrasikan Perkhidmatan Luaran

Sambungkan bahagian belakang Next.js anda kepada API dan perkhidmatan pihak ketiga untuk fungsi tambahan.

Pelajaran 3 daripada 410 langkah

Mengintegrasikan Perkhidmatan Luaran ialah pelajaran Aplikasi Web Fullstack Next.js 15 percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Aplikasi Web Fullstack Next.js 15, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Aplikasi Web Fullstack Next.js 15 merangkumi sejumlah 4 pelajaran.

Hubungkan Aplikasi Anda dengan Dunia

Aplikasi web moden jarang berfungsi secara terasing. Aplikasi ini sering perlu berinteraksi dengan perkhidmatan lain untuk menyediakan ciri yang lebih lengkap.

Gerbang Pembayaran: Stripe, PayPal.
Pengesahan Identiti: Auth0, Clerk.
Perkhidmatan Data: API cuaca, harga saham.
E-mel dan SMS: SendGrid, Twilio.

Mengintegrasikan perkhidmatan luaran ini meluaskan keupayaan aplikasi anda dengan banyak!

Hab Bahagian Belakang Next.js Anda

Dalam Next.js, tempat yang ideal untuk membuat panggilan pada sisi pelayan ke API luaran ialah dalam Pengendali Laluan.

Pengendali Laluan berjalan pada pelayan, bermakna kunci API dan logik sensitif anda kekal selamat serta tidak pernah didedahkan kepada klien (pelayar).

Pengendali ini berfungsi seperti titik akhir API bahagian belakang tersuai anda sendiri.

Mendapatkan Data dengan `fetch()`

Cara standard untuk membuat permintaan rangkaian dalam JavaScript, termasuk dalam Pengendali Laluan Next.js, adalah dengan menggunakan API fetch() terbina dalam.

Untuk permintaan GET asas, anda hanya memerlukan URL. Mari cuba mendapatkan beberapa data awam!

async function getJoke() {
  try {
    const response = await fetch('https://api.chucknorris.io/jokes/random');
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const data = await response.json();
    console.log("Chuck Norris Joke:");
    console.log(data.value);
  } catch (error) {
    console.error("Failed to fetch joke:", error);
  }
}

getJoke();

Melindungi Bukti Kelayakan Anda

Apabila mengintegrasikan kebanyakan perkhidmatan luaran, anda memerlukan Kunci API atau rahsia.

Jangan sekali-kali menulisnya terus dalam kod anda atau mendedahkannya kepada sisi klien! Ini merupakan risiko keselamatan yang besar.

Sebaliknya, simpan kunci tersebut sebagai pemboleh ubah persekitaran, biasanya dalam fail .env.local di akar projek anda.

Mengakses Kunci Selamat

Next.js memuatkan pemboleh ubah persekitaran daripada .env.local secara automatik. Anda boleh mengaksesnya dalam kod pada sisi pelayan (seperti Pengendali Laluan) menggunakan process.env.YOUR_VARIABLE_NAME.

Ingat, pemboleh ubah yang diawali dengan NEXT_PUBLIC_ didedahkan kepada pelayar, jadi jangan gunakannya untuk rahsia!

// .env.local
EXTERNAL_API_KEY=your_super_secret_key_123

// In a Route Handler (e.g., app/api/data/route.js)
import { NextResponse } from 'next/server';

export async function GET() {
  const apiKey = process.env.EXTERNAL_API_KEY;
  if (!apiKey) {
    return NextResponse.json({ error: 'API Key not configured' }, { status: 500 });
  }
  // Use apiKey in your fetch call
  // const response = await fetch(`https://api.external.com/data?key=${apiKey}`);
  return NextResponse.json({ message: 'API Key accessed successfully!' });
}

Menghantar Data kepada Perkhidmatan

Selalunya, anda perlu menghantar data kepada perkhidmatan luaran, bukan sekadar menerimanya. Hal ini biasanya dilakukan dengan permintaan POST.

Dengan fetch(), anda menentukan method: 'POST', menetapkan headers (terutamanya 'Content-Type': 'application/json') dan menyertakan data anda dalam body, biasanya sebagai rentetan JSON.

async function sendData() {
  const postData = {
    title: 'New Post from CoddyKit',
    body: 'This is a test post sent to an external service.',
    userId: 1,
  };

  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(postData),
    });

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const result = await response.json();
    console.log("Post created successfully:");
    console.log(result); // The external service often returns the created item
  } catch (error) {
    console.error("Failed to send data:", error);
  }
}

sendData();

Apabila Berlaku Masalah

Perkhidmatan luaran boleh gagal disebabkan masalah rangkaian, data tidak sah, had kadar atau ralat pelayan. Aplikasi anda perlu mengendalikannya dengan baik.

Sentiasa bungkus panggilan fetch dalam blok try...catch.
Semak response.ok (nilai boolean) untuk melihat sama ada kod status HTTP berada dalam julat 200-299.
Kendalikan kod status yang berbeza dengan sewajarnya (contohnya, 401 Tidak Dibenarkan, 404 Tidak Ditemui, 500 Ralat Pelayan).

Strategi Integrasi Pintar

Untuk membina integrasi yang boleh dipercayai, pertimbangkan amalan terbaik berikut:

Tamat masa: Elakkan aplikasi anda tergantung tanpa had jika perkhidmatan luaran lambat.
Percubaan semula: Laksanakan mekanisme percubaan semula untuk ralat sementara (contohnya, gangguan rangkaian).
Idempoten: Reka bentuk permintaan anda supaya membuat permintaan yang sama beberapa kali memberikan kesan yang sama seperti membuatnya sekali (penting untuk pembayaran).

Untuk senario yang kompleks, pustaka seperti axios atau node-fetch (untuk versi Node yang lebih lama) menawarkan lebih banyak ciri, tetapi fetch natif selalunya sudah mencukupi.

Semak Pemahaman Anda

Adalah penting untuk mengendalikan maklumat sensitif dengan selamat apabila berinteraksi dengan perkhidmatan luaran.

Jawab dalam pelajaran interaktif

Menyambungkan Aplikasi Anda

Anda telah mempelajari cara mengintegrasikan perkhidmatan luaran ke dalam aplikasi Next.js anda.

Pengendali Laluan ialah get laluan sisi pelayan yang selamat untuk anda.
API fetch() mengendalikan permintaan GET dan POST.
Sentiasa gunakan pemboleh ubah persekitaran untuk kunci API dan simpannya di sisi pelayan.
Laksanakan pengendalian ralat yang kukuh dan pertimbangkan amalan terbaik seperti tamat masa dan percubaan semula.

Kemahiran ini penting untuk membina aplikasi fullstack yang kaya dengan ciri!

Percuma untuk bermula

Pelajari TypeScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 12
Pelajaran: 48

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Mengintegrasikan Perkhidmatan Luaran” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Aplikasi Web Fullstack Next.js 15, termasuk “Mengintegrasikan Perkhidmatan Luaran”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Aplikasi Web Fullstack Next.js 15 merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Mengintegrasikan Perkhidmatan Luaran”?

Sambungkan bahagian belakang Next.js anda kepada API dan perkhidmatan pihak ketiga untuk fungsi tambahan. Anda berlatih Aplikasi Web Fullstack Next.js 15 menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Aplikasi Web Fullstack Next.js 15?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Aplikasi Web Fullstack Next.js 15 di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “Mengintegrasikan Perkhidmatan Luaran” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Aplikasi Web Fullstack Next.js 15 ini?

Ya. Setiap pelajaran Aplikasi Web Fullstack Next.js 15 menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Membina Pengendali Laluan API
Pengesahan Permintaan dan Keselamatan
Mengintegrasikan Perkhidmatan Luaran
Pengehadan Kadar dan Pengendalian Ralat API

← Kembali ke Aplikasi Web Fullstack Next.js 15