feat!: add new fetch

TOP-FASHION · Feb 6, 2024 · 5881df4 · 5881df4
1 parent c3de128
commit 5881df4
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 1 deletion.
diff --git a/next.config.js b/next.config.js
@@ -1,6 +1,14 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'fakestoreapi.com',
+      },
+    ],
+  },
 }
 
 module.exports = nextConfig
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -6,7 +6,7 @@ import Link from "next/link";
 
 const inter = Inter({ subsets: ['latin'] })
 
-export default function Home() {
+export default function Home({product}: any) {
   return (
     <>
       <Head>
@@ -18,6 +18,15 @@ export default function Home() {
       <main className={`${styles.main} ${inter.className}`}>
         Home page
         <Link href="/other">Other</Link>
+        <div>
+          <h1> Welcome to My blog gallery ssg</h1>
+          {product.map((item: any) => (
+              <div key={item.id}>
+                <a> <h3>{item.title}</h3> </a>
+                <img src={item.url} />
+              </div>
+          ))}
+        </div>
         <div className={styles.description}>
           <p>
             Get started by editing&nbsp;
@@ -115,3 +124,12 @@ export default function Home() {
     </>
   )
 }
+
+export const getServerSideProps = async () => {
+  const res = await fetch('https://fakestoreapi.com/products?limit=20');
+  const data = await res.json();
+
+  return{
+    props: {product: data}
+  }
+}
diff --git a/src/pages/other.tsx b/src/pages/other.tsx
@@ -3,10 +3,21 @@ import Image from 'next/image'
 import { Inter } from 'next/font/google'
 import styles from '@/styles/Home.module.css'
 import Link from "next/link";
+import {useEffect, useState} from "react";
 
 const inter = Inter({ subsets: ['latin'] })
 
 export default function Home() {
+    const [state, setState] = useState([]);
+    async function getData() {
+        const res = await fetch('https://fakestoreapi.com/products?limit=8');
+        const data = await res.json();
+        setState(data);
+    }
+
+    useEffect(() => {
+        getData();
+    }, [])
     return (
         <>
             <Head>
@@ -18,6 +29,18 @@ export default function Home() {
             <main className={`${styles.main} ${inter.className}`}>
                 Other page
                 <Link href="/">Home</Link>
+                <div>
+                    {
+                        state.map((e: any) => (
+                            <a key={e.id}>
+                                <h2> {e.title} &rarr;</h2>
+                                <img src={e.image} width={250} height={200}/>
+                                <p>{e.description}</p>
+                                <h3>${e.price}</h3>
+                            </a>
+                        ))
+                    }
+                </div>
                 <div className={styles.description}>
                     <p>
                         Get started by editing&nbsp;