Next.js with a separate server

Next.js with a separate server - good idea?

Рет қаралды 44,702

Күн бұрын

Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 Add auth to your Next.js app FAST: bit.ly/3QOe1Bh
👉 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

Пікірлер: 146

@kocourekkocourek-pq2tm Ай бұрын

I would like to see big next.js course/project with a separate backend. Thank you for providing us so valuable content.

@alexenax1109 Ай бұрын

It would be super interesting to see the same implementation with an open source framework like next-auth. However, great video!

@naylord5 Ай бұрын

this

@raphaelsa4416 Ай бұрын

this 2

@rajahutan1988 Ай бұрын

that

@ozdadev 8 күн бұрын

This is needed, and most of the tutorials available doesn't use easily maintainable fetching mechanisms

@imkir4n Ай бұрын

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.

@JesseConner1 Ай бұрын

Great video! This is something that is usually glossed over in Next tutorials and frequently a "find out the hard way" kind of thing

@CodeZakk Ай бұрын

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❤❤❤🎉

@user-jf2ui2qy1y Ай бұрын

Just was thinking about this idea. Thanks a lot for the video

@maacpiash Ай бұрын

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.

@Vantivify 11 сағат бұрын

do you have any guide for such tech stack setup? I would appreciate !

@dopetag Ай бұрын

Useful! Keep this videos coming. People still think that using Next.js makes you locked into Vercel hosting.

@technologymad9253 Ай бұрын

do more these kind of videos! thanks for such great content❤

@ByteGrad Ай бұрын

Thank you! Will do

@tom.watkins Ай бұрын

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

@mikelautensack7351 Ай бұрын

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.

@Tszyu01 Ай бұрын

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.

@rajfekar1514 Ай бұрын

Feel happy for new knowledge. when get notification❤

@ByteGrad Ай бұрын

Great 👍

@keynertyc Ай бұрын

Excelente, gracias crack! Saludos desde 🇵🇪

@1_PieceOfCode 23 күн бұрын

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.

@ByteGrad 23 күн бұрын

Thanks! Enjoy

@kostia-stoliarskyi Ай бұрын

Thanx for the video! But is next+drizzle (for example) is not solution for question in next with db?)

@gyros9162 Ай бұрын

This is exactly what I need now!

@ByteGrad Ай бұрын

Enjoy!

@404-not-found-service Ай бұрын

Thank you for the video, it's really interesting. Greetings!

@markmaksi Ай бұрын

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?

@ayukalvieri3154 Ай бұрын

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

@anujtodankar1863 Ай бұрын

Can you make next 14 with next-auth using backend node.js - credentials(email and password).

@jovanjevtic1620 Ай бұрын

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.

@debarshidas8678 Ай бұрын

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. ❤

@LksNunss 20 күн бұрын

@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?

@DjLeonSKennedy 28 күн бұрын

Good video, thank you

@jordymaryns4945 Ай бұрын

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.

@ByteGrad Ай бұрын

Great idea

@tylerdrabek1592 Ай бұрын

I agree this would be great to see.

@codeschool3964 Ай бұрын

Yes please.

@kisstamas6675 Ай бұрын

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.

@rajnishps Ай бұрын

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

@kisstamas6675 Ай бұрын

@@rajnishps unfortunatly i never used graphql in this tech stack, so don't really know how to solve this, i'm really sorry

@DomskiPlays Ай бұрын

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?

@kisstamas6675 Ай бұрын

@@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 😅

@RaphaelChia Ай бұрын

love this content

@suyogmahangade8434 Ай бұрын

i am kinda new to nextjs does any tell me how can i accesss that shared folder inside next app src folder?

@juanwea223 Ай бұрын

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!

@ByteGrad Ай бұрын

Hi, we do talk about a lot of advanced Next.js concepts, but not this

@Aditya-lc5uk Ай бұрын

Till now we used nextjs so we dont have to make another server...and now we are using nextjs with another sever ?? 😭😭

@ByteGrad Ай бұрын

Welcome to web dev! Haha

@jeffkirchoff14 Ай бұрын

Use turbo repos for multiple applications

@user-fg8jh4do8j Ай бұрын

How does getKindeServerSession get you the localstorage token from the server? how can it access it?

@snivels Ай бұрын

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

@ByteGrad Ай бұрын

Interesting idea

@ayukalvieri3154 Ай бұрын

Exactly

@joaoarthurbandeira Ай бұрын

Hey, could you show us how this would be with NextJs + Django Rest Framework? Thanks!

@shakapaker Ай бұрын

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

@el_mahnuel 24 күн бұрын

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.

@praveenkumart4106 Ай бұрын

NextAuth is the issue I am also experiencing. I resolved it using the authO service.

@evanyang9739 Ай бұрын

How to deploy the project on the same VPS in this case?

@QiMU01 9 күн бұрын

Thanks!

@ByteGrad 8 күн бұрын

Thanks, appreciate it!

@QiMU01 6 күн бұрын

@@ByteGrad No problem!

@ezrawebdev Ай бұрын

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!

@ByteGrad Ай бұрын

Thanks for sharing, enjoy the course!

@darawan_omar Ай бұрын

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

@twanaahmed7819 Ай бұрын

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

@sawos1596 Ай бұрын

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

@belmo_ Ай бұрын

That sounds logical for a every experienced dev but what about SSR when using a custom server?

@berkaycirak Ай бұрын

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 :)

@user-fr2fm3ri3w Ай бұрын

Next creates an api route automatically that’s hidden from you basically

@ByteGrad Ай бұрын

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.

@berkaycirak Ай бұрын

@@ByteGrad thanks for answers, I am happy to think same idea about that structure :)

@ozdadev 9 күн бұрын

Can you do a production grade project with NextJs and custom server, including SSR, CSR access refresh token, protected routes, redis caching for data fetching, using opensource libraries

@atharvdalal9493 4 күн бұрын

I just have one question. Recently, I went through the cohort student profiles, especially those who got a job and won a hackathon. I saw their projects, and they are building everything in Next.js. They use Next.js for both the frontend and backend, and they got jobs as full-stack developers. So my question is, why are they not using Node.js for the backend? Is Node.js not commonly used in real-time applications? I am a Node.js backend developer, and I don't understand how they are building these complex projects using only Next.js. I am a fresher Node.js backend developer and did not get a job. They say they don't hire freshers for backend roles. Should I learn Next.js and go for a full-stack position or stick to the backend? I have an intermediate level of knowledge in React.

@KhadetouDianifabeOfficial Ай бұрын

Is that also the case with nuxtjs ?

@mrBurlaka1 Ай бұрын

cool!

@user-re7zb6oo2s Ай бұрын

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)

@edhahaz Ай бұрын

That's how I understand it as well, the serverless implementation is only sold at vercel.

@zerefdev Ай бұрын

Vercel/Serverless is missing in the title.

@nasko235679 2 күн бұрын

This topic has very little info and I find it's extremely difficult to research. So let's say I host my next app on a vps and I have a websocket server for messenger functionality. How do I integrate one into the other? How do I write the frontend code in my next app for the chat while connecting it to the websocket server? It's so difficult to grasp because the concept that nextjs itself is not exclusively "serverless" and the type of server depends on the type of deployment is complex enough as is. Does running the development environment with "npm run dev" have the same behavior as hosting the app on a long-running node server? I'm just so confused man...

@areyouraphael Ай бұрын

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?

@EduarteBDO Ай бұрын

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.

@EduarteBDO Ай бұрын

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.

@John-vm7fq Ай бұрын

This is basically Laravel (backend) + Inertia (Glue/ Connector) + React/Vue/Svelte

@stevebendersky2056 Ай бұрын

Why do you use env.local and not .env regular?

@Tian-wi6qr Ай бұрын

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?

@ByteGrad Ай бұрын

Just using a pure React Vite SPA in that case makes sense I think yes

@dhrambiragarwal3520 Ай бұрын

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 👍

@Tian-wi6qr Ай бұрын

@@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?

@dejancavic8649 Ай бұрын

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.

@mohiwalla Ай бұрын

#question Can I deploy an express app on Vecel or any free platform for deploying fun projects?

@APPoholicReview Ай бұрын

@Innesb Ай бұрын

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”.

@Innesb Ай бұрын

@@APPoholicReview Why are you saying no? There’s an article in the Vercel docs explaining how to configure an Express app.

@jotaroisdarius1918 Ай бұрын

yes

@mohiwalla Ай бұрын

@@jotaroisdarius1918 What's that bruh..?

@siddb09 Ай бұрын

will you not have your react/next course on udemy? js course was very good.

@ByteGrad Ай бұрын

Great to hear you enjoyed the JS course. The React/Next.js course will only be available on the website :)

@JustCode39 Ай бұрын

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.

@_Who_u_are Ай бұрын

Bro Which stack is best...Php- Laravel, or MERN!! Which is stable and futuristic... Or there is another stack!😅

@ikarya4159 Ай бұрын

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?

@ByteGrad Ай бұрын

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

@ikarya4159 Ай бұрын

@@ByteGrad thanks for the reply

@vitosnatios Ай бұрын

Why not use both at the same tome

@geeksy2278 Ай бұрын

That's always the point I switch back to Laravel. 😅 Especially I can use shadcn/ui and co with Laravel.

@mihaillepadatu8256 Ай бұрын

Legend 🫡

@cantellyoudam Ай бұрын

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!

@buzz1ebee Ай бұрын

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.

@cantellyoudam Ай бұрын

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.

@mma-dost Ай бұрын

Hey, micro frontend and module federation crash course please.

@planesrift Ай бұрын

When will we get back to PHP + jQuery

@jotaroisdarius1918 Ай бұрын

i hope we never do

@lcarv20 23 күн бұрын

11:14 this gives me anxiety. But awesome video

@UwU-dx5hu Ай бұрын

But how will leverage next-auth on a separate custom server😢😢

@praveenkumart4106 Ай бұрын

This is the one I am also suffering with. I have overcome with authO service.

@himankshu Ай бұрын

I took a good decision choosing mern over next js

@amtnk9232 Ай бұрын

so node.js is better than next.js?

@IncomingLegend Ай бұрын

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...

@brancode404 Ай бұрын

Please make a tutorial to build express API then.

@FikriHaikal-he4bg Ай бұрын

This is getting nut

@kamalkamals Ай бұрын

for kind or similar: it s not a good idea to store users data in service cloud

@ByteGrad Ай бұрын

Kinde allows you to export the data

@kamalkamals Ай бұрын

@@ByteGrad it s not about export data, i am talking to not share your that with CS like kind or others

@coolemur976 Ай бұрын

11:09 what a mess

@user-re7hx3sq2c Ай бұрын

too large font

@Comphonia Ай бұрын

Only way to use next.JS is backend as a frontend. No need to be putting business logic on there

@zlackbiro Ай бұрын

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.

@drprdcts Ай бұрын

Vercel provides you with zero downtime deployments, something that's extremely hard to do on your own. Unless you use something like Caprover.

@AdolfRizzler41 Ай бұрын

Can you provide resources everything about deployment and what service is good if not vercel . I am new i don't know about this

@kale_bhai Ай бұрын

@@drprdcts me laughs w kubernetes

@CodiceMente Ай бұрын

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 😂

@Pete133 Ай бұрын

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.