- Видео 11
- Просмотров 46 313
Taylor Lindores-Reeves
Великобритания
Добавлен 4 дек 2022
Welcome to the world of modern web development! My channel is your one-stop destination for mastering cutting-edge web technologies. I am here to simplify complex concepts, share best practices, and help you build future-ready digital applications.
With a deep focus on practical, project-based learning, we provide step-by-step tutorials, insightful tips, and comprehensive guides that cater to both beginners and advanced web developers. Each video is designed to enhance your understanding of core development principles and push your coding skills to new heights.
Whether you want to harness the power of TypeScript's strong-typing, explore the power of Next.js, or dive into other essential web development tools, we have got you covered. Beyond just teaching you how to code, we're committed to helping you understand what it takes to create scalable, high-performance web applications
Subscribe now to join a community of passionate developers and let's start coding the future!
With a deep focus on practical, project-based learning, we provide step-by-step tutorials, insightful tips, and comprehensive guides that cater to both beginners and advanced web developers. Each video is designed to enhance your understanding of core development principles and push your coding skills to new heights.
Whether you want to harness the power of TypeScript's strong-typing, explore the power of Next.js, or dive into other essential web development tools, we have got you covered. Beyond just teaching you how to code, we're committed to helping you understand what it takes to create scalable, high-performance web applications
Subscribe now to join a community of passionate developers and let's start coding the future!
Ultimate Guide: Function Calling with Vercel’s AI SDK RSC & NextJS 14
Join me in this comprehensive tutorial where I guide you through building a powerful crypto chatbot and stats interface with NextJS using Vercel’s AI SDK RSC package. This allows you to stream generative user interfaces to the browser using React Server Components & Server Actions.
I guide you through everything from setting up your environment, installing and configuring tools like TypeScript and Tailwind, and implementing code formatting with BiomeJS. You’ll learn how to handle API keys, manage environment variables, and stream various UI components for a truly unique user experience.
We incorporate tool calling in our AI integration which gives the LLM the ability to decide when and how...
I guide you through everything from setting up your environment, installing and configuring tools like TypeScript and Tailwind, and implementing code formatting with BiomeJS. You’ll learn how to handle API keys, manage environment variables, and stream various UI components for a truly unique user experience.
We incorporate tool calling in our AI integration which gives the LLM the ability to decide when and how...
Просмотров: 6 929
Видео
NextAuth v5 for Beginners: Simple Server-Side Auth in NextJS
Просмотров 610Месяц назад
In this video, learn how to set up AuthJS v5 beta for authentication on the server in NextJS 14. This tutorial covers configuring sign-in and sign-out processes, email-only authentication with sessions, and setting up NextAuth to handle everything on the server. We'll use a database for session management, and explore essential configurations, Prisma ORM integration, and securing pages and API ...
The Easiest Way to Generate Clean NextJS API Documentation
Просмотров 1242 месяца назад
First of all, sorry for the audio quality... This beginner-friendly tutorial guides you through the process of building a Todo List app using NextJS API Routes with the Next REST Framework package, which automatically generates clean API documentation for each API request. Throughout the video, you'll gain hands-on experience as we code the app's functionality including create, read, update, an...
Mastering Fetch API and Caching in NextJS
Просмотров 1,6 тыс.5 месяцев назад
In this video, I guide you through a useful approach to managing the Fetch API and caching in NextJS. I demonstrate how the Fetch API by default caches data, which can be beneficial for reducing server resource load, but may also present obstacles when trying to display real-time data updates. I reveal a workaround that involves setting the cache on a global level, which allows for setting cach...
How to Build an AI Assistant using NextJS (Vercel)
Просмотров 2,7 тыс.7 месяцев назад
Throughout this in-depth tutorial, we’ll learn how to build a research paper summariser using OpenAI's Assistants API. The summariser takes in a document as form data and returns a summary of the document as the response. I will walk you through handling file data, form submissions, and responses from the API. We’ll also learn some of the limitations of the current version of the API. If you ar...
NextJS Server-Side Product Modals using URL, Suspense & Fetch
Просмотров 12 тыс.7 месяцев назад
Discover how to set up pop-up modals on the server! In this tutorial, learn how to build modals that are fully server-side rendered using Next.js. The video guide walks through how to create a product page by fetching data from a public API, manipulating URL state and using React Suspense for handling loading states. Attention is also given to building a loading UI and demonstrating a convenien...
New React Hooks with NextJS Server Actions (2024)
Просмотров 1,6 тыс.7 месяцев назад
Dive into my latest tutorial on the experimental useFormStatus and useFormState hooks! Discover how to enhance your web applications with server-side capabilities, enabling features like comment systems. This comprehensive guide walks you through the installation of these new hooks and demonstrates their potential with a practical example. I tackle the nuances of creating a comment system, show...
Database Session Authentication with Prisma & NextJS App Directory
Просмотров 11 тыс.8 месяцев назад
In-depth tutorial on Next-Auth login authentication - you will learn how to protect your pages with authentication using advanced strategies like NextAuth database sessions and Prisma client extensions. Plus, passwordless login for a seamless user experience! 🔥 🔑 Key Takeaways 1. How to set up NextJS app in 2 minutes 2. How to set up a new database and Prisma query layer 3. How to set up NextAu...
Server-side Pagination with NextJS 13 Server Actions
Просмотров 10 тыс.9 месяцев назад
Welcome to this in-depth tutorial on setting up SEO-optimised, server-side rendered pagination in Next.js 13.5 using Prisma ORM as the database querying layer. If you're looking to create a listing page or e-commerce shop, this guide is tailored for you. Pagination helps search engines understand your site structure and ensures all your pages are crawled and indexed, which is particularly impor...
NextJS 14 Image Optimisation using Imgix (2024)
Просмотров 53011 месяцев назад
In this comprehensive tutorial, we'll dive deep into the world of image loading by leveraging NextJS's Image component, Imgix, and AWS S3. You'll learn how to create an Imgix Source, set up an S3 bucket, and create an IAM user with the necessary permissions and access keys. You'll also learn how to beautifully integrate these elements using NextJS's Image component with the loader prop and load...
Hey can you please make a same video using trpc or t3 stack
Hey, I really like your UI settings. If you can make a video on them or share the json code, that would be amazing!
@@zak10x hey the theme is Dracula Pro
What vscode theme are you using?
Hey it's called Dracula Pro 👍
Few more questions. After implementing it this way I noticed that my page in the background did a rerender when the searchParams changed, even if I did router.replace instead of pushing the params. Also I wonder what are the pros of doing it this way (besides the js bundle size difference of a single client/server component), instead of just toggling the modal with a provider and passing in the server components by prop? I'd assume a modal would be the ideal usecase for keeping the modal a client component and passing in the server components? I'm asking because I'm not entirely sure.
You could try using window.history.replaceState as this replaces the URL without browser refresh. The main benefit I think is SEO - pretty sure the search engines can pick up the URLs for each product modal when they're server rendered, but not with client components because it uses JavaScript to render the modal.
@@taylorlindoresreeves Thanks. Doesn't seem like you can "wait" executing/fetching from a server component child component until the parent modal client component is opened. It seem as if the modal is a client component, and ServerComponentThatFetches is passed as child/prop it starts fetching its data immediately and does not wait for the modal to show its content. So server modals might be our only option if we have serer components inside the modal that needs to fetch some data upon display.
Around thee 4.10 mark you mention that it's a bit of a technical challenge but definitely still doable to implement server side modals for global modals, but I'm curious how you'd do that let's say for a modal you trigger from clicking a button/icon in a global header, since you have no way of knowing whether search params changed from the root layout? :-)
You can achieve this using middleware to capture the search parameters, storing them in a cookie. This same cookie can then be accessed in the layout at load time and during server‑side rendering.
@@taylorlindoresreeves don't you mean setting them in a header and not a cookie? Just like you do for the pathname? That will opt all routes into dynamic rendering, but that might be acceptable.
github link not working
My bad, it was the incorrect link. Have updated it now!
knowledgeable
Thanks, hope you gained something from my content
There's 0 documentation on credentials provider + database session. When I asked the creator of AuthJS he told me there never will be because he doesn't like it and I should just use JWT. You seem well versed in what is undoubtedly the worst documented auth library in the world lol, so it would be extremely helpful if you could make a video about credentials + database session setup. It's really hard for me to understand as a newer developer since it's all abstracted away and I don't know how to implement the session logic.
Yeah, I've set up credentials across multiple projects so I certainly will create a video on that. It requires a few workarounds because as you said, the author doesn't want you to use credentials and it's obvious when trying to configure it, you have to implement a few hacks. Video will come soon. Thanks!
@@taylorlindoresreeves No man, THANK YOU! Coming from Laravel where everything is batteries included, setting up an actually useable nextJS environment with authentication is tough. So far I've had great success using lucia auth for database sessions + credentials, but I'd like to learn how to do the same in authJS.
Love this kinda content which is so natural that you didnt even bother editing the part where you missed importing Zod. Inspired me haha to not take my mistakes very seriously and get discouraged as a beginner
Absolutely 👍 I make mistakes all the time 😅 it's part of being a programmer! Enjoy the journey 👨💻
Great Tutorial Taylor ! Thank you. Hope you continue with more guides. Has anyone run into bun issue halfway through with error message: "ReferenceError: Can't find variable: TextDecoderStream" ? with with streamUI() function in actions file . It seems to work on Node but not on Bun. The workaround seemed complicated to me on Bun
Thanks, no I haven't unfortunately. Hopefully someone else knows about this issue 🤔
You have an apple keyboard :
Good call! 👍
Wow thanks very helpful
Thanks for watching :)
Great thanks for sharing
No worries, hope you enjoyed it
To the moon 🤘H
Exactly 🚀🌑
Thank you, great video! Can you please do a video about Credentials Provider with database sessions?
Sure can!
Thumb down, too slow. Might be right for some junior devs. But for me this is so slow, watching you install packages and remove icons 😮😢.
Yeah man, I felt feedback on my previous videos was I was too fast, not running through each step of the code. But I guess I could try a balance. Try on 2x 👍
Thank you for the video . Keep going bro !
Thanks man!
great tutorial💯...is it possible to do a recursive function call with this? for instance it calls the get_crypto_price function and then uses the result to call a different function? thanks for the content
Hmm you might be able to do it by updating the AI state with another system message that asks the LLM to run another function. What’s the use case out of curiosity?
My understanding was Next.js does optimization inherently within its Image component, is Imgix more effective at compression?
For sure, NextJS does indeed do some optimisation. But with the loader prop for the image component you get the benefit of handing off your images to an external source such as S3 bucket, which is always beneficial in terms of performance. But with Imgix as an additional caching and compression layer, you get fine grained control of your images, all while having them stored in an external source. Technically you could store 20mb images and not have to worry about how to handle compression and optimisation in the business logic or frontend layer image component (I think NextJS uses Sharp). You simply use the imgix URL and provide it with format and compress query parameters.
@@taylorlindoresreeves That makes sense! Do you know if there is a similar workflow that can be used alongside Expo’s Image component?
@@salieflewis hmm I’m not sure honestly, I don’t have experience with Expo. Good luck 🤞
Hey, I have noticed your code shows source in every paragraph. But I couldn’t understand how you managed to do that. Would you explain it to me or tell me when did you code that part?
I think it’s VSCode extension called GitLens 👍
Excellent video! keep em coming, cheers
Thanks, will do!
Beautiful Content🔥🔥 Deserve a lot more subs❤❤
Thank you, appreciate the comment!
Is this cache for a specific user-session or shared between every user? I'd like to understand if another user have accessed your site if he would trigger a new request or not
For a REST API it’s cached globally for all users. However, if using a server action, fetch requests are not cached.
Do you have an updated version by any chance for Vercel's latest versions?
Yeah I do, I’m just re-publishing. I forgot to add the intro to the final edit. Will be released in 1-2 hours. I think it’s the best video I’ve done. Hope you like it.
Thank you, this is great content ! ;)
You are very welcome friend
thanks for tuto. No offence, hovewer some code looks overwhelmed. For example this: const currentPage = Math.min(Math.max(Number(page), 1), totalPages); Why can not you just use "page" variable instead, why you doing those calculations (I know that it's edge case handling)? Would be nice if you would explain those parts in your videos as well because it is not obvious at the first look. Now the biggest part of your video you just copy pasting some code that makes me feel that you just reusing someone else solution. It just my thoughts that maybe can improve your content :)
No worries. I am definitely going to spend more time in future videos explaining things a bit better (I am new to this). With regards to the copy pasting, I will try to do more coding on the fly - it just takes significantly longer so my concern is that people will get bored watching me code easy frontend stuff. Thanks for the feedback.
This server sided thingy is out of hand. What next ,server sided client browser
Hi! is there a way to switch assistants?
You basically create the assistant. The assistants API has been updated significantly since I made this video. I will make another on the latest version (v2) and function calling.
You skipped over the entire coding of the pagination component...
Yeah I actually just re-used a component from v0.dev as it was quicker option. I am getting a lot of feedback to say I should stop re-using and just code the damn things, so I will take this on board and hopefully improve in future vids. Thanks for the feedback.
Bro. I appreciate your knowledge, but read the room. How do you expect people to follow what you are doing when you are not only making fast cuts, but completely skipping entire code creations steps that are vital to finish the project. You also never acknowledged when you made mistakes and did not show your changes to the code when you did. Constructive criticism: SLOOOOWWWWW DOOWWWWWWNNNNN. Make part 1 and part 2 if you need to. :)
Good point, thanks for the feedback. I am going to do more on-the-fly coding and fixing - my concern is it bores people watching me debug, which is why I try and do things quickly. But a lot of feedback I am reading just now is similar to this, so I will do more full-length, less edited videos where I go through the whole process and don't re-use any code or components.
cool.. explantion
lets say you deploy this app in production will you able to crawl all the single detail pages???if yes means is this the way to make it to crawl
good news
why without redux? it help my for pagination
bad tutorial. I found it hard to follow you, it was unclear and unstructured
Thanks for the feedback.
All the bullshit to sell Prisma to the developers
BROOOO ZOOOM ON THIS FKN EDITORR WE CANNOT SEE ANYTHING
Noted sir, thank you for the feedback.
Amazing tutorial. Can you do one with function calling??
Absolutely, great idea, I've noted it down - lots of developments in the function calling API recently so it's a good time to do a tutorial. I will create this in the coming weeks. Please subscribe if you haven't already to make sure you're notified.
Just released this tutorial - check my latest vid 👀Hope you like it!
This is a very good video, straight to the point and nice quality code writing 👏
Thank You.Can I ask about how it would function for different users accessing server at different time.Does it revalidate at a set interval of say 60 secs or 60 secs elapsed after the user accessed the server Thank you for your explanation💥
I think it revalidates for each specific user. It's not global in that sense.
Excellent! I see you're using Prisma. How do you typically handle the CMS part in your app? For instance, if admins wish to upload images for the e-commerce shop, would you integrate the CMS into your Next.js application, or opt for a separate backend?
Please increase font size , You are doing awesome but 😢
the code not running, just i wasted some time
could you add function calling for above code
very useful video, keep up the great work
Really nice video! What font is that? MonoLisa?
That is correct!
Thanks, very professional
Awesome video man, keep it up! Worked perfectly and its so much faster then my implimentation on the client side.
Help Me pls
your contents explains a lot of things that we have to know. thank you so much and i would love to see much more videos