What Theo Won't Tell You About Next.js

can you write your back end in next.js next.js is a full stack framework and the last I checked full stack equals backend plus front end so by definition next.js has backend capabilities in fact next.js primarily runs on the server side it has very little front-end involvement it usually delegates most of the front end work to react so what does next.js really do a few days ago there was a huge discussion on Twitter about whether you should use nexjs as a backend or not it was triggered by this little up and coming content creator called Theo you might not know him I'll put a link to his channel down in the description Theo basically asked to all of you who aren't using next.js for your back end why obviously I responded to it very quickly with a quickly drawn out diagram about State full versus stateless back-ends but I don't think this tweet really even comes close to capturing the new ones in that argument before we dive into next JS let's first talk about some technical concerns that an application has UI is the part of your application that your user directly sees and interacts with the UI is dependent on these two components your front-end assets and different application the assets are static assets like HTML CSS JavaScript files images fonts things like that and different application is your JavaScript code or webassembly or any other language that you prefer that runs in the browser and is responsible for reacting to UI events or controlling the UI coordinating with the server and so on now both of these components need their servers so you need an asset server to serve these static assets to your browser when it requests them and you need an application server to get your backend functionality and basically have your front-end application talk to your backend application the backend application coordinates communication and logic between your business logic data logic and external Integrations and you can further classify external Integrations into inbound and outbound inbound is when your system needs to accept or receive messages from other systems and outbound is when your system is sending messages to other systems now let's highlight where next JS really helps us these are the components where next.js helps you solve complexity next.js has features like server-side rendering static generation ISR whatever that is I'm too dumb to figure out routing internationalization image optimization and a lot of these features that will help you a lot in these concerns but you still have to deal with the complexity in the other areas on your own now for a lot of people that is not a deal breaker and that is because applications don't have complexity spread evenly throughout all of these technical concerns let me show you what I mean this is an application that has a lot more Focus or and a lot more complexity on the front end this can be apps like zoo or figma or canva Excalibur notion these are apps that have that don't have a lot of complexity on the back end you can see that but all of it is focused on the front-end side next.js would be a great fit for an application like this because it's going to solve problems that you are going to run into a lot here's another application this looks more like a Content site marketing site blog things like that this has a lot more focus on assets uh which means that there's going to be a lot of perform performance constraints and once again next.js is a great fit for this application because it solves all of those problems that you will run into and while it doesn't deal with the back end you don't have a lot of complexity on the back end so you don't need it now let's look at an entirely different class of applications here this could be a microservice it could be a bot it could be a data ETL process that could be an AI algorithm or any sort of a background process or that you want to delegate some computation to this doesn't have a front end a next JS is utterly useless for an application like this because Nexus is solving all the problems that you don't have and it's solving none of the problems that you do now let's add a little bit of UI to this so now maybe this is a Discord bot or a twitch bot that has a UI that you can use to configure it I still wouldn't recommend you to use next.js for this because once again the problems that next.js is solving you are not really going to run into those because you don't have a very complex and very requirement heavy front end you need a lot more solutions on your backend side because that's where you're focusing now this is the kind of application that I am building currently at work once again I am not using next.js for this project because it's not really solving the big problems that I have you can see here that the two bright red hot spots in this application are the backend logic and the business logic which are Then followed by data and the front end and finally a little bit of assets and external Integrations for applications like these I would instead recommend something like nest.js nest with an S not with an X that the two have very similar names I don't know maybe they were intentionally planning on tracking us but anyways a framework like Nest helps solve complexity on these areas on the back end and that is what an application like this really needs so I would recommend using that for an application like this now that that is out of the way let's dive more into my contribution to this Twitter conversation my argument about a stateful versus a stateless backend is just one example of how uh next.js doesn't help solve complexity in backend logic and that is because next.js has a really simple mental model of the back end next is wants you to think almost purely in terms of HTTP functions you will either write a function that will accept an incoming request and fetch some data and throw them out as props to a component or you will write an API Handler or a middleware that once again accepts an HTTP request does some operations and returns nhttp response all your backend code has to live and run Within These two boxes now when your backend starts getting complex you often want to change this mental model and instead think of your HTTP operations as something that can trigger side effects now these side effects can be things that take a while and are not super important or critical to the main operation so you don't want the user to wait until all these side effects are finished for example when a new user signs up you might also want to create a profile for them and you might also want to send them an email now these are things that are not critical to a user signing up if one of these two things fail you don't want to fail the entire user registration process because the registration still happened you just want to do these other two things as a side effect of of that registration this is something you cannot easily do in next.js because once again Nexus wants all your backend code to live in HTTP functions now you can do things like send an HTTP response back and then continue doing things in that function or trigger an asynchronous operation without a weight in front of it and then just return your function but these are not good mental models to use when you are mapping out these complex workflows maybe you can do that if you just have one or two of these in your entire application but the fact that you have complex workflows like these is an indicator that you might have more in the future you might have to build a couple more of these tomorrow or and maybe by next year you'll have 10 of these or maybe half your entire application will be these complex workflows it's better to solve these complexities before your app becomes a ball of mud do you have backend code running in an xjs server let me know down in the comments and while you're there please subscribe to the channel

Channel: Dev Agrawal

Views: 43,578

Keywords:

Id: Rrz2q5uCHdE

Length: 8min 36sec (516 seconds)

Published: Sun Oct 16 2022

Reddit Comments

[u/nerdich]

You can use Next JS to develop the front-end but also the back-end of an application.

Many people recommend decoupling the front-end and back-end. Although this is a good practice in large companies. It is not worth it in small and medium projects where you have less human resources.

I prefer to build the MVP using next js as a full stack framework. Then refactor everything if necessary later if the application is hugely successful since manpower (money) will not be an issue.

Early optimization is a bad thing.

In almost all web application projects, the main problem to scale is the database, not the web servers. So you can run as many web servers as you want, but you can't do that for your database because it requires a single master for writing.

Thus next js or express or whatever is not the real problem. Your focus should be on optimizing the database queries and optimizing the database modelling.

[u/IAmSteven]

Get rid of that god awful music in your videos. It's super distracting.

[u/Johnfitz1775]

I'd recommend client/server relationship but NextJs has a few examples on their site of client/server combined into one package.

For production applications this would be a hard no but if your just developing hobby projects or demos it's fine.