Add files via upload

2ndPage.js

+import React, { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+
+function ApiPage() {
+  const [data, setData] = useState(null);
+  const router = useRouter();
+
+  useEffect(() => {
+    fetch('https://jsonplaceholder.typicode.com/comments')
+      .then((response) => response.json())
+      .then((data) => setData(data.slice(0, 10))) // Ersten 10 Daten
+      .catch((error) => console.error('Error fetching data:', error));
+  }, []);
+  
+  const handleBack = () => {
+    router.push('/');
+  };
+
+  return (
+    <div>
+      <h1>API Seite</h1>
+      {data && data.length > 0 ? (  // Prüft ob data frei ist und ob es sachen hat
+        <div>
+          <h2>Ersten 10 Kommentare von der API:</h2>
+          <button onClick={handleBack}>Start Seite</button>
+          <ul>
+            {data.map((item) => (
+              <li key={item.id}>
+                <p><strong>Kommentar:</strong> {item.body}</p>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : (
+        <p>Loading...</p>
+      )}
+    </div>
+  );
+}
+  
+//<p><strong>Email:</strong> {item.name}</p>  //Name
+//<p><strong>Email:</strong> {item.email}</p> //Email
+
+export default ApiPage;

index.js

+import React from 'react';
+import { useRouter } from 'next/router';
+
+function StartPage() {
+  const router = useRouter();   //Macht das man Seite Wechseln Kann
+
+  const handleNavigate = () => {  // Geht zur Zweiten Seite
+    router.push('/2ndPage');
+  };
+
+  return (
+    <div>
+      <h1>Homepage</h1>
+      <button onClick={handleNavigate}>Zweite Seite</button>
+      <li>
+        <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg"/>
+      </li>
+    </div>
+  );
+}
+
+export default StartPage;