0Pricing
Next.js 15 Fullstack Web Apps · Lektion

Externe Dienste integrieren

Verbinden Sie Ihr Next.js-Backend mit APIs und Diensten von Drittanbietern, um den Funktionsumfang zu erweitern.

Externe Dienste integrieren ist eine kostenlose Next.js 15 Fullstack Web Apps-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Next.js 15 Fullstack Web Apps-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Next.js 15 Fullstack Web Apps-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

Connect Your App to the World

Modern web applications rarely exist in isolation. They often need to interact with other services to provide rich features.

  • Payment Gateways: Stripe, PayPal.
  • Authentication: Auth0, Clerk.
  • Data Services: Weather APIs, stock prices.
  • Email & SMS: SendGrid, Twilio.

Integrating these external services expands your app's capabilities immensely!

Your Next.js Backend Hub

In Next.js, the ideal place for making server-side calls to external APIs is within Route Handlers.

Route Handlers run on the server, meaning your API keys and sensitive logic stay secure and are never exposed to the client (browser).

They act like your own custom backend API endpoints.

Fetching Data with `fetch()`

The standard way to make network requests in JavaScript, including in Next.js Route Handlers, is using the built-in fetch() API.

For a basic GET request, you just need the URL. Let's try fetching some public data!

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

Guarding Your Credentials

When integrating with most external services, you'll need an API Key or secret.

Never hardcode these directly in your code or expose them to the client-side! This is a major security risk.

Instead, store them as environment variables, typically in a .env.local file in your project root.

Accessing Secure Keys

Next.js automatically loads environment variables from .env.local. You can access them in your server-side code (like Route Handlers) using process.env.YOUR_VARIABLE_NAME.

Remember, variables prefixed with NEXT_PUBLIC_ are exposed to the browser, so avoid this for secrets!

// .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!' });
}

Submitting Data to Services

Often, you need to send data to an external service, not just receive it. This is typically done with a POST request.

With fetch(), you specify the method: 'POST', set headers (especially 'Content-Type': 'application/json'), and include your data in the body, usually as a JSON string.

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

When Things Go Wrong

External services can fail due to network issues, invalid data, rate limits, or server errors. Your application needs to handle these gracefully.

  • Always wrap fetch calls in a try...catch block.
  • Check response.ok (a boolean) to see if the HTTP status code was in the 200-299 range.
  • Handle different status codes (e.g., 401 Unauthorized, 404 Not Found, 500 Server Error) appropriately.

Smart Integration Strategies

To build reliable integrations, consider these best practices:

  • Timeouts: Prevent your app from hanging indefinitely if an external service is slow.
  • Retries: Implement a retry mechanism for transient errors (e.g., network glitches).
  • Idempotency: Design your requests so that making the same request multiple times has the same effect as making it once (important for payments).

For complex scenarios, libraries like axios or node-fetch (for older Node versions) offer more features, but native fetch is often sufficient.

Check Your Understanding

It's crucial to securely handle sensitive information when interacting with external services.

Connecting Your App

You've learned how to integrate external services into your Next.js application.

  • Route Handlers are your secure server-side gateway.
  • The fetch() API handles GET and POST requests.
  • Always use environment variables for API keys and keep them server-side.
  • Implement robust error handling and consider best practices like timeouts and retries.

This skill is fundamental for building feature-rich, fullstack applications!

Häufig gestellte Fragen

Ist die Lektion „Externe Dienste integrieren“ kostenlos?

Ja — der vollständige Text von „Externe Dienste integrieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Next.js 15 Fullstack Web Apps-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Next.js 15 Fullstack Web Apps-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Externe Dienste integrieren“?

Verbinden Sie Ihr Next.js-Backend mit APIs und Diensten von Drittanbietern, um den Funktionsumfang zu erweitern. Du übst Next.js 15 Fullstack Web Apps mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Next.js 15 Fullstack Web Apps zu starten?

Keine Vorkenntnisse erforderlich. Next.js 15 Fullstack Web Apps auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Externe Dienste integrieren“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Next.js 15 Fullstack Web Apps-Lektion Code schreiben und ausführen?

Ja. Jede Next.js 15 Fullstack Web Apps-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. API-Route-Handler erstellen
  2. Anfragevalidierung und Sicherheit
  3. Externe Dienste integrieren
  4. Ratenbegrenzung und API-Fehlerbehandlung
← Zurück zu Next.js 15 Fullstack Web Apps