Clean Architecture in Next.js: A Complete Implementation Guide

very good viedo. thanks! :)

Great video and explanation of each layer. I have one next.js specific question: should we prioritize server actions over route handlers? Are there any benefits to be gained from choosing one over the other?

Mind blowing. I wish I was a backend engineer I had hope to learn Architecruee stuff. I'm thankful I am Frontend Engineer, I should be disgrateful but Backend is OP.

Great video. Quick question. Isn't the `getInjection` helper function an example of the service locator anti-pattern that InversifyJS warns against?

what theme is this in nvim?

Bro, you saved my life! I'm struggled importing the reflect-metadata on NextJS all the time to implement dependency injection!

Изключително добре направено! Браво!

Great content, thank you! I have a question regarding the sentry config included in your project. I have never used sentry, suppose i would like to do a code along with your tutorial, will a free sentry account be sufficient to apply the sentry features or is a paid subscription with them required ? Thanks!

Hey, this is super interesting... however what I'm struggling with, is that in this approach frontend and backend is completely separated, which I get is the idea of this paradigm, however in practice the lines are not always clear. For example lets say I build a tax return form: I might want all the business logic structured as presented to nicely handle a submitted form on the server side but still show the user an estimated value while they are filling the form which doesn't need (and I think shouldn't) be calculated in the backend for every changed value. Same with validation: If I'm already using zod and frontend libraries, I don't have to deal with validation and displaying errors... this is taken care of in the frontend. I still need to perform the same checks on the backend but ideally a non-malicious user only submits validated data once everything is in order. A model might be fine to import from the frontend and use as my validation scheme but the calculator example its not quite clear to me how I would deal with such a scenario and where I would put the code/helper methods which perform the calculations in the end in order to maintain separation and allow reusability without risking to import code that is only meant for the server side (which might e.g. leak secrets) on the client side.

Any help/ideas would be greatly apreciated!

Top!

Okay, nice explanation, looks great, only one thing bothers me, and it is a big big thing for me.. an _all_ layers you have the sentry calls.. on ALL layers. How does this fit into the clean architecture, clean maintainable code etc. I don't see it, sorry. Otherwise great explanation.

Awesome bro, we absolutely need more of this excellent content. subscribed for more of this! thank you!

Thank you Lazar for your big efforts in this topic, your are using Lucia in this example, I'm struggling to do something similar with Next Auth, is there a good article/video about this approach?

this is what quality content look like. thanks!

QQ about input validation: Architecture wise ( looking good on a graph ), validation looks better in the controllers so both incoming ( from server ) and outgoing ( to server ) data is validated in the same place. But implementation wise validating your input data makes much more sense in the context of the form. Is the validation and form linked only by the form libraries, so its just getting used to it, or the proximity of the input to the form warrants its. Like you can validate the data without ever leaving the context of the form and calling a controller, vs calling the controller and returning the validation error in your onSubmit function and setting the errors explicitly from there ( as most form libs handle this explicitly ) ?

Thank you for the incredible amount of high quality information that you have packed into a hour long video! Very much appreciated 🙏 One question I would really like your opinion on and that is the choice for a DI library in TypeScript. You chose InversifyJS but there are others like TypeDI and tsyringe. All of them are not actively maintained for the past couple of years. Do you see any risks of implementing DI with these libraries, as is it part of the core of your codebase?

Would love to see this applied for a React + Vite SPA application!

Can we hire you?

Thanks for creating it. It blows my mind. Need such content more on your channel.

Thank you very much for the enormous effort you put into making this tutorial. I really like how you configure vscode. Can you share it with us? THANKS

Fantastic video. I’ve been searching for a pattern to help me apply domain driven design properly to next JS projects and this example is the inspiration I needed. So comprehensive!

Hey mate, question on your errors entities you have a type called ErrorOptions but its not being defined anywhere in the code and i dont see it as imported from an external package, where does that come from?
Thanks!

Thank you so much for this great video. I always heard about Clean Architecture and watched several videos, but I never truly understood it until now. After watching some videos that left me confused and even fearful of applying it, this one finally gave me a clear understanding to move forward. I love that it was demonstrated using Next.js because that's exactly what I'm learning.

Best Clean Architecture video ever, thank you 🙏🏻

That's really cool, but it's also complicated :(

Awesome video, could you please extend cover below things in second part?
In Clean Architecture
Where/how will handle global state like zustand or redux toolkit?
Where/how will handle constants and enums?
Where/how will handle language translation (for errors)?
Where/how will use
Where/how to map the types (separate types for Infra other layer)

@nikolovlazar Amazing stuff... The bit on the presenter was a great thing to learn, security, ui friendlyness and performance from not shipping extra packages.

Very clear explanations!
A possible improvement:
Instead of binding a test setup to the concrete implementation of your application's signInUseCase, you could create a wrapper for your tests like ```function authenticatedUser(): {sessionId: string} { return { sessionId: signInUseCase({user, password}).sessionId }```. That way if the meaning of what authenticated user actually is ever changes, you don't have to change it in all the test files.
It's a bit abstract with a simple example like this, but it will make more sense when you are testing behavior that depends on a certain application state. For example: If you want to test that deleted todos cannot be updated, then you will have to first create one, then delete it, and only then you can test for what you are actually interested in. Here you could have a deletedTodo() function that takes care of that setup

why we need sqllite instead mysql

One of the best and insightful videos that I have seen the last years in YT. Thank you man!

Pleasant to watch bringing some order to usual Nextjs chaos. Really good ideas and realisation here.
One thing i don't get fully is multiple controllers. Why is there createTodoController/getTodosForUserController/toggleTodoController (which acts like 3 different controllers) and not single TodoController with create/getTodosForUser/toggle methods?

Not finished the video yet but as someone using clean architecture and tdd most of the time I can say that you did it pretty well. You can also enforce these principles for new developers or for bigger teams with ts-arch.

I'm a self-taught developer so I only really get these types of knowledge from tutorials or just follow how these techs' documentations do it. I've watched and read different tutorials about good and clean architecture to follow but most of them are just really opinionated and not really explain why. But THIS particular video really got me. It's clean and each type of file makes sense and does different isolated work. I think I'll implement this architecture in my next projects. I mostly use Supabase and I'm excited as to how I will implement this architecture with that tech :D Thank you so much for this video!

Haven't watched the entire video yet but the diagram alone was SUPER helpful and needed, Thanks a lot. Wish I could give you multiple likes

Are the objects returned by your presenters essentially DTO's?

Which browser are you using?

Great video to explain clean arch! Im wondering that how to deal with stuff like internationalization etc that need middleware?

At last, Thank you

Using something like zsa would remove the need for input validation in the controller layer as it would be handled inside the action itself, maybe the session could also be validated inside the action and then the service would be called. This wouldn't be 100% compliant to clean arch because then the validation would belong in the framework layer and not in the interface adapters but It would be simpler to have the server action act as a controller

What nvim theme are you using?

Also, great video 🫡

zod for entities should be the norm hahah

Great video, I needed it ✨, I would like to see it in a more committed project but it still helped me, I still don't understand clean architecture so I will come back again

Very educative video. Create a larger project implementing the same

Maan thank you for your work. Greetings from Ukraine

Hey friend, I have an application with a large userbase, over 300k. I find that Sentry captures so many random JS errors that are unhandled and I have no idea why/what they do. It's like missing 'a' in some random js bundle, or scrollEvent, or some extension stuff. It consumes so many of my error metrics and it does nothing for me, what do you suggest I do in this case? I only want to capture relevant errors.

Wow , thanks ❤

My brain is currently stop working🤯

Having this clean architecture as boilerplate to start a new complex project, I think would be cool, with different packages like supabase etc