Next.js 14 Netflix Clone using React, Supabase, Next-Auth, Prisma and Tailwind.css

[@janmarshalcoding]

Quick FYI, supabase changed a few things in regard to their core infrastructure (supervisor). To make the connection with prisma and supabase work, please follow the following guide: supabase.com/partners/integrations/prisma I forgot one small thing in this video, please run the following install script in your terminal: npm install -D nodemailer This is need to send emails for auth magic emails

[@nawazcode13]

Thank you so much, I'm searching from 1 hour for latest next auth tutorial with prisma orm, now I go through this, really thank you so much.

[@janmarshalcoding]

Haha, no problems. If you have any problems or question let me know, I will try to answer asap

[@nawazcode13]

​​@@janmarshalcodingSure I will, thank you for asking 😊

[@RabeeRaad]

This is one of the best Next 14 tutorial on KZbin. I learned a lot from you. Thank you!

[@Hemanth045]

Took me 12 hours to build this thank you so much for the guide

[@bukanidamanmu4489]

I just finished the whole video 20 hours, this project is work. Damnn, thank you Jan, you are awesome 🎉🎉🎉🎉

[@sardulraajendran]

Can u tell me how to clone it..with the required changes as I have to submit my project by tomorrow

[@ismoiljonabduqahhorov5825]

one of the best modern web dev tutorial appreciate it

[@dalestewart]

Another professional application developed with very good explanation and good architecture design

[@dalestewart]

Any paid courses using Next.js, supabase, shadcn.ui?

[@janmarshalcoding]

Not right now, but very, very soon. Thanks for your support!

[@dalestewart]

Any next.js programming Developer shirts for sale?

[@JRReal]

Great tutorial about Next14, You explain in a simple and direct way... congratulations on your work. 👏👏👏👏👏

[@amalmurikkoli7629]

the signOut function accepts an object which contains a callbackURL and redirect. You can pass those values so that the page redirects to login page as soon as the user logout.

[@geeboug]

Thank you for making this video. It was very helpful. Can't wait to explore other videos from you as well.

[@jamesyu6385]

Forget my question!!! I fiexed it just following your sourcecode.... Thanks again...

[@janmarshalcoding]

Haha, did not even see your question but glad you could fix the bug by yourself

[@МихаилТерновецкий-и1у]

Hi, thank you very much for your work, you recently started making videos and it's very cool, I learned a lot thanks to you! Don't stop, man.

[@janmarshalcoding]

Thank you very much Михаил, I appreciate it 😄. Hopefully new video on Friday 🤞🏻

[@totallynotdavid]

Man, love this tutorial! I managed to deploy this project with Cloudflare Pages, although with some changes to make it work as things like Nodemailer and Prisma do not work on Edge Runtime.

[@janmarshalcoding]

Thank you. Yeah, sadly edge is not compatible with the node.js runtime, but cool that you managed to do that!!

[@markus_dev_cwb]

Amazing project Man! Tks to share.

[@collinsk8754]

Great tutorial! 👏👏

[@br0ski_dev]

Sehr stark!

[@arshah246]

That's really great tutorial about next js 14 all topics are well covered except shopping cart functionality missing and one thing is still confusing that is why is so much client components.

[@exopolittv5215]

HeyHo! Awesome tutorial mate! im pretty new to developing, acutlly just started July this year xD and ur Video did help me a lot! Lookin forward to see more from you!

[@janmarshalcoding]

Danke, neue vids folgen bald. Irgendwo und irgendwann starten wir alle einmal ... Viel Erfolg!

[@Yasser-e2p]

good tutorial Jan , learned a lot from it , i have an issue with signin using email provider i;m getting Unable to sign in , hope you do a video about it thanks

[@sharifahmed1925]

great tutorial! I'm a big fan of Supabase Wondering why you used NextAuth instead of Supabase Auth? Thanks for making these tutorials :)

[@janmarshalcoding]

Thanks, When I first created this project I was using supabase auth with the new ssr package, but ran into multiple bugs which was very annoying. That's why I switched to next-auth

[@anonymous12478]

Thanks

[@satyak1337]

2:17:09 whats the reason for adding poster image twice for every card ? can we not scale the first image or hover?

[@niteshprajapat7918]

This is amazing 🎉🎉

[@UJJAWALKAUL]

@janmarshalcoding i followed along the project but when i click on add to watch list from recently added the button doesnt turn red but when i check it in my list it turns red in that path but on the home screen it stays the same so when i click it again it adds it to watchlist again instead of removing it

[@ryankim443]

I'm going to start studying with your videos. Thank you very much. I have one question. In your technical configuration, is state management like zuStand not necessary? Is there another way to solve it? Thanks again in advance for your reply

[@ifeanyiosi]

Hi Jan, Thank you for your hardwork. I really appreciate the effort you put in. God bless you ❤❤. I look forward to more tutorials. I have learned so much and I am your number one fan. Keep up the good work. Is there a discord channel or something where us fan can suggest new videos we want to see or something?

[@janmarshalcoding]

Thank you 😄, appreciate it. Currently, there is no Discord channel but maybe in the future...

[@Furrukhish]

amazing sir

[@claytonmmonteiro]

best tutorial, can use 2FA with next-auth ? using login and password ?

[@ritankarsaha8041]

why is the email login not working? like mails are only getting sent if i give my email address and not any one elses... can anyone pls help?

[@dev15811]

same issue i'm facing. did you get your problem resolved?

[@herbertk9266]

Thank you

[@OmarFaruk-bz4gw]

Thanks youre hard work,,

[@yessir8248]

Cannot find module 'next/image'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?ts(2792), do you know the fix to this?

[@arshah246]

01:25:17 why we didn't use clsx

[@Deus-lo-Vuilt]

Wow thanks 💜

[@sidtahir]

I just updated my existing app on github, and change the homepage url and callback url, didn't actually need to create a new app.

[@janmarshalcoding]

Yeah, that also works, but then dev won't work anymore...

[@voldemortvi4264]

thank you for your effort Jan, do i need to have some knowledge about Next js before starting ? i work with React but i havent started with Next js yet

[@janmarshalcoding]

Thanks, you don't particularly need experience with Next.js, though some things could maybe confuse you (server actions, for example --> I have a tutorial on my channel). I would recommend you to try it out and if you find it too advanced, then either try a primer tutorial or while coding check out the docs since they have been recently revamped and are quite nice in my opinion. Also, some typescript knowledge should be there (I use a lot of interfaces in this project, but they are very simple to understand.) But still I think you can follow the tutorial since it is not toooo complex...

[@obahsylva7755]

Thank you so much for this great content. I've finally been able to complete the project. i tried add more movies in the seed folder, I followed the pattern set but they are not reflecting. any suggestion?

[@janmarshalcoding]

I can't remember anymore if talked about caching in this video. Try redeploying your application on vercel, and then you should see the movies.

[@debrauwermichael2366]

Bro, your tuto is very great ! But your videoSource link is no longer available...

[@janmarshalcoding]

Thank you. Yeah, Cloudinary banned my account, but I fixed it now... Check my GitHub, link has been changed which now works.

[@deethekingstevens7146]

What if you implemented a search bar to fetch the movie ? How would you do this ?

[@janmarshalcoding]

Depends on how big the index is. if I have only a few movies, I would just directly search it from the db using a debounced value. If i had 100s of movies, I would use something like algolia or whatever other provider there is.

[@harjotsingh9894]

Shat is the theme that you are using its so cooll

[@janmarshalcoding]

Aura Theme

[@SwethaSettu-e9b]

Bro for me error showing as can't reach database server

[@janmarshalcoding]

Have you created a database at supabase have you added it to the env have you double checked that the Passwort has been added correctly

[@dxnsav]

@@janmarshalcoding i have the same now, i've recreated db 2 times, 3 times changed password and copied it, but nothing changed. so i've tried to connect in other app using this code const { Pool } = require('pg'); const connectionString = 'postgresql://postgres:[YOUR-PASSWORD]@db.ybrwimxtjailumgoocni.supabase.co:5432/postgres'; const pool = new Pool({ connectionString: connectionString, }); pool.connect((err, client, release) => { if (err) { return console.error('Error acquiring client', err.stack); } client.query('SELECT NOW()', (err, result) => { release(); if (err) { return console.error('Error executing query', err.stack); } console.log(result.rows); }); }); and this code works (obviously I changed [YOUR-PASSWORD] to my one) and I cant understand why the same connection strings work not the same way

[@madaraop5348]

i am getting an error on adapter.

[@UJJAWALKAUL]

ANYONE FACING NEXT AUTH LOGIN ERROR WITH PRISMA IN THEIR PROJECT ADD ?pgbouncer=true at the end of DATABASE URL to avoid getting prisma and next auth errors MAKE SURE TO ADD directurl in schema file datasource db { provider = "postgresql" url = env("DATABASE_URL") directUrl = env("DIRECT_URL") } and in env add the seesion mode url

[@hamza201183]

We want also series with remix, if possible :)

[@prashlovessamosa]

Only NextJS

[@fiimble]

Hi Jan, Just an observation, but wouldn't it be better to use a different name such as "NextFlix" or something like that to avoid conflicts with the brand? Once again, excellent content!

[@janmarshalcoding]

Hey Jorge 👋🏻, well, it probably would be better, not quite sure. We will see if I get any problems 😂✌🏻... Btw, thank you so much for the "buy me a coffee", I really appreciate it. Also, I haven't had the time to check out the error you mentioned with clearCart. Just to clarify, it worked on dev but not on vercel ?

[@fiimble]

That is correct@@janmarshalcoding I'm not really sure, but it might have to do with Stripe being on "test" mode...? Jorge

[@janmarshalcoding]

Hey Jorge, I am not sure why it does not work for you in production, I tried a simple reproduction and for me, it worked in dev as well as in production on vercel. github.com/ski043/use-shopping-cart-clear-cart. If you want me to try out your project, you could send me the project by email... In terms of stripe test mode, this cant be the issue, since there is probably some error with clearing local storage in production. One thing you should maybe also try is, if it works in production in a incognito tab

[@j..m1371]

Hi jan, the video is just incredible, but just today I got an error accessing the video source (a 401 error), maybe the cloudinary link doesn't work anymore ?

[@janmarshalcoding]

Hey, thank you. Yeah, my Cloudinary account got "banned" because I went 180% over my limit. I will see what I can do tomorrow. For now, you could upload it yourself to supabase storage and use it from there...

[@j..m1371]

Thanks for the reply ! do u have the src video or where can I find these types of trailer videos to add to the other movies @@janmarshalcoding

[@janmarshalcoding]

Hey, sorry was sick, that's why I didn't reply. Firstly, I fixed the video URL. New URL has been updated in GitHub. For the trailer, I just used KZbin and some generic mp4 converter. But you can also use IMDB and get the video source url through the virtual dom.

[@VachaganAchoyan]

I can't signIn with google, I get an error "Access blocked: netflix-clone has not completed the Google verification process"

[@janmarshalcoding]

I think the error is pretty self explanatory. Google it

[@shashiraj6226]

hello there npx prisma db push this command is stuck and not connecting to my database. can anyone fix this issue plz?

[@janmarshalcoding]

Please check the pinned comment.

[@shashiraj6226]

@@janmarshalcoding thank you for your guide and this amazing project. you were the first youtuber who replied for my query. Thank you again from core of my heart. Keep up the good work🙂💜

[@leovurchio]

Bro can you make a invite management Systems?

[@leovurchio]

With forms

[@tatsumii1420]

what vscode theme are u using

[@janmarshalcoding]

Aura Theme

[@g.host_xd]

how i can show real name and email in usernav component, i tried as well as through getServerSession, but its drop down with error because of it is 'use client' component

[@janmarshalcoding]

There are two ways, basically. Either, you get your session through the layout file and do a bit of prop drilling. Or you convert your usernav component into a server component and through the sign-out button into a separate client component.

[@totallynotdavid]

@@janmarshalcoding It would be nice to create a tutorial for that. :') Not necessarily for this project, but a general one. Thanks in advance

[@totallynotdavid]

Managed to make it work, thanks for the suggestions!

[@deethekingstevens7146]

Hi can you explain how you made this work please? @@totallynotdavid

[@SaurabhVlogs9]

it showing error in adapter ? how i can solve it

[@janmarshalcoding]

whats the error?

[@SaurabhVlogs9]

it showing me this , i dont know what happen i just follow all your step @@janmarshalcoding

[@meherabhassan5421]

@@janmarshalcoding " Type 'import("e:/Softwares/NodeJS/Projects/netflix-clone/netflix/node_modules/@auth/core/adapters").Adapter' is not assignable to type 'import("e:/Softwares/NodeJS/Projects/netflix-clone/netflix/node_modules/next-auth/adapters").Adapter'. Types of property 'createUser' are incompatible. Type '((user: AdapterUser) => Awaitable) | undefined' is not assignable to type '((user: Omit) => Awaitable) | undefined'. Type '(user: AdapterUser) => Awaitable' is not assignable to type '(user: Omit) => Awaitable'. Types of parameters 'user' and 'user' are incompatible. Property 'id' is missing in type 'Omit' but required in type 'AdapterUser'.ts(2322) adapters.d.ts(174, 5): 'id' is declared here. types.d.ts(106, 5): The expected type comes from property 'adapter' which is declared here on type 'AuthOptions' "

[@donielearysantonio3423]

the vidsource not working

[@janmarshalcoding]

Check GitHub now working. Changed the link

[@yunyang6267]

why are you using next auth when you have auth in supabase

[@janmarshalcoding]

When I first created this project I was using supabase auth with the new ssr package, but ran into multiple bugs which was very annoying. That's why I switched to next-auth

[@junsgk]

@supabase/ssr(supabase auth helper deprecated) is pretty much stable I can tell from now with server actions.

[@philipjohn2038]

when am on the user/list then i logout, it routes me to user/list/login, any help

[@janmarshalcoding]

At what timestamp of the video are you?

[@philipjohn2038]

@@janmarshalcoding after i finished the project I noticed it

[@philipjohn2038]

@@janmarshalcoding even adding a router.push("/login" ), does not fix this

[@janmarshalcoding]

​@@philipjohn2038home/layout.tsx do you do the following --> const session = await getServerSession(authOptions); if (!session) { return redirect("/login"); } is the user/list folder nested inside of the home folder ? --> home/user/list

[@galuxboi]

@@philipjohn2038 maybe u should clean up nextauth callback url

[@Kmkn308]

❤

[@Tanner-cz4bd]

why next auth and not auth.js?

[@janmarshalcoding]

next-auth is basically auth.js

[@Tanner-cz4bd]

I thought maybe different steps I'll give it a try

[@amalmurikkoli7629]

Hi Jan, would you like to review my blog website code, it will be really helpful for me to get a feedback from you.

[@treyrader]

lol oh no another netflix clone? should i fast forward to the last 30 mins or what?

[@lokeyparryyt9904]

sir i have a question in schema.prisma and seed page.tsx hav an error like uniqe constraint fialed on fields('id')*prismacleint knownrequesterror;invalid prisma.movie.createmany() invocation

[@lokeyparryyt9904]

how to solve it

[@hoanglannguyen4211]

I don't know why adapter got error at here export const authOptions = { adapter: PrismaAdapter(prisma), ...} Type 'import("d:/SELF STUDYING/KZbin/Nextjs/Netflix/netflix/node_modules/@auth/core/adapters").Adapter' is not assignable to type 'import("d:/SELF STUDYING/KZbin/Nextjs/Netflix/netflix/node_modules/next-auth/adapters").Adapter'. Types of property 'createUser' are incompatible. Type '((user: AdapterUser) => Awaitable) | undefined' is not assignable to type '((user: Omit) => Awaitable) | undefined'. Type '(user: AdapterUser) => Awaitable' is not assignable to type '(user: Omit) => Awaitable'. Types of parameters 'user' and 'user' are incompatible. Property 'id' is missing in type 'Omit' but required in type 'AdapterUser'.ts(2322) adapters.d.ts(174, 5): 'id' is declared here. types.d.ts(106, 5): The expected type comes from property 'adapter' which is declared here on type 'AuthOptions' (property) AuthOptions.adapter?: Adapter | undefined You can use the adapter option to pass in your database adapter. Required: No

[@tomaHdl]

try to install this package : npm i @next-auth/prisma-adapter and add new import : import { PrismaAdapter } from "@next-auth/prisma-adapter"; It worked for me

[@hoanglannguyen4211]

OMG thank you somuch, you just save my life, I appreciate that ^^. I found a way to fix it but nothing works. @@tomaHdl

[@obahsylva7755]

it actually worked on dev environment, but cant deploy via vercel@@tomaHdl