วีดีโอ

Thank you so much for you kind words, means a lot. I will be releasing another video soon, schedule has been so busy as of late but I do indeed have something coming 🎉

Possibly yes. I've since learned it's probably not best practice to include the session in the layout. Would recommend using it in page or Server Component instead.

@@taylorlindoresreeves I'm still confused on how to integrate database session with nextjs middleware. I found that we can do the session strategy jwt (using the next auth library, but need to split authConfig), but if we do this still we are using jwt not database. What's so far i found that according to the official nextjs doc about authentication, we can use the session management library. But I'm still not knowing how to do this with middleware. Perhaps we can share this info

​​⁠there are only 3 ways you can get the database sessions working with middleware: 1. You need to set up an edge compatible database. Personally I've tried setting Prisma up but it's a hassle, I've always resorted to the following; 2. Set up a redirect based on the cookie existing in the middleware. You are able to use nextjs cookies() method to get the cookie, and use that as the session. In other words, redirect if the cookie exists. However, production cookies are prefixed with Secure__ so you need to account for that in a production environment. 3. Use nextJS redirect method on the layout or page level, effectively redirecting when the session doesn't exist. Only #1 wraps the middleware in auth(). #2 is just standard nextJS middleware. And #3 does not require middleware. Hope this helps!

@@taylorlindoresreeves yeah might be good to do 1# and 2# i think.

That's very specific, but I'll defo do more streaming and also stripe integrations, something I'm very familiar with 👌

@@taylorlindoresreeves Thank you so much

Bro thanks for the prompt, I've been a bit useless. Video editing is insanely time consuming and alongside my business I'm trying to manage it. The next video is going to be worth the wait 💪

Got a massive video coming soon, it includes Vercel AI structured outputs - keep your eyes peeled 👀

@@taylorreeves3642 looking forward to it.

did you deploy your code to vercel? I make my own and seem to run into timing out errors when deploying

What are the errors? I've often found issues with the AI packages when deploying to vercel. Was able to solve it by adding longer timeouts and force dynamic. Let me know what issues you're facing and I may be able to help.

More to come!

the actions.tsx is the best place to start and then create new UIs in the components folder

@@zak_porat hey the theme is Dracula Pro

Hey it's called Dracula Pro 👍

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.

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.

My bad, it was the incorrect link. Have updated it now!

Thanks, hope you gained something from my content

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.

Absolutely 👍 I make mistakes all the time 😅 it's part of being a programmer! Enjoy the journey 👨‍💻

Thanks, no I haven't unfortunately. Hopefully someone else knows about this issue 🤔

Good call! 👍

Thanks for watching :)

No worries, hope you enjoyed it

Exactly 🚀🌑

Sure can!

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 👍

As a senior dev do you know there is 2x speed for videos too

@@taylorlindoresreeves I think the video does not need to be cropped and accelerated, everything is clearly explained

It is slow but you can just look at the source code or forward 2x. I think still a great job!

Thanks man!

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?

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 🤞

I think it’s VSCode extension called GitLens 👍

Thanks, will do!

Thank you, appreciate the comment!

For a REST API it’s cached globally for all users. However, if using a server action, fetch requests are not cached.

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.

You are very welcome friend

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.

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.

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.

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.