Skip to content

Commit 739419a

Browse files
justinTsugranesjustinTsugranes
committed
updated notes
1 parent 7529143 commit 739419a

File tree

7 files changed

+81
-206
lines changed

7 files changed

+81
-206
lines changed

‎README.md‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,51 @@
1+
# Notes
2+
3+
Common examples of when you may want to use this type of pre-rendering are: displaying a list of articles on a blog homepage, displaying a list of products on a homepage, or displaying a list of topics on a documentation page.
4+
5+
All you have to do is define the async function _getStaticProps_ fetch your data within the function and return an object with the necessary props. The props will then be availabe for use in your component
6+
7+
---
8+
9+
## Setup
10+
11+
### First Steps
12+
13+
- delete API folder from Pages
14+
- delete home.module.css from styles
15+
- changed index.js file content into simple component that returns a plain h1 tag.
16+
17+
Using the users data from [JSONPlaceholder](https://jsonplaceholder.typicode.com/) for test APIs
18+
19+
---
20+
21+
- create a new file in Pages folder named "users.js"
22+
23+
- within the file, defined and exported UserList compontent
24+
25+
- in Next, when you export a page component, you can also export an async function called "getStaticProps"
26+
27+
- This function will run at build time in production. Inside the function, you can fetch external data and send it as "props" to the page.
28+
29+
- go to users.js and export the getStaticProps async function
30+
- pass in the JSONPaceholder/users URL as an argument.
31+
- once you have the reponse, you convert it into JSON and log it to the console
32+
- then, you need to pass the data to the component above
33+
- this is accomplished via a return object
34+
- the object contains another object named 'props' that can contain any key value pairs, which will be automatically injected as props into the component.
35+
- in our case, we set one property named 'users' which is set to 'data'
36+
- when we return this, the userlist component will receive the props at build time
37+
- so, you pass in 'props' as an arugment. you could also destructure the users property.
38+
- To render
39+
- wrap the UserList return in a React fragment
40+
- map over the list of user
41+
- for each user, we're returning a div tag where the key tag is set to user.id
42+
- then, we're rendering user.name and user.email
43+
- you could map more, but we're only using name and email in this example
44+
45+
---
46+
47+
## Original README info from create-next-app
48+
149
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
250

351
## Getting Started

‎pages/api/hello.js‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎pages/index.js‎

Lines changed: 4 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,5 @@
1-
import Head from 'next/head'
2-
import Image from 'next/image'
3-
import styles from '../styles/Home.module.css'
4-
5-
export default function Home() {
6-
return (
7-
<div className={styles.container}>
8-
<Head>
9-
<title>Create Next App</title>
10-
<meta name="description" content="Generated by create next app" />
11-
<link rel="icon" href="/favicon.ico" />
12-
</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>
52-
</div>
53-
</main>
54-
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-
)
1+
function Home() {
2+
return <h1>Next JS pre-rendering</h1>
693
}
4+
5+
export default Home

‎pages/users.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
function UserList({ users }) {
2+
return (
3+
<>
4+
<h1>List of users</h1>
5+
{users.map((user) => {
6+
return (
7+
<div key={user.id}>
8+
<p>{user.name}</p>
9+
<p>{user.email}</p>
10+
</div>
11+
)
12+
})}
13+
</>
14+
)
15+
}
16+
17+
export default UserList
18+
19+
export async function getStaticProps() {
20+
const response = await fetch('https://jsonplaceholder.typicode.com/users')
21+
const data = await response.json()
22+
console.log(data)
23+
24+
return {
25+
props: {
26+
users: data,
27+
},
28+
}
29+
}

‎public/favicon.ico‎

-25.3 KB
Binary file not shown.

‎public/vercel.svg‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎styles/Home.module.css‎

Lines changed: 0 additions & 129 deletions
This file was deleted.

0 commit comments

Comments
 (0)