Next.js 13 Crash Course Tutorial #11 - Client Form Component
Вставка
- Опубліковано 26 сер 2024
- In this Next 13 tutorial series, you'll learn the basics of Next.js to make a simple project, using the new app router & server components.
🚀🥷🏼Access the entire Next.js 13 Masterclass course on Net Ninja Pro:
netninja.dev/p...
➡️ Use promo code NEXTNINJA50 for 50% off!
📂🥷🏼 Access the course files on GitHub:
github.com/iam...
📂🥷🏼 CSS File from course files:
github.com/iam...
💻🥷🏼 React Tutorial:
netninja.dev/p...
🔗🥷🏼 Next.js docs - nextjs.org/docs
🔗🥷🏼 CSS modules in Next.js - nextjs.org/doc...
🔗🥷🏼 VS Code - code.visualstu...
![Lp. Сердце Вселенной #1 НАЧАЛО ПУТЕШЕСТВИЯ [Новый сезон] • Майнкрафт](http://i.ytimg.com/vi/380Q7gLWGvk/mqdefault.jpg)
One of your gangs waiting for Tutorial 12 from Turkey. Thank You
You're something else, man.
Great job here, well done!
Thanks :) that means a lot
I received "Error: NextRouter was not mounted."
The way I fixed it was I changed "import { useRouter } from 'next/router';" (it was automatically imported that way for me, it might be for you, too) to "import { useRouter } from 'next/navigation';"
A very easy thing to overlook.
Thanks for this!!!
Thank you so much
Thank you
Excellent tutorial my man! Keep up the good work.
Glad you liked it!
I get a sense anticipation with your explainations 😅 its really engaging
@14:00 was wrapping my head for hours about router.push re-validation!
Exactly the info I was looking for
My ticket shows straight away 😂
it doesnt for me; even after using refresh()
I believe there is a simple way to even make the form server side, but then i will doubt why i use react in the first place hhh.
By the way, great content 👌 sadly in my country, we can't pay online so i will give you a like ❤
how to show #contact section of a long page, after submitting form using server actions with js disabled. #contact section is at last of the page.
thanks
what do you do when you have a 3rd party app like mailchimp with a form. I keep getting cors errors
It can´t be that you have to refresh all routes, there has to be a way to filter that down :D
Can we use SWR for this also?
Why the browser does not send a new request for the tickets page if we disable cache?
"It's being done by browser side is so vague!
somehow router.refresh() isn't working for me? i still have to refresh the tickets page every time a create a new ticket to view it in the ticket list. any work around?
thank you
Thanks a lot.
GOAT
can a server component be part of a client component??
Trivia: In the github repo #11 , the `Body` lable is still `Title`.
How did you access the route '{your_url}/tickets/create' when you have the '{your_url}/tickets/[ticketId]' dynamic route?
we created a new folder named "create" under tickets folder and we also have "[id]" folder which works as dynamic route, so both are different routes.
So that's a client-side data fetching, isn't it?
can someone help me please since i am getting a 400 error request in the console on my browser when i click on submit ticket.
need use 'next/navigation' for useRouter
@net ninja
the router.refresh() doesn't work for me
i have to manually refresh the page to see the updated ticket list
check your revalidate value if its 0 in the TicketList.jsx file! that was the fix for me
@@justinkim2330 this is not the solution, mine works no matter revalidate is 30 or 0, @commentator2047 found solution later in comments, he reshuffled push and refresh, i.e. first push then refresh.
Hey bro!
I did follow everything as you are teaching in this tutorial series. But in this lesso, I got an error. Basically, this is seems to be because, I'm using the latest Next.js version which is known as Next.js v14. I'll write down the error what I'm getting whem I'm submitting the form to create a new ticket!!!
Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".
This is the error I got. Please currect me if you can
Thank you!!!
Thank you very much for the amazing videos, I have a question. Why didn't you just do that with the adding button? Is there a difference?
{isLoading ? 'Adding...' : 'Add'}
No difference he just used another method of optional rendering &&, u could use ternary operator ?: or if newbie you can even use "if else"
till 8:15
This is great..., one issue however. When I submit a ticket it does not show the new ticket on the tickets page unless I manually refresh the page. I've copied your code exactly. What might be preventing the refresh?
13:03
I have the same issue, even if I have added "router.refresh()" it does not work. Does someone has an idea?
Make sure on your TicketList component that 'revalidate' is set to 0 like this
`revalidate: 0`
will it makes more sense to refresh after the push?
its 0 for me; still the same issue@@passioncorners
9:02 / 14:27
how did you created the "/ticket" endpoint for pushing a new ticket into the .json file ? it is not covered.
You have to replaced json-server with database such as firebase, appwrite, mongodb, etc.
it is working fine on json-server@@maskman4821
check e.preventDefault();
Ok good
please cover angular 16. since your angular play list is 7 year old. Thank u so much. in advance.
Hey there Net Ninja, thanks for this. I wanted to ask how can i persist the typed in value in input field? EX: i have a page.tsx in signup folder -> signup/page.tsx , this one has the form in it and is server component. When i hit the sign up button, it goes to signup/route.ts with method post in . The route.ts for signup handles all the database management plus return NextResponse.redirect() etc as required. This is also server side. Both are server side. I just want to know how can i persist the input typed value so when i click the signup button i need to persist that typed in value and not make it disappear?