Next.js with a separate server - good idea?

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

[@ByteGrad]

Hi, my latest course is out now (Professional React & Next.js): bytegrad.com/courses/professional-react-nextjs -- I'm very proud of this course, my best work! I'm also a brand ambassador for Kinde (paid sponsorship). Check out Kinde for authentication and more bit.ly/3QOe1Bh

[@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]

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

[@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]

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

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

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

[@rajfekar1514]

Feel happy for new knowledge. when get notification❤

[@ByteGrad]

Great 👍

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

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

[@gyros9162]

This is exactly what I need now!

[@ByteGrad]

Enjoy!

[@keynertyc]

Excelente, gracias crack! Saludos desde 🇵🇪

[@kostia-stoliarskyi]

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

[@404-not-found-service]

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

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

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

[@1_PieceOfCode]

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]

Thanks! Enjoy

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

[@Code-sz9db]

This is what I need. But how do you access/import files i.e the db connection that is in the common folder? For instance if you have prisma in the common folder how do you import it in the next.js directory and in the express directory?

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

[@RaphaelChia]

love this content

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

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

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

[@suyogmahangade8434]

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

[@user-fg8jh4do8j]

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

[@LksNunss]

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

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

[@0xiliyan]

Excellent video, so useful, so it means Express.js for backend + Next.js for frontend is best scenario?

[@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!

[@el_mahnuel]

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.

[@DjLeonSKennedy]

Good video, thank you

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

[@gphii]

Hey can I host my next js frontend and node js backend on a single server? And can I still use the next js server side rendering like Vercel?

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

[@evanyang9739]

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

[@anujtodankar1863]

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

[@AlanDanielx]

@bytegrad i have a very important question. Working with nextjs as a static site, how can i make the dynamic Routes work since nexts asks us for getStaticPaths and prerenders those routes only at built time? Ive been stuck with this for months

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

[@joaoarthurbandeira]

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

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

[@zerefdev]

Vercel/Serverless is missing in the title.

[@KhadetouDianifabeOfficial]

Is that also the case with nuxtjs ?

[@QiMU01]

Thanks!

[@ByteGrad]

Thanks, appreciate it!

[@QiMU01]

​@@ByteGrad No problem!

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

[@praveenkumart4106]

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

[@stevebendersky2056]

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

[@mrBurlaka1]

cool!

[@dananjayachathuranga7113]

thank you

[@ozdadev]

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

[@John-vm7fq]

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

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

[@chaitanyasharma6270]

why can i not deploy it to someplace other than vercel?

[@belmo_]

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

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

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

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

[@vitosnatios]

Why not use both at the same tome

[@atharvdalal9493]

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.

[@mihaillepadatu8256]

Legend 🫡

[@geeksy2278]

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

[@lcarv20]

11:14 this gives me anxiety. But awesome video

[@mohiwalla]

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

[@APPoholicReview]

No

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

[@sidds09]

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

[@_Who_u_are]

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

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

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

[@nasko235679]

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

[@justine_chang39]

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.

[@planesrift]

When will we get back to PHP + jQuery

[@jotaroisdarius1918]

i hope we never do

[@himankshu]

I took a good decision choosing mern over next js

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

[@TryingCodeEng-58208]

use nextjs for frontend and nodejs, apollo use for backend

[@amtnk9232]

so node.js is better than next.js?

[@brancode404]

Please make a tutorial to build express API then.

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

[@coolemur976]

11:09 what a mess

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

[@user-re7hx3sq2c]

too large font

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

[@Comphonia]

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

[@ameernabil3951]

detebeyss

[@AnsisPlepis]

Great video but raw access token in cookie isn’t very nice