Skip to content

Commit f2bd4ed

Browse files
author
Sam
committed
add api
1 parent 6a8d15f commit f2bd4ed

File tree

1 file changed

+37
-59
lines changed

1 file changed

+37
-59
lines changed

‎pages/index.js

Lines changed: 37 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,47 @@
1-
import Head from 'next/head'
2-
import Image from 'next/image'
3-
import styles from '../styles/Home.module.css'
1+
import Head from "next/head";
2+
import Image from "next/image";
3+
//import styles from "../styles/Home.module.css";
44

5-
export default function Home() {
5+
function Home({ data }) {
66
return (
7-
<div className={styles.container}>
7+
<>
88
<Head>
99
<title>Create Next App</title>
1010
<meta name="description" content="Generated by create next app" />
1111
<link rel="icon" href="/favicon.ico" />
1212
</Head>
13-
14-
<main className={styles.main}>
15-
<h1 className={styles.title}>
16-
Welcome to <a href="https://nextjs.org">Next.js!</a>
17-
</h1>
18-
19-
<p className={styles.description}>
20-
Get started by editing{' '}
21-
<code className={styles.code}>pages/index.js</code>
22-
</p>
23-
24-
<div className={styles.grid}>
25-
<a href="https://nextjs.org/docs" className={styles.card}>
26-
<h2>Documentation &rarr;</h2>
27-
<p>Find in-depth information about Next.js features and API.</p>
28-
</a>
29-
30-
<a href="https://nextjs.org/learn" className={styles.card}>
31-
<h2>Learn &rarr;</h2>
32-
<p>Learn about Next.js in an interactive course with quizzes!</p>
33-
</a>
34-
35-
<a
36-
href="https://github.com/vercel/next.js/tree/canary/examples"
37-
className={styles.card}
38-
>
39-
<h2>Examples &rarr;</h2>
40-
<p>Discover and deploy boilerplate example Next.js projects.</p>
41-
</a>
42-
43-
<a
44-
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
45-
className={styles.card}
46-
>
47-
<h2>Deploy &rarr;</h2>
48-
<p>
49-
Instantly deploy your Next.js site to a public URL with Vercel.
50-
</p>
51-
</a>
13+
<div className="bg-white">
14+
<div className="max-w-2xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8">
15+
<h2 className="sr-only">Products</h2>
16+
17+
<div className="grid grid-cols-1 gap-y-10 sm:grid-cols-2 gap-x-6 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
18+
{data.map((product) => (
19+
<a key={product.id} href={product.href} className="group">
20+
<div className="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-lg overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
21+
<img
22+
src={product.image}
23+
alt={product.imageAlt}
24+
className="w-full h-full object-center object-cover group-hover:opacity-75"
25+
/>
26+
</div>
27+
<h3 className="mt-4 text-sm text-gray-700">{product.title}</h3>
28+
<p className="mt-1 text-lg font-medium text-gray-900">
29+
$ {product.price}
30+
</p>
31+
</a>
32+
))}
33+
</div>
5234
</div>
53-
</main>
35+
</div>
36+
</>
37+
);
38+
}
5439

55-
<footer className={styles.footer}>
56-
<a
57-
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
58-
target="_blank"
59-
rel="noopener noreferrer"
60-
>
61-
Powered by{' '}
62-
<span className={styles.logo}>
63-
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
64-
</span>
65-
</a>
66-
</footer>
67-
</div>
68-
)
40+
export async function getServerSideProps() {
41+
const res = await fetch("https://fakestoreapi.com/products");
42+
const data = await res.json();
43+
//console.log(JSON.stringify(data));
44+
return { props: { data } };
6945
}
46+
47+
export default Home;

0 commit comments

Comments
 (0)