Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
My COMPLETE React & Next.js course is out now! Find it here: bytegrad.com/courses/professional-react-nextjs
It's the #1 resource to master the latest React & Next.js. I'm very proud of it, my best work!
Interested in sponsoring me? I love working with sponsors. Please email me here: [email protected]
Пікірлер
So if I want to display simple login / logout buttons across my blog in the upper corner of the screen using layout my entire app will just be dynamically rendered?
Not if you use a client-side way of checking if the user is authenticated (e.g. the Kinde hook I showed - useKindeBrowserClient gives you access to the user)
So React is dead, because Vergel is paying the bills?
Hey brand! Considering the complexity of the Next.js middleware issue in production with Docker, I think it would be incredibly valuable if you could create a video tutorial or walkthrough addressing this specific challenge and issues of middleware with docker .
Brilliant pitch, great knowledge
This guy is a genius
Thank you very much ❤
Are you a brother of web dev simplified?
Can you do a production grade project with NextJs and custom server, including SSR, CSR access refresh token, protected routes, redis caching for data fetching, using opensource libraries
Hey you were telling that we are exposing a API endpoint in case of server actions. Then why can't we hit the api (server action) using something like postman? I think we just need to protect the frontend were the server action is used!!
Because Next.js has some additional protection in place. But still a best practice to add auth to them imo, also because you could accidentally use them on a public route (i.e. a route not covered by middleware or page auth check)
@@ByteGrad can you make a video on this and how to authenticate them using cookies? Or other that kinde auth
8:00 HOC will save the duplication right?
Yes, but realistically you will also have more fine-grained access control (e.g. based on admin role), so it becomes messy that way with HOC’s or utility functions imo. But for a simple app that’s fine I think
Thank you for making these beginner videos!
Do you know if Clerk makes the whole app dynamic by using a wrapper in the main layout even if I don’t explicitly use the utility functions that retrieve the session? Like const {…} = await auth()
middleware has caching. how can i validate every new request?
I use Layout because in all the pages that we create there is like a 95% chances that we'll use an API that is already verifyng the authentification. But it's a nice idea to use middleware, I'll try it in my next project!
I have a question regarding the using in Layout. Does it cause the entire page to be statically rendered?
It will make the whole app dynamically rendered, in addition to not properly protecting the pages
Hi, do you have a chance to make a video about Authjs v5? I would like to learn from you.
What theme are you using for VS Code?
Interested also
@@OpenDeepLearning INDMKB
I would say is Atom dark pro or one dark pro but a Darker version. Honestly I forget the exact names but u can maybe find them looking by those names lol hope he can confirm or correct me anyway ;)
Mine seems to be the same as his: "One Dark Pro Monokai Darker".
@@usinakenes thanks, that seems to be the one!
Brilliant! 🚀
when i update name, username in nextjs app it reflects in prisma studio but doesnt update in the app. but when i log out and then login it shows the updated data. (both in dev and build environment) what can be the possible issues??
Sounds like a caching issue. Try revalidatePath after updating the database
@@ByteGrad tried that too but doesnt worked. im using auth.js (credentials, google and github)
@@ByteGrad tried that too but doesnt worked. im using auth.js (credentials, google and github)
my reply is not showing in this comment box
i tried revalidatePath too but doent worked. im using auth.js for authentication
You are the best teacher on the planet 👍
There is no way out of dynamic rendering if we need the header component in use on the page right?
Why is the type parameter ( "<T>") after the function name or type name necessary? I'm guessing it's just for better performance of the TS compiler. It seems the input parameter type(s) (including the sequence in which they appear) and the output type are sufficient information to determine the relationships that need to be codified. I'm grateful for your video. The statement that "generics are specifications of codifying relationships between parameter and output types" is excellent and did make it easy to understand generics.
i have seen many student have issue in verticle-timline component, so here is solution, this code is paste in global.css file and see the magic😉 .vertical-timeline::before { background: #e5e7eb !important; } .dark .vertical-timeline::before { background: rgba(255, 255, 255, 0.2) !important; }
Great video thanks. I’ve been a salesforce developer for 12 years, basically Java but with many parts of the stack taken care of (database, hosting, styling etc..). I want to build web apps now. Do you think a react + next.js stack is a good place to start or would svelte and svelte kit be better? Looking to build great web apps without getting too lost in tech details. Thanks again 🙏
Interesting. I'm biased and would prefer React & Next.js (that's what's my channel about) but there are people that love Svelte.
@@ByteGrad awesome thanks. Maybe I’ll try both and see. React has so much support and info around it. I’ll def be watching more of your videos. Great content
bro deserves a raise, idfk what i did, but it finally worked
I wish you could make another video covering app router versus pages router, focusing on their folder structure. thx for the very clear explanation😁
Legend.
thanks man.
is your #8 point accurate? i tried printing out like what you did and it seems like the client component does not run on the server side "once" like you mentioned. hoping to clear up some confusion.
i realized when you have a client component takes in a prop, it DOES NOT run on the server side once. if it does not take in a prop, it will run on the server side once.
The reason for this behavior is that the props passed to a Client Component are not available on the server-side, as they often come from parent components or data fetching that happens on the client-side.
Brilliant video, thanks for hard work
thanks for this sir && need mores advanced tailwind className topic videos
Usefull video thanks..
Thank you for the update.
i prefer var since it's easier to type. and don't often re-assign variables. when you code a certain way, varl/let/const no longer matters
Amazing video! This was super helpful.
thank you
I added a className to the div wrapping the tweet component just like you did but I cannot make style changes even with !important 🫤
THANK YOU !!! My problem is solved now
I can only comply it when the main.scssis empty and it won't work when there is anything in it.
hello I am having a hard time at 8:31. I mine is not showing the data in console right after the upload of photo
Love your super fast point to point teaching approach
Great video. I am only 20mins in and it has already cleared up server/client confusion I had while starting to work with Nextjs.
Nice!
great tutorial
I recently joined your channel. I want to tell you that your channel has most advance content than anywhere else. ❤
Nice beatbox man 🤘🏻
{ "compilerOptions": { "target": "ESNext", "module": "CommonJS", "outDir": "./dist", "strict": true, "forceConsistentCasingInFileNames": true }, "include": [ "src/**/*.ts" ], "exclude": [ "node_modules" ] }
i love this guy
That was my exact issue running Node.js. These 2 fixed it: var path = require('path'); app.use(express.static(path.join(__dirname, 'public'))); Thank you!
Had an interview question related to create this from scratch :P
Amazing video, short and clear! You really saved me, thanks!
Thanks For your explanation about Generic, Wesley!!!! Great tutorial!