Abrufen von Daten mit Axios in Next.js Eine vollständige Anleitung

<code class="language-typescript">// app/server-component-example/page.tsx
import axios from 'axios';

interface Post {
  id: number;
  title: string;
  body: string;
}

const fetchPosts = async (): Promise<Post[]> => {
  const { data } = await axios.get<Post[]>('https://jsonplaceholder.typicode.com/posts');
  return data;
};

export default async function ServerComponentExample() {
  const posts = await fetchPosts();

  return (
    <div>
      <h1>Server-Fetched Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}</code>

<code class="language-typescript">'use client';

import axios from 'axios';
import { useEffect, useState } from 'react';

interface Post {
  id: number;
  title: string;
  body: string;
}

export default function ClientComponentExample() {
  const [posts, setPosts] = useState<Post[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        const { data } = await axios.get<Post[]>('https://jsonplaceholder.typicode.com/posts');
        setPosts(data);
      } catch (error) {
        console.error('Error fetching posts:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchPosts();
  }, []);

  if (loading) return <div>Loading...</div>;

  return (
    <div>
      <h1>Client-Fetched Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}</code>