Build a Full Stack App Fast: Mastering Next.js 14 & Supabase

Github: github.com/cod...
Dive into the world of full stack development with our comprehensive video tutorial, where we guide you through creating an intuitive Watch List application using the cutting-edge Next.js 14 and Supabase. This tutorial is designed for both beginners and seasoned developers, offering a step-by-step approach to building a dynamic application. You'll learn how to implement user authentication, enabling users to securely sign in. We'll walk you through the intricacies of adding, updating, and deleting watch entries, ensuring a smooth and interactive user experience.

[@Will-ep2pr]

This is a great video. Only feedback I have is to have timestamps for the different sections of the video.

[@marciplan]

Hey Ryan -- I have sincerely followed more than 5 tutorials in the past week on Next/Supabase just trying to understand simple CRUD but I kept failing (because of things being outdated and I'm just incredibly dense) -- This is the first time it almost directly clicked and the first time I was able to finish it. Thank you so much :) (If you would, make this a series where you build a whole SaaS out, like a mini-Hodinkee 👀)

[@LibraryOfTheOligarchs]

You're not dense... just took a few tutorials for it to click! the world is your oyster!

[@marciplan]

@@LibraryOfTheOligarchs Hehe, thank you :)

[@kevinjhammond]

Came here to say the exact same thing. I am trying to get more familiar with Next and Supabase and this is perfect

[@LibraryOfTheOligarchs]

Appreciate you Ryan! The way you walked watchers through the code was invaluable!!

[@coderyan]

Happy to hear it helped!

[@LibraryOfTheOligarchs]

if you get an odysee account users will be able to tip you personally. Would like to see you posting on there if you have the time. Odysee is the future IMO.@@coderyan

[@tsykin]

Thank you so much for this content and not using any extra packages in this project. I am learning Supabase + Next.js and this will be very helpful for me Keep up the quality ❤ upd. I am so happy I finally completed this tutorial and built this app. I will definately use methods described in this tutorials in my future projects 👍

[@coderyan]

You’re welcome!

[@tsykin]

Great video! I have build this using this video + extended funtionality. Keep popping with great content ❤

[@coderyan]

Thank you!

[@dafk_]

Thank you very much, you are reading my mind on what I need to implement.

[@coderyan]

You’re welcome

[@incarnateTheGreat]

Thanks for making this video! Always appreciated! May I ask if you could include chapters, please? It makes it very easy to go back and forward to certain sections. Thanks again!

[@firasel-jerdy8808]

Hello. Thank you for the tutorial i really enjoyed! One question, is your server-actions folder considered Nextjs API? I am creating web based games that are going to be embedded on an Iframe on a nextjs project and deployed via vercel with a nextjs api that connects to supabase.

[@nmdpa3]

Fantastic tutorial. Most concise and to the point I've found in months. Definitely following the channel. One question, being kind of new at this, in your server-actions, what's the best way to check the "success" message coming back from a server action, and to also clear the add watch input fields on the revalidate? thanks!!

[@digitnomad]

great video! however @12:31 you should keep the connection string secure here by remove the NEXT_PUBLIC and use server action.

[@coderyan]

Thanks! It's handled like this in future videos. I didn't use Server Actions here bc they were still in beta at the point of creating this video

[@Kkvta]

Is there any short answer on how to do this? Looked through some new vids but can't seem to find it, and just removing next public doesn't compile. Cheers Ryan, can't wait for more tutorials like this!@@coderyan

[@nuancetone]

Thanks so much for the video. Running into a small issue, not sure if it's me. Trying to style the AuthUI LoginForm using your same parameters. VSCode is telling me that the 'appearance={{}}' option doesn't contain options for 'theme', 'input' or 'button'. Wondering if somethings changed? (TC: 28.25)

[@FroejMK]

hello, at 1:09:32, when I click on "Add Watch", it doesn't do anything. no watches are added. I've got the same code as you in app/watch-list/page.jsx but it just won't work. on the terminal, instead of having the added watch to show up, it just returns an empty array, and I can't find a way to fix this issue.

[@FroejMK]

nevermind, I just didn't save some of the codes, my bad...

[@shubhvora1190]

Awesome video, Cleared a lot of concepts which i was looking for Please do the same or similar with the new supabase ssr package having a lot of problems with that

[@coderyan]

Will do 👍

[@marciplan]

(If you get stuck at 09:30) ERROR: 42601: syntax error at or near "{" LINE 1: create table watches { In the video you're using {} but according to Supabase AI you should be using () else it won't work :)

[@coderyan]

Thanks for catching this! At the time I created this (a few weeks ago), it may have still worked the way I did it, but great catch!

[@tsykin]

Thanks, that helped :)

[@artsycoder533]

Also for anyone still getting stuck even after replacing the curly braces with parentheses, try adding a semi colon at the end of the closing parentheses. I kept getting this error: ERROR: 42601: syntax error at or near "alter" LINE 14: alter table watches enable row level security; and that was the culprit!

[@FlorentineDili]

function auth.uuid() does not exist - what about this one? I added create policy "Users can view their own watches." on watches for select using (auth.uid() = current_setting('jwt.claims.user_id')::uuid); 'jwt.claims.user_id at the moment, but does it cause problems in the future of the tutorial? @marciplan@@artsycoder533

[@Salah-YT]

here the full code with the comment I did by chatGPT 🙂 start here , copy paste pls -- Create the watches table create table watches ( id serial primary key, user_id uuid references auth.users not null, brand text, model text, reference_number text, created_at timestamp with time zone default now(), updated_at timestamp with time zone ); -- Enable row level security for the watches table alter table watches enable row level security; -- Create your policies as you did before create policy "users can view their own watches." on watches for select using (auth.uid() = user_id); create policy "users can add new watches." on watches for insert with check (auth.uid() = user_id); create policy "users can update their own watches." on watches for update using (auth.uid() = user_id); create policy "users can delete their own watches." on watches for delete using (auth.uid() = user_id);

[@giftzulu5960]

Thanks you for the video.. i learnt a lot from it. I build my app. I had an issue when i deployed it to vercel.. when user clicks signup, a message to email is sent, when i click on confirm email... Instead of being redirected to login, I see a link starting with localhost:300/auth/signup?code.... The browser says ... Server not found. Despite replacing localhost with my vercel link in my authForm I don't i understand why am still seeing localhost:3000 while my project is deploy led to versel.. When am running the app on localhost its working proper .. but when i use the vercel link.. its not longer working.. Help

[@amesqFF]

sorry, a have a question, in initial create watch-list page, you no set page how 'use client', but u can make work with form and button, that is necessary 'use client', u can explain this part? tanks, can see in 49 minutes

[@Kkvta]

Thanks Ryan, this was helpful, despite me not following on everything. Lots of difficult syntax :) Would this way of implementing auth be suitable for a large, "actual" project? Thinking about using this workflow for my first public app. If not, would love to know what to add. Thanks!

[@coderyan]

Happy it helped! Yeah, I think using this tech stack is still very much so applicable for larger apps

[@jeddsoh]

For the middleware.js setup around 22:13, I avoided abbreviating 'req' and 'res' and instead wrote the code using 'request' and 'response' for clarity. However, upon refreshing the page, it gave a TypeScript error. I simply changed the variable names back to 'req' and 'res' like how Ryan had it, it was fixed. Anyone know why this might be?

[@teetanrobotics5363]

Could you please put all the Nextjs + Supabase tutorials in a fresh playlist ? Thanks awesome content.

[@sjonny-depp]

How can I add a simple. image upload field?

[@christophernolan8761]

Great video,, thanks for making. Any chance you can update it for Supabase server side rendering (ssr) which is replacing supabase Auth-helpers

[@coderyan]

Yeah, I could do that

[@enriquesalomon8197]

Bro. Thanks for this video.

[@coderyan]

You’re welcome!

[@FlorentineDili]

Does anyone else have the problem that after deployment, localhost:3000 is still remaining even after redirecting Auth to the vercel link?

[@coderyan]

I’m not sure I completely understand the problem you’re having. What do you mean by localhost:3000 is still remaining?

[@FlorentineDili]

@@coderyan I'm sorry I wasn't clear. I firstly deployed the app, and tried login in from the vercel deployed app. Checked my email, and the link in the email doesn't redirect me to: vercel.myapp.whatever link// but It redirects me to: localhost:3000/ even tho I have changed this in the AuthForm.jsx file

[@samielsolh6874]

I'm having this error too... I followed the final step and replaced localhost with the vercel webpage but it still redirects to localhost. Here is my error: localhost:3000/#access_token=....

[@aniyt10]

Yes, I had this problem too, had to update supabase -> authentication -> url configuration -> site url to Vercel's domain.

[@FlorentineDili]

How did you do this exactly? @@aniyt10

[@aaniqfarooq1765]

Amazing video

[@coderyan]

Thank you!

[@nicholasautomation]

Thank you so much!

[@coderyan]

You’re welcome!

[@Yahya_Umar]

That's good thanks for sharing with us. Can please explain the logic or some small project for user login though admine dashboard and other login for users how can we manage. Please ❤❤❤

[@coderyan]

Thank you! And I’ll add that to my list of video ideas

[@herozero777]

1:31:25 - Deploying Application

[@0x-003]

can you make videos on nextjs for beginners, am a frontend dev student, who just discovered nextjs, as I have been using javascript/react

[@Tanner-cz4bd]

arent you using the new auth package?

[@Kkvta]

Which one?

[@JohnLesterOliverio]

I am having this error from the middleware.js " const supabase = createMiddlewareCLient({req, res});" the error is inthe parenthesis, please help😭😭

[@coderyan]

Is there a typo here in createMiddlewareClient? Looks like the L in Client is in caps

[@JohnLesterOliverio]

@@coderyan Omygod im too dumb to find that out thankyou🤦(New subscriber here 😊)

[@frontend_ko]

thanks

[@coderyan]

You’re welcome