@nikolovlazar

Update: I refactored the app and now we're running on any runtime, including Vercel's Edge (hello middleware)! Check out my latest video to see the refactoring: https://youtu.be/Yliaah4oiZY

This is the definitive guide on how to implement Clean Architecture in Next.js. It's almost an hour, so grab a coffee or tea and dive in. Hope you enjoy this video! Some of you pointed out that using Sentry directly is breaking CA’s rules, and you’re right! I had to take a shortcut there, but I forgot to mention that in the video. If you have any questions, don't hesitate to reach out to me in the comments, or in my Discord server: https://creatures.sh.

πŸ”— Links from the video:
πŸ‘‰ GitHub Repo: https://github.com/nikolovlazar/nextjs-clean-architecture
πŸ‘‰ Demo: https://next-clean-arch.vercel.app/
πŸ‘‰ Clean Architecture article: https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html
πŸ‘‰ My interpretation diagram: https://app.eraser.io/workspace/fAyjQlkBiC7AoAoYoPnw?origin=share
πŸ‘‰ Configure Inversify in Next.js video: https://youtu.be/2NVYG5VDmwQ
πŸ‘‰ Test case naming guide: https://www.epicweb.dev/talks/how-to-write-better-test-names

@jeongjehoon2

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!

@spicy-bear

Implemented this in all of my projects, big or small. It made everything faster and easier from development, testing and deployment. Thank you!

@shashank_rajak

I started creating a NextJs full stack app with all the backend logic using Prisma, auth etc and it was so confusing how to structure the project and handle data fetching and all the related use cases. This video gave lot of insights on it. Amazing work!

@aliasgharhosseinibagheri

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

@carlpahuyo4482

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!

@drosi1994

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

@tabangoscloud

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.

@0xmetalogica

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!

@webowodev

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

@harshitsahu8704

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

@BladesGamings

this is what quality content look like. thanks!

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

@KingDebo-rm7gj

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

@vonghesjonovan

:medal-yellow-first-red:WOW!! So much bonus in that video!! Thank you so much!!! You made life easy for JS dev! πŸ”₯πŸ”₯πŸ”₯

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

@didholipyan8227

My brain is currently stop working🀯

@werix_4776

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

@mickholler

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

@bruno_guyy

I would be very happy learning Testing from you !!! Your tests look very nice for someone who has been coding without testing. Looking forward for a video of yours teaching Unit testing whether with Vitest or anything ! πŸ˜