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
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 ?
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
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.
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
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
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
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
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.
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.
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
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
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
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?
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 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-zwRrKFUQqGM.html Next.js Image with Cloudinary - Blurred Placeholder Images Tutorial ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-n7VeENVQntY.html How to Use the RU-vid API in React to Add a Playlist to a Next.js App ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-8YWrmZoUYGs.html
@@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?
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 !!😂🤣✌
