If you are getting "cannot fetch" error or otherwise trouble connecting to the server in your localhost, you can try converting the address from localhost -> 127.0.0.1 and that should help. Thanks for Raul for figuring this out! 🙌
Hey, I did the same thing but the refresh call isnt working. from my research on the next docs its because my fetch for the server component does have "{cache: "no-store"}" and so i have to call a revalidate function to make a new server component request and then refresh.
I feel like, they should have make the app folder client by default and make the functions server side if they have async on them. Going out and saying "Hey guys, all of yours hooks and libraries will not work in your main folder anymore, unless you put "use client" up top", was a bold, but a problematic way I feel like, I loved layouts but let us opt-in for server components. AlsoTuomo can you make a video where, you mutate data with prisma.orm inside the components without the api layer? I wanna see how you can do the post put delete update stuff with client side interactivity from the client component, is there any easy way to trigger stuff in backend in the component with just client side interaction I wonder.
Yep. Next.js 13 feels like a whole new framework. I don't know how to feel about "every component is a server component by default unless stated otherwise". Migration from Next.js 12 is going to be very difficult for most of the projects.
Thanks for the comment! That is definitely something I am looking into (mutating data with prisma or using firebase) and actually not yet sure what the best way to accomplish that is. At the moment I am thinking that using just api routes for post/put/delete is the most convenient way but tbh gotta look more into this!
This is so interesting, especially the refresh() part. But what if you have the TodoList in one page, and the AddTodo in another one? How do you refresh the List from the Add page? Because router.refresh() refreshes the current page, but how can you refresh a different page? Thanks in advance! This is blocking my progress so hard xD
I have a one login from inside my client component. I want to call my login api with my secret keys. Can't import my secret keys in my client component So where I put the api request
You are right, you should not put api keys to client components. You can create an api route for example that handles the login. Check out my video about nextauth, there we do a login funcrionality. Hope that helps!
I have download repository, but when i install it. through this command, >>yarn install>> i got error yarn : The term 'yarn' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. At line:1 char:1 + yarn install + ~~~~ + CategoryInfo : ObjectNotFound: (yarn:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException Kindly guide.
Sorry to hear that! Not sure what the problem is, I’d first check with chrome dev tools that the request to the api is fired when checking the box and if not, then it must be some frontend problem. Hope this helps!
I had an similar Problem. First i checked the state od the todos on the api and they changed but i had no change on the frontend. Next step was to console.log the ids. They had been different... Culprit was fetch in my case. Somehow the requests had been cached and i added "mode: 'no-cache'" to the request and that seemed to fix the Problem. I hope you can debug what went wrong :)
Hii Tuomo , I triend the same But I'm getting an error, "Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead."
@@TuomoKankaanpaa Greetings, thanks for answering.... Sorry, my English is very bad, I did not understand "Unfortunately I dont atm" (ATM???) I'm from Venezuela I use a translator but your videos are to the point and have been very useful.... DISCORD is a free platform and it serves to give feedback to your community.... I hope to see your first 10,000 sub heading to 100,000 sub and many more many blessings att, Jose Grillo ESPAÑOL Saludos gracias por contestar.... Disculpa mi ingles es muy malo no entendi "Unfortunately I dont atm" (CAJERO AUTOMATICO???) soy de Venezuela uso traductor pero tus videos van al grano y me han sido de mucha utilidad.... DISCORD es uan plataforma gratuita y sirve para hace feedback con tu comunidad .... Espero ver tus primeros 10,000 sub rumbo a los 100.000 sub y muchos mas muchas bendiciones att, Jose Grillo
@@Grishopping Great to hear that you like the videos and thank you! I don't have a discord at the moment. Maybe I will create a discord server some time in the future. Greetings to Venezuela! :)
I have a link to the api repo code in the video description. You can open that, then clone that repo, open it in your vscode and run yarn install and yarn start (or yarn dev) and then you will have the api running locally. The address will be something like localhost:3000, it will be displayed in the terminal after you run yarn start (or yarn dev)
Awsome video! How do I start with Next 13? You didn't show how to create the application? How do I install Next 13? Should I install first the old version and then update it? I cannot even start! When to use "npm run dev" and "npm run build" ? What package should I install to use "npm"? Thanks
When you create new project with create next app, it will automatically have version 13. Here is easy steps on how to get started by setting up the project: beta.nextjs.org/docs/getting-started
I really appreciate this video! As a beginner I was confused how to use server or client components. Thank you very much got this example, it helps me a lot!
Getting this error when i am trying to delete item from todo list. any solution for it? DELETE localhost:3000/api/todo/delete?id=863a39be-3c96-473d-a800-b458ec5bfabd 404 (Not Found) Code: async function deleteTodo(id, refresh) { await fetch(`/api/todo/delete?id=${id}`, { method: "DELETE", }); refresh(); }
When I am trying something like this as my own I am getting lots of error, Whole thing new and with your explanation everything is clear 😀 Thank you for making this video .
@@TuomoKankaanpaa Thanks for replay. I've done everything like on the video, and now when I've add rewrite rule , application throws "GET localhost:3000/api/todo/update 400 (Bad Request)". In next config I've specified localhost:3001
@@mufa4567 Make sure you have the correct port for the server and you can also try to replace "localhost" with "127.0.0.1". In some situations it might be that your environment doesn't understand localhost and you need to define it as an ip. If those don't help, try looking into the request response and server logs if there is something that point you to the right direction
In your video I don't see that you created the folders /api/todo where the file list.js is saved. I cloned the repository code but it doesn't work. the check boxes and delete buttons for example do not appear. Thank you for your help.
Thanks for the comment! Here are links to the repos, so the "Mock api" is the one that handles "saving" and returning the todos and the "Todo app" repo is the code we do in the video. Mock API we use in the video: github.com/tumetus/json-api Todo app code: github.com/tumetus/next-js-13-todo-app-example
@@TuomoKankaanpaa Thanks for your answer. What is the difference between the two codes? I cloned the todo app code (second) but I couldn't start the server. since I get an error message. Should I first install something like "npx create-next-app@latest --experimental-app" Why not making a video explaining step-by-step how to clone your code and start + difference between both codes. thank you
You need to clone the both repos and then run yarn install in both repos and then start the dev server in both repos with yarn dev. The todo repo is the actual app that we build in the video and the mock api repo is just a dummy server we make requests to, with the todo app. Hope this helps!
Watched 10 minutes and I’m quite impressed with your pace, I’ll come to this later, I plan to use nextjs very soon, hopefully you’ll cover jwt authentication next, preferably with refresh token . Subed 😊
Thanks! I already have bunch of videos about next.js 13 on my channel, you can find them from the latest uploads. I’m also planning on making more tho!
Thanks a lot! I have actually been contemplating about making a course but not sure yet. If you want to learn more about next.js 13, I created a playlist which has all my next.js 13 videos so that's a good place to start :) the playlist is here: ruclips.net/p/PLxCkFZQohykk8ejbV94XbigHSONNq4m3C
If you are getting "cannot fetch" error or otherwise trouble connecting to the server in your localhost, you can try converting the address from localhost -> 127.0.0.1 and that should help.
Thanks for Raul for figuring this out! 🙌
Thanks
Hey, I did the same thing but the refresh call isnt working. from my research on the next docs its because my fetch for the server component does have "{cache: "no-store"}" and so i have to call a revalidate function to make a new server component request and then refresh.
Really Tuomo you made me understand nextjs 13 better than other nextjs RUclips tutorials. Thank you 🙏
That is great to hear thank you! 🙏🙌
I feel like, they should have make the app folder client by default and make the functions server side if they have async on them. Going out and saying "Hey guys, all of yours hooks and libraries will not work in your main folder anymore, unless you put "use client" up top", was a bold, but a problematic way I feel like, I loved layouts but let us opt-in for server components. AlsoTuomo can you make a video where, you mutate data with prisma.orm inside the components without the api layer? I wanna see how you can do the post put delete update stuff with client side interactivity from the client component, is there any easy way to trigger stuff in backend in the component with just client side interaction I wonder.
Yep. Next.js 13 feels like a whole new framework. I don't know how to feel about "every component is a server component by default unless stated otherwise". Migration from Next.js 12 is going to be very difficult for most of the projects.
Thanks for the comment! That is definitely something I am looking into (mutating data with prisma or using firebase) and actually not yet sure what the best way to accomplish that is. At the moment I am thinking that using just api routes for post/put/delete is the most convenient way but tbh gotta look more into this!
We've been seeing you a lot lately, Tuomo 😁
Always a pleasure to watch your videos!
Glad to hear! Yeah it’s nice to upload more lately!
what about using relative url paths for API calls if the API handlers are local?
This is so interesting, especially the refresh() part. But what if you have the TodoList in one page, and the AddTodo in another one? How do you refresh the List from the Add page? Because router.refresh() refreshes the current page, but how can you refresh a different page?
Thanks in advance! This is blocking my progress so hard xD
Once you navigate to another page, that's already a refresh/reload. You don't need to specify a new refresh.
I have a one login from inside my client component. I want to call my login api with my secret keys. Can't import my secret keys in my client component So where I put the api request
You are right, you should not put api keys to client components. You can create an api route for example that handles the login. Check out my video about nextauth, there we do a login funcrionality. Hope that helps!
@TuomoKankaanpaa WHY are we using 'POST' method instead of 'PUT' or 'PATCH' for updating the checked behaviour of checkbox ???
You could definitely use PUT or PATCH too, that's good point!
Is rewrite ready for production?
best as always thanks...
Cheers!
Ty, I was losing my mind with refresh stuff : )
Cheers!
I have a question as I am trying to learn next js,is the use of API really necessary to make this app?
I think it's a great option for this app but surely you could save things in memory or something like that :)
I have download repository, but when i install it. through this command,
>>yarn install>>
i got error
yarn : The term 'yarn' is not recognized as the name of a cmdlet, function, script file, or operable
program. Check the spelling of the name, or if a path was included, verify that the path is correct and try
again.
At line:1 char:1
+ yarn install
+ ~~~~
+ CategoryInfo : ObjectNotFound: (yarn:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
Kindly guide.
Yarn is a package manager like npm, you need to first install it, see here for more info: yarnpkg.com/getting-started/install
@@TuomoKankaanpaa okay. Sir. I have installed. And it is running. Thnx for your kind response.
@@sheeraz-ud-din4948 Great!
Nice ❤
Cheers!
I've been doing it the exact same way as you've taught , but, when I check the box, there's no change in the api. Am I missing something?
Sorry to hear that! Not sure what the problem is, I’d first check with chrome dev tools that the request to the api is fired when checking the box and if not, then it must be some frontend problem. Hope this helps!
I had an similar Problem. First i checked the state od the todos on the api and they changed but i had no change on the frontend. Next step was to console.log the ids. They had been different... Culprit was fetch in my case. Somehow the requests had been cached and i added "mode: 'no-cache'" to the request and that seemed to fix the Problem.
I hope you can debug what went wrong :)
Not for beginners as nothing have been shared regarding setting of environment
Thanks for your comment! What would you have liked to see more?
I found an error in connecting api with my local server
Did you got it working? :)
Hii Tuomo , I triend the same But I'm getting an error,
"Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead."
Hi! Make sure you have the data fetch method exactly as it is in the video. Maybe you are missing .json() from the end -> "return todos.json()"?
Thanks for sharing... Friend, do you have a discord channel?
Glad to have you here! Unfortunately I dont atm, maybe sometime in the future
@@TuomoKankaanpaa Greetings, thanks for answering.... Sorry, my English is very bad, I did not understand "Unfortunately I dont atm"
(ATM???) I'm from Venezuela I use a translator but your videos are to the point and have been very useful.... DISCORD is a free platform and it serves to give feedback to your community.... I hope to see your first 10,000 sub heading to 100,000 sub and many more many blessings
att, Jose Grillo
ESPAÑOL
Saludos gracias por contestar.... Disculpa mi ingles es muy malo no entendi "Unfortunately I dont atm"
(CAJERO AUTOMATICO???) soy de Venezuela uso traductor pero tus videos van al grano y me han sido de mucha utilidad.... DISCORD es uan plataforma gratuita y sirve para hace feedback con tu comunidad .... Espero ver tus primeros 10,000 sub rumbo a los 100.000 sub y muchos mas muchas bendiciones
att, Jose Grillo
@@Grishopping Great to hear that you like the videos and thank you! I don't have a discord at the moment. Maybe I will create a discord server some time in the future. Greetings to Venezuela! :)
Hi please tell how to implement update functionality in the app.please explain.
not understand how u run api on local server
I have a link to the api repo code in the video description. You can open that, then clone that repo, open it in your vscode and run yarn install and yarn start (or yarn dev) and then you will have the api running locally. The address will be something like localhost:3000, it will be displayed in the terminal after you run yarn start (or yarn dev)
how to deploy this project on vercel
It should be deployable to vercel as any nextjs app! I have a video on the channel teaching how to deploy app to vercel, you should check that out!
Awsome video! How do I start with Next 13? You didn't show how to create the application? How do I install Next 13? Should I install first the old version and then update it? I cannot even start! When to use "npm run dev" and "npm run build" ? What package should I install to use "npm"? Thanks
When you create new project with create next app, it will automatically have version 13. Here is easy steps on how to get started by setting up the project: beta.nextjs.org/docs/getting-started
👍👍👍👍👍
👍👍
Hello, nice video 📸, one thing though , why your network tab in inspect is flooded with api request when you do 1 request to the server.
It's like that just in development mode and because I'm using the dev server. In production it won't be like that
how to use the api?
What do you mean?
Thank you so much for helping the community of next js 13. Learnt so much from your video
I’m glad to hear that! 🙏🙌
this video is awesome. plz make some small projects and implement more features of nextjs. Thanks a lot
Thanks a lot!🙏 thats a great idea, thanks!
@@TuomoKankaanpaa welcome
and thanks to you to consider it a great idea
I really appreciate this video! As a beginner I was confused how to use server or client components. Thank you very much got this example, it helps me a lot!
Great to hear, thanks for your comment!
Getting this error when i am trying to delete item from todo list. any solution for it?
DELETE localhost:3000/api/todo/delete?id=863a39be-3c96-473d-a800-b458ec5bfabd 404 (Not Found)
Code:
async function deleteTodo(id, refresh) {
await fetch(`/api/todo/delete?id=${id}`, {
method: "DELETE",
});
refresh();
}
Looks like it cant find the route (404), make sure u have correct url and correct port!
Nice video! Love the channel and your teaching style.
Greetings from Sweden.
Thank you Philip! Greetings to the neighbour! 🙌
When I am trying something like this as my own I am getting lots of error, Whole thing new and with your explanation everything is clear 😀 Thank you for making this video .
Glad that I could help!
Awesome
Cheers!
I don't see the Github link. thank you for adding it.
Here is the link for the server: github.com/tumetus/json-api
Hi! I have issue with cors. After adding mode:"no-cors" I still got error from the console. What can I do?
Hard to say for sure, one thing to try is add a rewrite rule to nextjs config, that might help!
@@TuomoKankaanpaa Thanks for replay. I've done everything like on the video, and now when I've add rewrite rule , application throws "GET localhost:3000/api/todo/update 400 (Bad Request)". In next config I've specified localhost:3001
@@mufa4567 Make sure you have the correct port for the server and you can also try to replace "localhost" with "127.0.0.1". In some situations it might be that your environment doesn't understand localhost and you need to define it as an ip. If those don't help, try looking into the request response and server logs if there is something that point you to the right direction
In your video I don't see that you created the folders /api/todo where the file list.js is saved. I cloned the repository code but it doesn't work. the check boxes and delete buttons for example do not appear. Thank you for your help.
Thanks for the comment! Here are links to the repos, so the "Mock api" is the one that handles "saving" and returning the todos and the "Todo app" repo is the code we do in the video.
Mock API we use in the video: github.com/tumetus/json-api
Todo app code: github.com/tumetus/next-js-13-todo-app-example
@@TuomoKankaanpaa Thanks for your answer. What is the difference between the two codes? I cloned the todo app code (second) but I couldn't start the server. since I get an error message. Should I first install something like "npx create-next-app@latest --experimental-app" Why not making a video explaining step-by-step how to clone your code and start + difference between both codes. thank you
You need to clone the both repos and then run yarn install in both repos and then start the dev server in both repos with yarn dev. The todo repo is the actual app that we build in the video and the mock api repo is just a dummy server we make requests to, with the todo app. Hope this helps!
went over my head
Hopefully you got something out of it tho!
@@TuomoKankaanpaa rewatched it. Got sense out of it.
Hey thanks for making this video. You're a great teacher.
Thanks a lot, really appreciate it!
Watched 10 minutes and I’m quite impressed with your pace, I’ll come to this later, I plan to use nextjs very soon, hopefully you’ll cover jwt authentication next, preferably with refresh token .
Subed 😊
Thank you very much, that is great to hear! And thanks for the feedback, I'll take that into consideration for sure when planning future videos!
@@TuomoKankaanpaa, thanks
Great vid. Would love to see more videos on nextjs 13. I like all the things they did with NextJs 13.
Thanks! I already have bunch of videos about next.js 13 on my channel, you can find them from the latest uploads. I’m also planning on making more tho!
Honestly a perfect intro brother. Covered all the fundamentals for me. Subbed 🙌🏻
Great to hear, thanks!
Hey we really love your way off teaching can you do for us a full next 13 course ?
Thanks a lot! I have actually been contemplating about making a course but not sure yet. If you want to learn more about next.js 13, I created a playlist which has all my next.js 13 videos so that's a good place to start :) the playlist is here: ruclips.net/p/PLxCkFZQohykk8ejbV94XbigHSONNq4m3C
Very helpful, thanks :)
Glad it was helpful!
Vere clear! Weiter so, 👏👏👏💯
Cheers!