Clean Architecture in Next.js: A Complete Implementation Guide

🔗 Links:

--

--

Chapters:
00:00 - Intro
00:26 - Clean Architecture 101
07:22 - App Demo
08:04 - Project Structure
11:17 - Frameworks & Drivers Layer (server actions)
13:56 - Interface Adapters Layer (controller)
24:24 - Application Layer (use case)
26:58 - Infrastructure Layer (repository & service)
31:39 - Dependency Injection
35:40 - Unit Tests
42:21 - Sentry and Codecov
43:14 - Tracing
48:21 - Performance Modules
50:03 - Errors
51:15 - Codecov
52:13 - Outro

[carlpahuyo]

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!

[jeongjehoon]

I had a hard time applying Uncle Bob's Clean Architecture theory to the NextJS project in practice.
This video tells you how to properly separate the business logic from the framework code (including, finally, proper testing).
We can't apply everything equally, but it was very beneficial to see the theoretical concept as a real project.
Thank you for making a good video!

[aliasgharhosseinibagheri]

This content was very, very great.
I, who wanted to get acquainted with clean architecture, got a very good result.
thank you

[drosi]

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

[webowodev]

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

[xmetalogica]

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!

[harshitsahu]

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

[steventabango]

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.

[BladesGamings]

this is what quality content look like. thanks!

[werix_]

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

[KingDebo-rmgj]

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

[spithacode]

Thanks for the great video lazar.

Watched more than 5 streams then didn't have time to watch more glade that you dropped this one.

[kanogl]

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

[kiddienoob]

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

[diegoskbt]

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

[sasquatch_devs]

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

[camchn]

Best Clean Architecture video ever, thank you 🙏🏻

[cesar-brandon]

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

[shaked]

This is a very detailed video about clean arch, very well made. thanks

[Evyweb]

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.