Create Pages & Fetch Data in Next.js Using Static & Dynamic Routes

[@colbyfayock]

Learn how to build a full stack Next.js app in my upcoming course: colbyfayock.com/course

[@jrs3239]

The best tutorial ever on KZbin. Very well explained. Congratulations, your videos are awesome!

[@colbyfayock]

Wow thanks so much

[@mamadcodes]

The best tutorial video about Fetching data in Next!!!!! it was a headache for me to understand how to to it, before this video !!!!

[@colbyfayock]

Really glad to hear it helped

[@ArgzonHaziraj]

I like your videos a lot Colby, not just because you are very knowledgeable but you also have a very calming voice which I like a lot. Keep up the great work man

[@colbyfayock]

Thank you so much 🙏

[@pensums]

Next videos: How to [insert subject here] in NextJS - ASMR 😂 I agree though. The flow of his voice in his tutorials is very calming.

[@colbyfayock]

@@pensums 😂 thank you

[@kirksurber7262]

Great breakdown and done fast without wasting time. Thank you!

[@colbyfayock]

no problem!

[@aakashkathait8328]

this video is structured perfectly I've seen tons of videos on Nextjs data fetching but this one finally made it all clear... good work man

[@colbyfayock]

Really glad to hear that, thank you!

[@sageosoro1703]

Best explanation on data fetching methods ever

[@colbyfayock]

thank you :)

[@israelaregbesola4670]

I love the structure of this video and how you're able to perfectly articulate things. Awesome awesome video.

[@colbyfayock]

thanks! glad to hear it was helpful

[@jayhu6075]

I am very glad to find your channel. You make every topic understandable. Many thanks.

[@colbyfayock]

So happy to hear that!!

[@goose2935]

NextJS is awesome, thanks! Using it as I need users profile pages and some other data based pages to be SEO friendly. Great video!

[@colbyfayock]

thank you! sounds like a perfect use case :D

[@iluvsyphonfilter]

Awesome tutorial, I liked how you explained it step by step gradually increasing the complexity.

[@colbyfayock]

Thank you! Glad it was clear 🙌

[@urbanobaz]

This video is amazing! I definitely want to join your workshop after seeing this video. Keep sharing great content Colby. Thank you!!

[@colbyfayock]

Thanks so much! 🙌🙌

[@gregsofroni4140]

Finally a channel with the proper info and great structure. Plus, I just love your flow!

[@colbyfayock]

Thanks so much 🙏

[@PiyushRaj-ij3dx]

Absolutely brilliant! This video was everything I was looking for to get a quick feel and understanding of nextjs. Thank you!

[@colbyfayock]

thanks, happy to hear that! 🙌

[@rwlc]

Holy hell. This is one of the best tutorials.

[@colbyfayock]

Haha thank you!!

[@paupang781]

You're awesome, Colby! Learned a ton from you

[@colbyfayock]

thank you! 🙌

[@joshmay9531]

Love your vibe and art that goes into the videos :)

[@colbyfayock]

thanks Josh!

[@imonw3b]

Amazing tutorial! Thank you Colby! 👌

[@colbyfayock]

you're welcome! :)

[@the.harshil]

I am surprised why you don't have more subs!?❤️

[@colbyfayock]

ah thank you :)

[@adamjamiu6764]

The reason why i loved this video is that you made use of my best anime movie

[@colbyfayock]

💯💯💯

[@franssiregar9337]

Good explanation thanks for the video

[@colbyfayock]

np!

[@Technoholicplus]

nicely explained thank you.

[@colbyfayock]

no problem!

[@prodigymuj]

Super cool video! Thank you! I'd like to ask if the suggested text is Github Copilot? or is that something else?

[@colbyfayock]

thank you! yes it was Copilot, i usually turn it off for videos though to avoid any confusion but missed that🙈

[@romimaximus]

Awesome tutorial !!! but everytime i need to get data from a API, i have to use these "getStaticProps, getStaticPaths, and getServerSideProps" ?... or i also can use the "Fetch API or Axios" inside the client side, just like in regular React App ?

[@colbyfayock]

you can certainly make clientside requests like a typical react app! each approach has different tradeoffs for the benefits and impact they provide. for instance, using those methods to request page data might help with SEO, where clientside may be unreadable because it requires a request after the page loads (googles getting better at that, but not everyone). just one example

[@romimaximus]

@@colbyfayock Thank you very much for reply 😁👍

[@Mufaqar]

Cool but how we can add pagination in next ?

[@colbyfayock]

thanks - good topic idea, ill add that to my list!

[@Tonbeans]

Any idea when to use getStatic vs getServerSide? I was thinking do I use getStaticProps to only load local files (e.g blogs) and use getServeSide for ALL of my api requests.

[@colbyfayock]

i try to use getStaticProps whenever i can - it offloads any of the work to the compilation step rather than adding more time to the server request when the person is requesting the page

[@pixelbakery]

Hey! Thank you for this. What if we don't want to use an external API but instead want to use a bunch of subpages?

[@colbyfayock]

hey! so are you referring to manually creating a page one-by-one? or are you still hoping to dynamically create them? you can create any new file under pages as pages/my-page-name.js and you'll have it available at mysite.com/my-page-name otherwise the process should be similar for any dynamic creation, but you would make the request to whatever local source you have or use something like the npm module fs to read the files from the local directory

[@sabrinalucianavieirapinto5602]

Hi Colby, this is an awesome explanation, but I've been questioning me if is possible injecct a loading/loading page when using getStaticProps/getStaticPath and Dynamic routes, because my data current data is locally

[@colbyfayock]

If I'm understanding correctly I think you would want to create an instance of state where you mark if your data is loaded or not and if not show a loading state. If it's not available during compilation that would likely mean the default state and page would be a loading page

[@tomarew]

is Next JS suitable for updating html elements with local files monitored by a server ? e.g. update buttons with params of local JSON files in realtime.

[@colbyfayock]

hey! Next.js uses React.js for manipulating the DOM like that and React would be suitable for something like that

[@jkmoijul8559]

do you have git repo for this project?

[@colbyfayock]

yup: github.com/colbyfayock/my-last-airbender-wiki

[@niteshtak8484]

I need to configure navbar in next.js, Navbar menu data is coming from CMS where menu can be added any time. can you tell me where i can call the CMS api to get the nav so i update automatically when CMS content changes. Tried solution: 1. calling getInitialProps on _app.js 2. creating HOC for _app.js both solution is not feasible . In 1st solution the static page optimization provided by next js is opt out In 2nd the data set to one time and not updated automatically when CMS data changed Help me on that

[@colbyfayock]

there's currently not a better solution but it sounds like there's one on the way per Vercel

[@littlejohnmusicnow]

Hi Colby, thank you for this very fine tutorial I tried to create a similar version by following your code only using products instead of avatars, but my code failed at products.map (is not a function) and products is not an array. Please help me to solve this problem. Thank you.

[@colbyfayock]

hey thanks john. i would recommend debugging the request you're making that would make `products` available. you can add `console.log` statements inside of `getStaticProps` or any of the data fetching methods which will log out in your terminal

[@littlejohnmusicnow]

@@colbyfayock Many thanks Colby for your help. I've managed to get past this problem now. Cheers, John

[@GMERT]

Hello Colby. I want u to create photo gallery with the images in public folder on next.js please

[@colbyfayock]

hey! i don't haev that exact example, but here are a few that might help you out: Responsive Grid of Products with CSS Grid - Ecommerce on the Jamstack kzbin.info/www/bejne/sKi1o358irakfa8 Next.js Image with Cloudinary - Blurred Placeholder Images Tutorial kzbin.info/www/bejne/pGi5lniEi7ahqrs How to Use the KZbin API in React to Add a Playlist to a Next.js App kzbin.info/www/bejne/boq6o6CQpLqMfdU

[@GMERT]

@@colbyfayock Thanks for saving me. I have been on that for a full week. Youare the best. Please do you have another video of saving user form input with txt in a folder on a server?

[@colbyfayock]

@@GMERT i dont have something like that, sorry :(

[@CodexRahul]

How to fetch data from component file, and that component file import in main page. How? like- I will create a home component name is home.js in component folder, not in pages folder. And fetch data in home component file that home.js. And that home component import to main-page.js file which are located in pages folder as a main page. That time will get some error, Tht's says "map not define". How to solve this problem?

[@colbyfayock]

you would have to make the request clientside with the current APIs. you can only use the Next.js data fetching methods on pages

[@batumanav]

Thank youuuuu

[@colbyfayock]

you're welcome!

[@ABC-rd4sz]

Thanks bro for amazing video this help me alot but getServerSideProps not working on next export can you please help me

[@colbyfayock]

Unfortunately it won't work because export will export the site to a static version where get ServerSideProps requires a server

[@KaceyDodson]

Great tutorial. It's really helping me wrap my head around dynamic data in nextjs. I'm calling another api and getting a "___.map is not a function" error. The api i'm using requires an api key. Could anyone offer some advice? Thanks! xD

[@colbyfayock]

i think _.map is lodash syntax right? whats the API you're calling?

[@KaceyDodson]

@@colbyfayock Thanks for the reply. I'm calling the Opensea api

[@colbyfayock]

@@KaceyDodson oh neat! i'm not super familiar with that world yet, doing anything interesting?

[@theseanmodd]

Please do a NextJS GraphQL tutorial!!!!

[@colbyfayock]

youre in luck :D kzbin.info/www/bejne/pam4gYuej5anb6s

[@mrikea7577]

You're great, you know that?

[@colbyfayock]

thank you 🤗

[@lilabajrami]

so you continued with the "bad hair day" lol

[@colbyfayock]

😂 i accidentally deleted a clip from the beginning so had to re-record and just went with it

[@walidedrissi1012]

great job man but u need to slow down a bit not everybody is a genius here 😅 and ya while im here. get a live bro !! I mean, u know the mistakes before they occur WTF man !!😂🤣✌

[@colbyfayock]

thats the editing magic 🪄😉

[@colbyfayock]

Get fresh tutorials and other free content straight to your inbox! colbyfayock.com/news

[@loveomobude6826]

So no one noticed the hair at the beginning?

[@colbyfayock]

what hair 👀😂 i accidentally deleted a segment and didnt want to re-record the entire thing

[@loveomobude6826]

@@colbyfayock 😂..thought as much..still funny though😂