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

[@justfun591]

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

[@ApurvKhare]

Watched all 10 videos in a go 🔥

[@ranjeet5806]

koi award do bhai isko

[@parsajafari51]

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

[@kapilyadav9664]

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.

[@maskman4821]

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 !!!

[@hafsahussein2016]

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

[@simply_the_dev7588]

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.

[@anggurmerah3025]

thank you sir, my error program map is running.

[@frogGames]

thanks this worked

[@dmitriystoyanov933]

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

[@mjylove2]

finally i understood this concept thank you

[@NetNinja]

Great to hear!

[@luismuzquiz]

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

[@jamesaldridge1128]

did you figure this out?

[@luismuzquiz]

@@jamesaldridge1128 Yeah, long time ago

[@sauvikgoel591]

​@@luismuzquiz then let us know that too 🙌

[@MerthanMerter]

6:17 how did you fix this error, it does persist on mine?

[@Awesometechgamer]

im having the same Error : (

[@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.

[@jonkarrer]

You are changing lives out here.

[@KimCarlos12]

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

[@Awesometechgamer]

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

[@prakharmathur619]

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

[@jimmypriono7422]

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; }

[@みの-e7j]

Good Next.js Movie Contents

[@erickgeneric]

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

[@Azro-g3w]

This is SO cool ❤😊

[@esirkings4191]

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

[@subhasishnath3078]

Next Doc example: nextjs.org/docs/basic-features/data-fetching/get-static-props#using-getstaticprops-to-fetch-data-from-a-cms

[@learnsimple4592]

Simple and easy to understand :) will you be covering getServerSideProps and getStatic Paths in this course ?

[@NetNinja]

Yeah - that's coming over the next couple of videos :)

[@apezcodes704]

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

[@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?

[@webarrays]

Server Error TypeError: Cannot read properties of undefined (reading 'map') its showing an error and not solving

[@muhammadfirmanakbar9696]

awesome tutorial thanks

[@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.

[@brucelee7782]

4:50 I wonder how does getStaticProps automatically puts the props it returned into the Ninjas function lol. I read the documentation and it just says "populated", whatever that means

[@justinlu5730]

thats because getStaticProps executes before the component is render and for that reason pass the props to the function somehow.

[@brucelee7782]

@@justinlu5730 thats not answering the question bro haha

[@alejandrocano88]

I believe it needs to build in order to get that data? not sure..

[@alexlytle089]

New subscriber so much better than brad traversy

[@kresnofatihimani8402]

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

[@andante4955]

I recently finished your Udemy JavaScript course Shaun, and it was excellent, thank you. Should I now learn React & Next? Or Vue & Nuxt? Its so confusing? I honestly don't know where to go now?

[@NetNinja]

Hey, well done & thanks :). I would advise learning Vue or React first - these are front-end JS frameworks/libraries for making websites. Once you've done that, dive into Next.js (if you chose React) or Nuxt.js (if you chose to learn Vue). Both of these allow React and Vue to run on the server (SSR).

[@Clones1]

Great video I only have one question how do I put in basic Auth agains a api endpoint in next.js keep it up great content

[@rachaelmathew5328]

Hi, I got the "TypeError: Cannot read property 'map' of undefined" but when I reloaded my page, I still had the error.

[@kaylaginger2010]

same

[@lan.__.e]

Did you use the same API as in the video? It should be working I worked with another API which had only one element and had the same problem (makes sense it won't map, cause it's only one object) You should be using API with an array of objects

[@ktoscos4546]

getStaticProps need be in component which is in pages folder , I tried do it in component from another my own folder and there doesnt work

[@gavquinny]

Amazing content - ty! :)

[@rahulnarayanan778]

Awesome tuts!

[@NetNinja]

Thank you :)

[@seanpaulson9098]

why are you exporting the getStaticProps function when its in the same file?

[@filip23128]

Thanks!

[@BBOXPLANET]

Why did you use props? Is not UseContext better?

[@fariedomar401]

i got this error : TypeError: Cannot read property 'map' of undefined

[@bishnudas3562]

can you explain why we are exporting getStaticProps function?

[@ismetglumcevic7061]

Hi, can we use context to store fetched data like in react? Does it make sense in server rendering?

[@mohamedyoussef8835]

Super Awesome Tutorial - thank you ++++++++++++++++++++

[@marcinkalmar9964]

really really thanks :)

[@HrissW]

how do you learn this skill so fast?

[@NetNinja]

It's my full-time job to learn & teach, so it gets easier over time! :)

[@HrissW]

Thanks:) can make a vid on how I learned things if possible, it would be helpful for us

[@craigroberts4445]

.map is not a function - supposedly the .map function only works for arrays ?

[@Mufaqar]

How can we use this Ninja Component in other components/pages?

[@arthuroyugi2045]

hi, what do you do i your map function doesnt work after the refresh?

[@anggurmerah3025]

sorry sir, i got eror in list ninja, when refreshed it doesn't turn into a data list, how?

[@remofurrer1011]

How can you fetch the Data from a local file? I can not figure this out. With dynamic routes.

[@ashishdhakal4087]

MY 404 page is not automatically reconized , by the app i tried looking up the default 404 templete and edit it, but couldn't find it. Same with page title and Meta data looks like it's automatically fetching from default location instead of reading my code. Possibly because of the newer version , also this version doesn't have index.html and it's directly page.js and layout.js in src folder which makes it a bit harder to follow up with the tutriorial , Need the Suggensitons please

[@ogibinedi]

what the difference between getServerSideProps, i am getting an error product.map() is not a function

[@mrFighter924]

Why not axios? Just asking? And why not getServerSideProps? What's the difference?

[@amongdoomers9464]

what if I ask you "why not fetch"?, the reason is simple . This is a next js course and not everyone uses axios so maybe he didn't want to confuse us

[@FilipeFreire]

getServerSideProps gets executed at every request, while getStaticProps only gets called at build time. When you have data you expect to change every now and then, use the first. When you expect data to stay "static", then getStaticProps is your friend :) also, fetch is built into javascript, while axios is an external package you'd need to install, which, for the purposes of this tutorial, would be an overkill (at least in my opinion!).

[@mrFighter924]

@@amongdoomers9464 i came here to learn something, not debating...

[@mrFighter924]

@@FilipeFreire thank you for your response, time and patience, this helped me a lot...

[@amongdoomers9464]

@@mrFighter924 bruh, I literally tried to make you understand my point🤥

[@sauvikgoel591]

How to replicate same thing of we want to re fetch data on certain conditions, like we do in useEffect with dependency array... Pls help

[@BrianNelsonFilms]

how would you use this if the data didnt have id's? For example i'm trying to fetch data from an object called food and within that object fruit and within that citrus { "food": { "fruit": { "citrus": "orange" } } } I want to fetch the word orange

[@avatr7109]

what are the resources where i can Put my data and then fetch in My next js application? Like above ?? or should i make custom JSON file and fetch inn

[@athulkrishnadiyil1735]

how to do in typescript?

[@ritikjain3975]

Why i'm getting ERROR when I use getStaticProps "Failed to load SWC" . It works fine when I use usEffect instead.

[@kosmedsuporte]

How can i get some params from the client to my getStaticProps ? e.g: Every time the user change some kind of filter on the front end, my getStaticProps function receive the new parameter and change on the fetch function ?

[@mistersir3185]

Can you please explain why are we using export, async and await. I am new to these keywords. I have done research on my part, but I'm still not 100% clear.

[@bardsnight]

Watch his tutorial series about Asynchronous Javascript. I'm sure you will leave understanding it way better than before. About export, do you mean ES6 Modules Exports, at the end of a functional component?

[@theroastingershow161]

i'm getting map undefined

[@ibrahim.3999]

Make sure you're using async/await or putting end points properly, I hope you've figured it out now since it's been a month.

[@mat55336]

Would anyone know why NextJs is giving me the error "banner.map is not a function" I'm somewhat knew doing this stuff and I can't seem to find a fix?

[@eotikurac]

why skip or ignore error handling when fetching data? i know this is a basic tutorial but a project cannot be complete without detailed error handling. this approach just makes beginners think they know what they're doing and that cannot be a good thing.

[@carldrogo9492]

You should NOT be building Apps with meta-frameworks if you are a begginner. 🤡

[@Guest-nb8se]

some of peoples get error in map method error: we cant map sth that is undifined sth like that if you get this error you cant do anything this erorr is becose of your next js versian you shode delete your project and make a new one but not like this (npx create-next-app filename) if you make like this you get error write this (npx create-next-app@latest filename) when you add @latest you get the last version

[@pavankumargvs5693]

How can I use redux along with getstaticprops?

[@mihaimyh]

How to handle authenticated API calls in this case?

[@seymurmammadov3868]

I get the error failed to fetch for some reason

[@nishantraoguvvada]

Does this still work? I'm getting this error: "getStaticProps" is not supported in app/." Apparently, there's been an update to the way one can have SSG but there's no documentation of how. Anyone knows a workaround?

[@DarylsWorld]

How to sort Name based on id?

[@nicolasfranco77]

map function doesnt work after the refresh? Solution: " I was trying to use getStaticProps in a component archive, it need to be used in a page... Thanks everyone." (stackoverflow)

[@allmdp]

Best bro

[@rodrigo-tj1gf]

javascript and typescript syntax completely destroy me. so much () and {} and arrow functions that i never have any idea how to do anything

[@CryptoZombie666]

exactly, never faced such issues in other languages.

[@kaduzinhoba]

I don't what happens... but my map is not working... ' undefined '

[@mistersir3185]

use Waze app if you're driving. Google map can be confusing when you're driving.

[@alphaxchanberg5359]

You can only use getStaticProps on pages (files in the /pages directory), not in regular React components. I suggest you get the posts in your pages/index.js file and pass them as props to the FeaturedPosts component.

[@markokafor7432]

Nice tuts!!! You should implement a check first next time like this. ninja && ninja.map( ...)

[@kakashi3966]

I don't know how component Ninjas can detect a function getStaticProps ???

[@VMzaVAS]

Best!

[@sarahabib9338]

King

[@ridl27]

ez :D ty.

[@incognitohacks4850]

Programming teacher: Lets learn some Next.js Me: You need to go watch the Het Ninjas Videos noob😎 Classmates: ಠ_ಠ

[@simply_the_dev7588]

Just a side not you can do this:: const res = await fetch("").then( res => res.json() ); Works the same and don't need to add another variable.

[@juaninfante7000]

I think he does that to not get beginner confused

[@istoric7221]

Thank you Ninja. getStaticProps

[@rinoohhighskilled7236]

for new ppl here with a .map() error, use it like this: (make use of props instead of ninjas) const Ninjas = (props) => { return ( All Ninjas {props.ninjas.map((ninja) => ( { ninja.name } ))} ); }