Next.js with a separate server - good idea?
Вставка
- Опубліковано 5 тра 2024
- Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 Check out Kinde for auth and more kinde.com
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Web development roadmap 2024 & 2025: email.bytegrad.com
👉 Email newsletter (BIG update soon): email.bytegrad.com
👉 Discord: all my courses have a private Discord where I actively participate
👉 Kinde: check out Kinde for auth and more kinde.com
⏱️ Timestamps:
00:00 Next.js + server architecture
01:26 Downside of serverless functions
04:19 Benefits of separate server
05:52 Authentication architecture
07:30 Folder structure
08:05 Next.js authentication
12:21 Express API authentication
15:21 Request from Next.js server to Express API
18:05 Request from Next.js client to Express API
19:41 Audience claim
#webdevelopment #programming #coding #reactjs #nextjs
I would like to see big next.js course/project with a separate backend. Thank you for providing us so valuable content.
It would be super interesting to see the same implementation with an open source framework like next-auth. However, great video!
this
this 2
that
Wesley, this is the type of unique content I'm expecting from your channel. It's awesome! I hope you will also cover custom authentication without any third-party libraries for Next.js with a separate server.
I only host a Next.js app on Vercel (or Netlify) if it's a small or personal project. For serious projects, I always host it on a VPS instance with Node.js, PM2, Nginx for reverse proxy, and Certbot for SSL certificates.
Great video! This is something that is usually glossed over in Next tutorials and frequently a "find out the hard way" kind of thing
Yes this type of video is what i was looking for months on youtube and i can't find any proper video talking this much detail. Thanks for bringing in. Also you need custom server if you use Graphql api. If you use inside nextjs you must use external services. Thanks in advance❤❤❤🎉
Just was thinking about this idea. Thanks a lot for the video
Useful! Keep this videos coming. People still think that using Next.js makes you locked into Vercel hosting.
Great video! The thing I would also mention is that if you are accessing IP restricted resources its not possible to do that from vercel without paying for their enterprise amd using their secure compute feature. This is one of rhe main reasons we use a seperate backend. The combo of turborepo trpc still mean we get great DX for this
do more these kind of videos! thanks for such great content❤
Thank you! Will do
I NEEDED this video! I love next but I’ve been trying to figure out websockets for a multiplayer chess app for a while and there is not a lot of good quality documentation about exactly how to integrate external servers well.
Yes for large companies you will 100% have APIs that need to handle production traffic be developed and deployed separately. Those carefully control the amount of connections and types of access patterns to business critical databases. It will have rate limiting, waf, observability, disaster recovery, etc. If you see an api for production load be hosted as part of a nextjs deployment, just run.
Feel happy for new knowledge. when get notification❤
Great 👍
Excelente, gracias crack! Saludos desde 🇵🇪
I love your work man. I have been having these same questions and wanted to know if having a separate server is practical for the next all. great video.
Thanks! Enjoy
Thank you for the video, it's really interesting. Greetings!
This is exactly what I need now!
Enjoy!
Thanx for the video! But is next+drizzle (for example) is not solution for question in next with db?)
love this content
Good video, thank you
I really like this video. Can you maybe think of making a video about deploying nextjs outside of vercel, for example Azure or AWS. And what things we lose if we do that.
Great idea
I agree this would be great to see.
Yes please.
Can you make next 14 with next-auth using backend node.js - credentials(email and password).
i made a very similar project, i used nestjs for backend and nextjs for frontend. The differences: i only communicate with the database from the backend, and i created a custom authentication flow with access token.
I've been trying to fix the authorisation and authentication, using nest and gql with next but couldn't make something reliable when making a custom auth, can you help me out
@@rajnishps unfortunatly i never used graphql in this tech stack, so don't really know how to solve this, i'm really sorry
Maybe this is a dimb question but the app is not end to end typesafe, right? So whenever your nextjs calls the backend it needs to use fetch or axios and zod to parse all the types?
@@DomskiPlays yes if i communicate with rest api, but if i use graphql, or trpc it typesafe, but as i mentioned i not tested yet 😅
NextAuth is the issue I am also experiencing. I resolved it using the authO service.
Please make a video on how can we handle jwt access token & refresh token based authentication with a separate backend on next js 14 without using any 3rd party service. ❤
Nice topic, I wouldn't say I like using Next.js for the backend, I use NestJS I think it will be more scalable and overall like it more like the traditional approach frontend is frontend backend is the backend but Next.js server features can be useful sometimes as well
One thing I'd love to see is how to authenticate your next js app against a third party api and how to manage that authentication. At work we have C# backends and usually have C# bffs as well. Would be cool to see the same kind of thing with a Next js acting as the client and BFF against another separate server
Interesting idea
Exactly
I have a question. So if you have a project that is structured as you showed in minute 8 (api, nextjs and shared ) and I'm using prisma for instance, should I genereate my Prisma types in that shared folder and import the generated types to both the api and nextjs? And also, that would mean that I should firstly nmp init that folder, but I'm wondering how should I host it because it's separate.
I've quit a project for about 6 months now because i wanted to use nextjs app with an existing node js server (authentication), but could find any help on youtube because many dev creators where only doing tutorials on next auth (like they were paid by nextjs to only do next auth tutorials). It has been so frustrating. Thanks man.
@ByteGrad great videos...
Let's say I have a Custom Server, and want to take advantages of things like "server actions". The big question is if make sense the "Client" request to "Next.js Server" that request to "Custom Server" (two requests delay make no sense to me), how can I take the advantage of new React thinks at the same time I have my entire app in a separate Custom Server? Maybe having both my Custom server and Next.js server under same server?
This is valid to server components to only fetch things from my Custom server, it will pass through 2 servers request?
Can we make server components with a separate node.js server? Will the “use server” work if the Next/Node app was deployed on AWS for example instead of vercel?
In my case the API is written in Symphoni(PHP). How do i make some routes protected. Also, how do i handle session after the user is successful signed in
Hey, could you show us how this would be with NextJs + Django Rest Framework? Thanks!
How to deploy the project on the same VPS in this case?
i am kinda new to nextjs does any tell me how can i accesss that shared folder inside next app src folder?
In my case, I'm running most of my final projects on my own VPS server where I have full control of everything instead of relying on Vercel
Hi Wesley, quick question. In your next js/react course, does one of the projects that you teach to build have a separate server like this? Thanks!
Hi, we do talk about a lot of advanced Next.js concepts, but not this
How does getKindeServerSession get you the localstorage token from the server? how can it access it?
I have the same setup, wherein I have php backend, the difference is that it already has a managed authentication, token and all are generated from there.
I am currently using next-auth credential provider, it was tedious setup but was able to make it work but still feels like can be improved. Does Kinde, also offer the same thing? or do the users needs to be stored in Kinde?
Also one drawback I was able to figure out with passing accessToken in nextjs server side is it will automatically disable caching, because it accesses the cookies and headers. I was able to fix it by added cache:force-cache on all my request, but now everything is cached unless I explicitly remove it.
Anyway thank you for this! I'm still trying to finish the NextJS course and its been nothing but helpful and my journey learning react/nextjs!
Thanks for sharing, enjoy the course!
I use auth js version 5 in when user loginned and visit a page that not access into it how we can logout the user by using the function signOut for clearing session in middleware in auth js
cool!
Is that also the case with nuxtjs ?
As far as I know it is not necessary to use next.js functions as serverless. You can use them as a normal backend, and they become serverless only when they are used on certain services, like vercel. Maybe I'm confusing something? (Server-side actions and components are not next.js functionality, but react 19)
That's how I understand it as well, the serverless implementation is only sold at vercel.
Vercel/Serverless is missing in the title.
Legend 🫡
Thanks for that content, I have question about server functions (server actions). When we use their on the client, we make a network request to server for using that server function. What is the magic behind that? Instead of directly using those on the client, I have to make a network request to client to be able to use their actions. For example, a server action is mutating some data on the db and when I use that function on the client, first I have to do http request to access the function first am I right? I am confused about using server functions on the client, what is the magic :)
Next creates an api route automatically that’s hidden from you basically
Traditionally you would have to create an API endpoint on the server and then manually use fetch() with the correct URL to send data to that endpoint from the browser. With a server action that's all done for you behind the scenes by Next.js -- so it's basically just a function you can call like any other function.
@@ByteGrad thanks for answers, I am happy to think same idea about that structure :)
This is basically Laravel (backend) + Inertia (Glue/ Connector) + React/Vue/Svelte
That sounds logical for a every experienced dev but what about SSR when using a custom server?
will you not have your react/next course on udemy? js course was very good.
Great to hear you enjoyed the JS course. The React/Next.js course will only be available on the website :)
Hi i just want to see the contents of your new course but i can not see it on your website, and i had some more questions but i can not contact you
Why do you use env.local and not .env regular?
That's always the point I switch back to Laravel. 😅 Especially I can use shadcn/ui and co with Laravel.
#question Can I deploy an express app on Vecel or any free platform for deploying fun projects?
No
There’s a step by step article in the Vercel docs explaining how to set up an Express JS application. Search the Vercel docs for “express”.
@@APPoholicReview Why are you saying no? There’s an article in the Vercel docs explaining how to configure an Express app.
yes
@@jotaroisdarius1918 What's that bruh..?
Till now we used nextjs so we dont have to make another server...and now we are using nextjs with another sever ?? 😭😭
Welcome to web dev! Haha
Use turbo repos for multiple applications
How is the token validated. Is it when the client or server make a request from a protected route then the middleware for the express api server recognizes that protected route and sends the encrypted token which is used when making request to server and is validated when decoded on the server? And does it all happen in one go? Say a button on the client that calls the express server does the things previously mentioned all in one go after the button click?
For what I know the express middleware talks with kinde server to authenticate the token under the hood. To check if it's a valid token. It have to talk with kinde api somewhere.
If you would implemente this in one language where they don't have a sdk the workflow would be: api receives the header jwt token > api asks kinde if this token is valid > then api checks if this token is from the right audience or kinde checks Idk > then api allow request. Probably there are more things.
I've been learning to code for 6 months and when it comes to backend development , receiving and pushing info to a db, authentication and relational dbs I feel completely clueless. There are great bits and pieces of information like your video but being able to fragment a big task into small bits and then putting it all together is what I find extremely difficult.
Bro Which stack is best...Php- Laravel, or MERN!! Which is stable and futuristic... Or there is another stack!😅
If Next.js is used purely for frontend (so all backend logic is on a separate server and most of frontend is locked behind auth), would it be a better idea to just use pure react with vite (and tanstack etc..) for frontend instead of Next.js?
Just using a pure React Vite SPA in that case makes sense I think yes
You can use any service the difference is how easier and different functions they all provide. If you are using next js for pure frontend it is easier for making routes,you will get optimised image and links error handling and many more which all you need to do manually in react 👍
@@dhrambiragarwal3520 How is routing easier in Next.js when you have tanstack router for react which has everything Next.js has and more. For images, fair enough, but I don't understand what you meant by error handling and links?
If it is an app go with React SPA, if it is a website where you need SEO go with Next.js, also sometimes next.js could be needed for ex. streaming content to client etc.
Hmm… I think most of the things you have pointed out are referring to a serverless approach. I was looking for a really good reason to migrate my nextjs backend to express/nest, and I was hoping this video will make it clearer why I should/shoudn’t do it. Unfortunately, it did not. Thank you anyway!
If it helps we use a separate nestjs server which the nextjs backend calls.
We also use code generation via openapi specs so we can generate all the typescript types, the nestjs controllers and dtos, and the nextjs fetch calls / swr hooks.
We already have lots of code,, tooling, tests etc for a nestjs backend so it's great for us to stick with a separate backend.
The video seemed pretty good to me describing the benefits. There wasn't a drastic focus on serverless, it's just that nextjs is very heavily focussed on serverless so he had to mention it.
All he said is separation between both ends and ease of development if you have different teams. And then 75% of the video he talked about auth which is not what the title says the video is about. The things he mentioned are common knowledge. A Clickbait imo.
Hey, micro frontend and module federation crash course please.
Why not use both at the same tome
what I do is have my Fastify server dockerized and living on a Cloud Run instance, boom serverless backend that scales to 0 when I'm not using it.
I took a good decision choosing mern over next js
Please make a tutorial to build express API then.
11:14 this gives me anxiety. But awesome video
When will we get back to PHP + jQuery
i hope we never do
But how will leverage next-auth on a separate custom server😢😢
This is the one I am also suffering with. I have overcome with authO service.
This is getting nut
Hello, in this project we're using Kind for authentication and route security to save time.
Is it really used in real projects? Why don't we do the authentication and route protection ourselves as usual?
Because if I deploy my application with Kinde and Kinde decides to shut down 3months later, what will happen to my application?
Hi, Kinde allows you to export user data and their SDK API is pretty standard I'd say so there isn't really much lock in imo
@@ByteGrad thanks for the reply
for kind or similar: it s not a good idea to store users data in service cloud
Kinde allows you to export the data
@@ByteGrad it s not about export data, i am talking to not share your that with CS like kind or others
so node.js is better than next.js?
11:09 what a mess
I thought everyone was using nextjs in this way... why is it considered a weird approach? from the start its obvious you can't do everything in nextjs/javascript given its obvious limitations... I just do server side rendering with nextjs and all my endpoints are written in dotnet...
too large font
Vercel is pure crap hosting for Node-like apps and its too expensive for no reason. It offers nothing useful. Custom VPS and long live Linux for the win. PM2, NginX, Docker and sky is the limit.
Vercel provides you with zero downtime deployments, something that's extremely hard to do on your own. Unless you use something like Caprover.
Can you provide resources everything about deployment and what service is good if not vercel . I am new i don't know about this
@@drprdcts me laughs w kubernetes
There are plenty of alternatives for having zero downtime deployments beside vercel.. literally hundreds, the only thing you need is stop being lazy and learn something new 😅
My personal preferences are Jelastic (now part of Virtuozzo offering) or kubernetes, combined with multi region clusters I can even survive entire data centers blowing up 😂
I think using a vps with next.js is great in a lot of situations but I don’t know what you’re thinking saying that vercel offers nothing… it’s definitely the easiest way to deploy next.js and offers a lot.
Only way to use next.JS is backend as a frontend. No need to be putting business logic on there
detebeyss
Great video but raw access token in cookie isn’t very nice