I couldn't help it but I must subscribe, like and comment because the one thing I was looking for all these days you are the only one that explained it to my satisfaction thank you. I wish many people knew about this channel.
Thank you so much Brett, for sharing such a wonderful tutorial, you did not even a miss a single thing in the tutorial. It may be a long tutorial for some guys but you explained each and everything for pro and beginners. Keep generating the tutorials. Subscribed you.
I have searched everywhere for a guide like this and nobody has came close to this. Thank you! You are the only person who seems like they know what they are doing with app router on youtube
Just found your channel and subscribed, i like how your tutorials are long and in depth about concepts to understand instead of just project tutorials(those are great every now and then), and i dont think 10 or 15 minute short videos can do the same.
Thank you so much, I have been looking for new Nextjs tutorials, and this is the perfect one ! trust me, you are the only one that answered the questions in my head, all other suggestions by the docs/chatgpt/websites were either wrong, out of date or incomprehensible, keep going !
Great video that delivers on its promise (pun intended) Would have liked to see content around route handlers since this is still a confusing topic for someone coming from a non-nextjs react app. I would also love to see an advanced video covering the more complex problems such as launching the app with search/query params, how to securely authorize with third party endpoints using OAuth, keep sessions open/reconnect when expired and after establishing a secure connection, pull data into a component. One area of improvement I saw in the video is that some of the development bugs could have been caught earlier by installing ESLint and I'd recommend all beginners (and really anyone who wants to take an app to production) use ESLint and ideally TypeScript as well to make their lives easier when debugging. Thanks!
Hi! You saved my life, i've been watching a lot of videos and posts on how to do data fetching and most of them weren't working. I have only a small question. Im using nextUI table to try and render some users, the issue is that for the table to work the component must be "use client" (client side) And due to this, i can't make the component asynchronous, so in this kind of situation, how can you make a fetch from client side on demand?
You can make a fetch in the api folder and then make a call to your backend from your client component. This will fix your problem. So, make a fetch request in a useEffect to your backend api route. /api/users and then create your server side code there.
During deployment on vercel, i got a typeError on user variable. Seems the user is null or undefined initially and can't have the map array method on it. Please why is this?
Hey, great tutorial. I have a question: how to handle input on change data fetching without routing or using link. Basically data should be visible on the same page without redirecting on the same page just update the url(single page app)
Thank you soo much for explaining everything in detail. i Just have one question what if we want to filter the data in server side .I am using use Effect that make it obvious it become a client side but i want to do it in server side way so what should i do? should i make another Api request or what. please provide your feedback thankyou 💝
First off thank you for subscribing to my channel! And you can us the filter method in your server side code instead of the useEffect Hook. You would want to use the filter higher order function and then send the filtered data to client side through json data (NextResponse.json(filtereddata)
Hi Bret can you please tell whether this fetch that stores only cache data will also cache data for our rest api as well where in we fetch data from database or this caches data only when we call api from external sources?
I am reading the docs and it says "Second, you can move data fetching lower in the component tree to only block rendering for the parts of the page that need it. For example, moving data fetching to a specific component rather than fetching it at the root layout." I am looking at the data-fetching docs for app router. Is that what you showed at 33:00? Great Video btw!
i wrapped my in layout.js file with a context provider in which I pass fetched data from server (I use GET function with fetch). Down in the app I update that data on the server with another POST function (uses fetch). Why the layout is being triggered to rerender every time the POST function fetches data to the server?
@@brettwestwooddeveloper thanks. My project was set up this way. The problem was due to my fetch function on the API route having been writing to file which was triggering file watcher to rebuild the entire project ☠
How would we fetch local data like from an ORM like prisma? Create a separate backend? Are you supposed to fetch your own api routes? Caching custom prisma functions never worked for me
Great video! But I have one question: do we always get params as a default prop on every page ? Or do we have to specify and pass it in like in other react components?
how about jest unit test async server components,? and how solve route handler fetch URL when run local npm run build, its require absolute path online, how solve when actually I don't have ?
Hey, Great tutorial. But do you know they an issue with the next js 13.4 that after the build, dynamic path [id] won't work. Static export is not supported.
Thank you for this video, I have a question, how i do handle the dynamic route if write url /users/11 but there are only 10 users? How I show that the page not exist?
you can create an error.jsx file or notFound file as well. I can make a video going over that, but nobody should be manually typing 11. The docs currently go over those 2 file conventions
Hi, I have a question: I am trying to convert a regular React application over to Next.js. In my original application I use CancelTokens (axios) with useRef hook to clear out cancelled api calls, but of course using a useRef hook requires the component be rendered by the client ("use client"), which defeats the purpose of server side rendering. Do I just not need to cancel aborted calls when doing server side rendering? Or is there another way to do it that still allows me to use server side rendering?
Can any tell me one thing he's fetching data with get api but I have post api how to implement and also have Authorization in header and usertoken save in redux we can not use hook in server component tell so I stuck pls tell me solution
fallback is not being displayed for me. the three second timeout happens but does not show the user name with "Loading..." before loading the data, it does nothing. I even cloned your code to test but got the same result. Thoughts?
There is a lot of differences, fetching data server allows for a quicker response time, hides keys on the servers, better for cyber protection and much more. Here is a link to the Next.js 13 docs as well that lists the benefits of both: nextjs.org/docs/app/building-your-application/data-fetching
The fetch in the beginning is not cached. Returns new dog image on reload. Is this expected in next js latest version ? or am i missing something here ?
By default, Next.js automatically caches the returned values of fetch in the Data Cache on the server. You would have to specify you don't want the data cached
Can some body help me ? I have to create an filter, and call an api with the filter element. So how can i call server side api call with client side state ? params defined by client : const [filter, setFilter]= useState([]) call server api : const data = getProducts(filter)
hi, i dont remember but nextjs13 have a thing like hover a link and it auto fetch before access the page, could you help me find out ? thank you. and sorry for my english
Yes I have a video on it. It's my Link & Router video about Next.js 13. You will only be able to prefetch data and hover a link if application is in production not in development.
And booom, just like that I threw away 15 minutes of my life. Thank God I skipped through the video and didn't watch all 40 minutes cause he didn't show the most crucial thing- how to combine async and hooks (server and client). At 11:25, instead of constantly reloading the page there should be some useState, and some button that we can click on and each time we click we get the new image. That's actually the real issue that we have with the new router not this bs...
@@brettwestwooddeveloper thanks dude, I'm good-looking at least. You know, that's when you don't need to have funny haircuts or favorable lighting to not look like tiny $h1t. Cheers
Hi Brett, I watched your tutorial and it is perfect, thank you very much, but there is a small problem, the userPage page works but {user.name} does not work for me, you have a solution I can't see the detail page, I would be very grateful if you could help me. :)
Thanks for watching my video! And yes I can help you out. It can be a few issues. First I would console log the user.id to make sure you are getting a value. If you aren't getting a value then maybe the url for the fetch request is wrong. Let me know and keep me updated
Thank you. I like how you explain each step slowly so a beginner like myself can follow and understand.
40 mins but worth it. Everything is explained really good. Thanks a lot for video!
Thank you so much! and thanks for tuning in!
I couldn't help it but I must subscribe, like and comment because the one thing I was looking for all these days you are the only one that explained it to my satisfaction thank you. I wish many people knew about this channel.
Thank you so much!
Simply the best!! Thumbs up Brett!!!
Thank you!
The best tutor fetch api in next js🎉🔥🔥
Many many thanks
Thank you very much man, greetings from the Dominican Republic. - Subscribed!
Thanks!
Thank you so much Brett, for sharing such a wonderful tutorial, you did not even a miss a single thing in the tutorial. It may be a long tutorial for some guys but you explained each and everything for pro and beginners. Keep generating the tutorials. Subscribed you.
Thank you for the kind words! Appreciate it.
I have searched everywhere for a guide like this and nobody has came close to this. Thank you! You are the only person who seems like they know what they are doing with app router on youtube
Thank you so much! I am glad you were able to find me!
This is exactly what i was looking for. A recent Next.js 13 Data Fetching tutorial. Thanks God, thanks Brett.
No problem! Glad I can help!
I am so thankful the video is amazing.....
I watched a lot of videos and only this one helped so far Thanks buddy.
best tutorial😍
Thank you!
Just found your channel and subscribed, i like how your tutorials are long and in depth about concepts to understand instead of just project tutorials(those are great every now and then), and i dont think 10 or 15 minute short videos can do the same.
Thank you for the kind words!
Thank you so much, I have been looking for new Nextjs tutorials, and this is the perfect one ! trust me, you are the only one that answered the questions in my head, all other suggestions by the docs/chatgpt/websites were either wrong, out of date or incomprehensible, keep going !
Thanks Brett that was very well explained!
You are welcome! Thanks for tuning in!
I appreciate you using the docs. Thanks for what you do
Thank you! and no problem!
Thank you Brett! Your channel helps me a lot for my job.
Happy to help!
Very well explained!! This was exactly what I was looking for
Awesome! Thanks for tuning in!
Nice video, have been looking for a tutorial like this, all topics were very clear, new sub
Thank you for the sub! Glad you enjoyed it!
good introduction to fetch in next13
Thank you! Glad you liked it!
Great video that delivers on its promise (pun intended)
Would have liked to see content around route handlers since this is still a confusing topic for someone coming from a non-nextjs react app.
I would also love to see an advanced video covering the more complex problems such as launching the app with search/query params, how to securely authorize with third party endpoints using OAuth, keep sessions open/reconnect when expired and after establishing a secure connection, pull data into a component.
One area of improvement I saw in the video is that some of the development bugs could have been caught earlier by installing ESLint and I'd recommend all beginners (and really anyone who wants to take an app to production) use ESLint and ideally TypeScript as well to make their lives easier when debugging.
Thanks!
Thank you so much!
Just found out this video and subcribed, thanks alot, keep up the good work
Thanks for the sub!
Very well explained. Thank you! Great tutorials. Subscribed
Thank you so much!
Was Helpful. Great Content.
Thank you so much!
Awesome video!! Thank you so much!!
You are welcome! Thanks for tuning in!
Great tutorial, just what I was looking for. 😉
Glad I could help!
Thanks,very useful video!
No problem, thanks for tuning in!
Great video Brett! Always putting out quality content 🔥 thank you!
Thanks!
Very concise explanation. You're Awesome thanks
Thank You! Glad I can help!
good teaching, keep it up !
Thank you!
thanks man,god bless you
You are welcome!
Today I discovered your channel, its amazing bro. Btw we are working on same board thx everthing.
Thanks and welcome!
very nice tutorial, thanks a lot ❤
You're welcome 😊
Great video! Thanks
Hi! You saved my life, i've been watching a lot of videos and posts on how to do data fetching and most of them weren't working. I have only a small question.
Im using nextUI table to try and render some users, the issue is that for the table to work the component must be "use client" (client side) And due to this, i can't make the component asynchronous, so in this kind of situation, how can you make a fetch from client side on demand?
You can make a fetch in the api folder and then make a call to your backend from your client component. This will fix your problem. So, make a fetch request in a useEffect to your backend api route. /api/users and then create your server side code there.
During deployment on vercel, i got a typeError on user variable. Seems the user is null or undefined initially and can't have the map array method on it.
Please why is this?
sounds like a TypeScript error, so you need to have a condition before the error like if (user) {your code}. Something like that.
@@brettwestwooddeveloper okay
I'll try that now.
Hey, great tutorial.
I have a question: how to handle input on change data fetching without routing or using link. Basically data should be visible on the same page without redirecting on the same page just update the url(single page app)
Should be able to use a router.refrsh(). This should be placed in a finally block or the try block. Hope this makes sense
Your amazing man !!
Thank you soo much for explaining everything in detail. i Just have one question what if we want to filter the data in server side .I am using use Effect that make it obvious it become a client side but i want to do it in server side way so what should i do? should i make another Api request or what. please provide your feedback thankyou 💝
First off thank you for subscribing to my channel! And you can us the filter method in your server side code instead of the useEffect Hook. You would want to use the filter higher order function and then send the filtered data to client side through json data (NextResponse.json(filtereddata)
One of the cleanest explaination i have ever heard in English 🤍its that good uk....
Thank you! Glad you liked it!
Hey Brett, what extension were you using for the code completion that was populating in 6:44?
Hi, that is GitHub Copilot
Sir you saved my ass thank u very much .... Appreciate it 👍
You are welcome!
Hi Bret can you please tell whether this fetch that stores only cache data will also cache data for our rest api as well where in we fetch data from database or this caches data only when we call api from external sources?
It should cache all data by default, external or not.
Hello Brett. Instead of using dummy JSON API, can we use direct data fetching from Database and implement "revalidate" time? Please sugegst.
I am reading the docs and it says "Second, you can move data fetching lower in the component tree to only block rendering for the parts of the page that need it. For example, moving data fetching to a specific component rather than fetching it at the root layout." I am looking at the data-fetching docs for app router. Is that what you showed at 33:00? Great Video btw!
Thank you! And I yes I think you are referring to the concept of fetch data where needed even if it has been already fetched.
what extension are you using at 15:49 that gives you those code suggestions in the gray color on the editor?
Github copilot
I noticed that the Suspense program did not have a "use client". Thought that all react import will require client...
i wrapped my in layout.js file with a context provider in which I pass fetched data from server (I use GET function with fetch). Down in the app I update that data on the server with another POST function (uses fetch). Why the layout is being triggered to rerender every time the POST function fetches data to the server?
Providers must be defined in client outside and then imported into layout file
@@brettwestwooddeveloper thanks. My project was set up this way. The problem was due to my fetch function on the API route having been writing to file which was triggering file watcher to rebuild the entire project ☠
THANKS SO MUCH
You're welcome!
How would we fetch local data like from an ORM like prisma? Create a separate backend? Are you supposed to fetch your own api routes? Caching custom prisma functions never worked for me
Hi Brett. Do you perhaps have a video on how to do updates without having to mess with rest api?
what do you mean updates?
@@brettwestwooddeveloper making post / put requests (updating a resource)
Great job bro ... tks 🎉
can you show a fix for CORS while using localhost API , getting an fetch error from strapi backend
Can i use next js loading page instead of suspense in my code?
thank you :)
You are welcome!
Great video! But I have one question: do we always get params as a default prop on every page ? Or do we have to specify and pass it in like in other react components?
You must specify like react components
@@brettwestwooddeveloper I see thanks.
Please create a tutorial video on deploying a Next.js app to a Digital Ocean Droplet. This would be very helpful.
Thanks for tuning in but I have never done this before.
@@brettwestwooddeveloper If it's possible for you, please give it a try.
Hello Brett, how can I have access to redux states as well as dispatch actions in a server component?
Not 100% sure, never tried it, but since its state maybe not
how about jest unit test async server components,? and how solve route handler fetch URL when run local npm run build, its require absolute path online, how solve when actually I don't have ?
Hey, Great tutorial.
But do you know they an issue with the next js 13.4 that after the build, dynamic path [id] won't work. Static export is not supported.
Subbed
Thanks!
Thank you for this video, I have a question, how i do handle the dynamic route if write url /users/11 but there are only 10 users? How I show that the page not exist?
you can create an error.jsx file or notFound file as well. I can make a video going over that, but nobody should be manually typing 11. The docs currently go over those 2 file conventions
Hi, I have a question: I am trying to convert a regular React application over to Next.js. In my original application I use CancelTokens (axios) with useRef hook to clear out cancelled api calls, but of course using a useRef hook requires the component be rendered by the client ("use client"), which defeats the purpose of server side rendering. Do I just not need to cancel aborted calls when doing server side rendering? Or is there another way to do it that still allows me to use server side rendering?
Can any tell me one thing he's fetching data with get api but I have post api how to implement and also have Authorization in header and usertoken save in redux we can not use hook in server component tell so I stuck pls tell me solution
Are you using Copilot or something similar?
yes I am using copilot
fallback is not being displayed for me. the three second timeout happens but does not show the user name with "Loading..." before loading the data, it does nothing. I even cloned your code to test but got the same result. Thoughts?
I would honestly have to see the code. I wouldn't be able to tell you.
How can i refatch on demand the data ? Let's say I want a button that will trigger a refresh on the getDogs, how can I do that ?
You can do this multiple ways. You can use a window.location.reload() or other methods as well.
8:21
May I know what VSCode Addons you use for that NextJs auto complete tag snippet?
It is GitHub CoPilot
Would it be better if we use ReactQuery for data fetching ?
The fetch web api is recommended based on docs for this specific framework
what is the difference between fetching data in server side and client side?
There is a lot of differences, fetching data server allows for a quicker response time, hides keys on the servers, better for cyber protection and much more. Here is a link to the Next.js 13 docs as well that lists the benefits of both: nextjs.org/docs/app/building-your-application/data-fetching
"For more content just like this" sounds so familiar 😂
How do I fetch server side rendered data from a component that lives on the client side? Please make a video in it
If you have to fetch it that way, then just make an api backend and run a GET request to it
@@brettwestwooddeveloper thanks sir❤
please do PUT, PATCH and POST also. And how can I revalidate data fetching after a POST request?
export const revalidate = 60 // revalidate this segment every 60 seconds
The fetch in the beginning is not cached. Returns new dog image on reload. Is this expected in next js latest version ? or am i missing something here ?
By default, Next.js automatically caches the returned values of fetch in the Data Cache on the server. You would have to specify you don't want the data cached
@@brettwestwooddeveloper Thanks. I think caching only works in production. How is it working in dev for you ?
Thank you soo muchhhhhhh
What will happen, if the endpoint return 404, 401 or any error?
hi can someone help me please i want to send data from root page to child of another child can use redux state management?
how did he just create that url for fetching posts out of thin air? Would be nice if someone could explain this to me
which URL, I used a few URLs, I can explain which one
@@brettwestwooddeveloper /post?userId=${id}
Can some body help me ? I have to create an filter, and call an api with the filter element. So how can i call server side api call with client side state ?
params defined by client : const [filter, setFilter]= useState([])
call server api : const data = getProducts(filter)
you must use the filter higher order function. That will just store the filter information into state
hi, i dont remember but nextjs13 have a thing like hover a link and it auto fetch before access the page, could you help me find out ? thank you. and sorry for my english
Yes I have a video on it. It's my Link & Router video about Next.js 13. You will only be able to prefetch data and hover a link if application is in production not in development.
@@brettwestwooddeveloper thank you sir
How to catch errors and do not prevent the whole site from loading?
Sorry confused on what you are trying to ask
@@brettwestwooddeveloper Error catching
Please show us, how to handle error at the time of data fetching. like, 404, 500, 400
Client side fetching ?
thanks bro
You are welcome!
What about error state?
error.js file
Please make video how to fetch Twitter trending data using nextjs
Great vidoe man, and great explination i have trouble before even with nextjs docs, keep it up sub from me and notifaction on also.
And booom, just like that I threw away 15 minutes of my life. Thank God I skipped through the video and didn't watch all 40 minutes cause he didn't show the most crucial thing- how to combine async and hooks (server and client). At 11:25, instead of constantly reloading the page there should be some useState, and some button that we can click on and each time we click we get the new image. That's actually the real issue that we have with the new router not this bs...
I’m glad I contributed to wasting 15 minutes of your life. Maybe your whole life is a waste?🤔
@@brettwestwooddeveloper thanks dude, I'm good-looking at least. You know, that's when you don't need to have funny haircuts or favorable lighting to not look like tiny $h1t. Cheers
@@brettwestwooddeveloper Well that's a very gay thing to say dude... (dont delete replies I've read that)
terrible audio, I hear popping and crackling in my speakers, I am out
bye
WHERE IS REVALIDATE?????????
Hi Brett, I watched your tutorial and it is perfect, thank you very much, but there is a small problem, the userPage page works but {user.name} does not work for me, you have a solution I can't see the detail page, I would be very grateful if you could help me. :)
Thanks for watching my video! And yes I can help you out. It can be a few issues. First I would console log the user.id to make sure you are getting a value. If you aren't getting a value then maybe the url for the fetch request is wrong. Let me know and keep me updated