Next.js Tutorial #10 - Fetching Data (getStaticProps)

🐱‍💻 🐱‍💻 Course Files:

🐱‍👤🐱‍👤 JOIN THE GANG -

🐱‍💻 🐱‍💻 My Udemy Courses:

🐱‍💻 🐱‍💻 Helpful Links:

🐱‍💻 🐱‍💻 Social Links:

[maskman]

getStaticProps function in Nextjs works same as asyncData hook in Nuxtjs, they both works in page component only, do the same thing (fetching data on server side). we can learn Nuxtjs at the same time and compare the differences !!!

[parsajafari]

shaun I have learned a lot from you it started from basic html css js unitl now that I am a react developer and want to learn Next to build fantastic projects

[kapilyadav]

Brother thank you so much for creating this video. Subha se pareshan ho rha that UI pe data show karane ke wajah se.
But aapka video dekh kr ek baar me kaam ho gya..

Thanks for creating this useful video.

[justfun]

After watching just first minute of your video, I am your subscriber. Sir!

[simply_the_dev]

export async function getStaticProps() {
const exploreData = await fetch("some link").then(
(res) => res.json()
);
const cardData = await fetch("some link").then((res) =>
res.json()
);
return {
props: {
exploreData,
cardData,
},
};

Above is some code from another project showing another way. Maybe this helps others.

[hafsahussein]

hello the net ninja the best youtuber ever for my web development learning journey, I would like javascript design patterns with real life projects, the most of the courses explain them without giving real life projects so please try that

[jimmypriono]

Ninjas.module.css

.single {
padding: 2px 16px;
background: #fff;
display: block;
margin: 20px 10px;
border-left: 8px solid #fff;
}
.single:hover {
border-left: 8px solid #4979ff;
}

[penocrat]

Thanks so much for this lesson, Shaun. You've really been an amazing guide in my programming journey. But I do have a question though. Coming from a cybersecurity background, I like to think of security best practices... I'm somehow concerned about the amount of data we're fetching for each user from the API only to use a single "name" data. I think tools such as "burp suite" can be used to intercept these API requests and all these data would be out there in the open. Even those that aren't intended to be disclosed to the public.

How then can we prevent this type of vulnerability? I'm thinking there'd be a way to filter the data returned to us and not the entire data.

[mjylove]

finally i understood this concept thank you

[luismuzquiz]

What if the data comes from a local json file on a folder called data?

[apezcodes]

very simple and details God bless. i have search the whole internet for this simple details.

please can you make a video on how to build a complete website with nextjs fetching static and dynamic data

[dmitriystoyanov]

Thank you, bro! I solved my task with help of this tutorial!

[KimCarlos]

You teach from a beginner perspective and keep it simple. You are my best youtube-teacher. If someone like @WebDevSimplified built this tutorial, he would have probably used a database connection and i bet thats where any beginner watching would click out of the video and look for a simpler one. No offense @WebDevSimplified

[erickgeneric]

Hi. Naïve question here: if getStaticProps runs at build time, how are we able to access the data it in development?

[Awesometechgamer]

im getting the error called ( property 'map' of undefined ) please Help : (
I followed everything as it is

[coffeefps]

For the getStaticProps, do we have something like a prop we can get to check if data is fetching? So we can show stuff like a loader/skeleton in the UI to tell the user we are fetching data.

[prakharmathur]

please make more tutorials, I am using next in my internship and it is helping a lot

[esirkings]

Nice tutorial. How do you handle errors e.g in case that API is unavailable?

[suzanne_atkinson]

Thank you for the great teaching. How is this function different from the useFetch function that you build in your Udemy course? Is this preferred for next, or is this just fora. single page at a time?

[kresnofatihimani]

what about listeners like firebase onSnapshot functions? do we put it in the getstaticprops as well? thx 😁