E1: Clean Architecture in Next.js

[@nikolovlazar]

This live stream series is A LOT, so I distilled everything we learned + built a proper demo app that's open source into a 53 minute tutorial: kzbin.info/www/bejne/oHu5cp-XZcmKgNE

[@matyascsoti4400]

My dude, i am a self taught junior developer and whilst i can write clean code, after 2 years now i realized how our apps we / i am working on have 0 architecture, 0 high level thought, and they are a complete mess on this level and the problems they bring. And it seems my peers are absolutely oblivious to this as they did not signal this and also we never had an 'architectural discussion' ( if that is even something happening at other places :D ), and as such i have no direct peer to learn from. So these kind of videos are gems inside the superficial hello world application videos most of youtube is filled with.

[@dgleitaocontratos]

welcome

[@nikolovlazar]

Woah this series took off! I'm happy you all like it! Hope you enjoy this series, and don't forget to subscribe to get notified when I post more content! Thank you all 💖

[@NaniwaRocky]

I was looking for a nextjs clean architecture in-depth setup, i really appreciate this series I will check it out thanks to youtube algo. A small suggestion would be adding chapters to your live streams after they're done. Thanks a bunch!

[@nikolovlazar]

@@NaniwaRocky Thanks for the suggestion, and I'm glad you liked it! I'll look into adding chapters, but nevertheless, there's going to be a proper KZbin course on how to achieve this, and it won't be HOURS of content 😅

[@gadgetboyplaysmc]

No one usually talks about this. Thanks man! I don't use Next anymore, but love learning architecture and DDD in general.

[@dragosbur]

What do you use? 😎

[@ahmedjaber8595]

From web dev cody ✌️

[@nikolovlazar]

WDC is GOAT 😁

[@mystupidbrain5299]

Same

[@kristian970]

Thank you for that stream!

[@tconroy]

Just so you know for the future: when passing arguments to constructors in TS, you can automatically assign them to properties on the class with a syntax like `constructor(private id: string) {}` -- that way you don't have to repeat both the property definition and the assignment.

[@nikolovlazar]

Oh I did actually type them like that. A person in the chat reminded me. Thanks for the suggestion!

[@FuzzyAnkles]

Thats pretty cool video. Would be nice to have github repo to check how things are built. That would help a lot.

[@nikolovlazar]

Thanks! I'll publish a demo project that implements everything we'd go through in this stream, plus a more polished proper KZbin tutorial that's shorter than the live streams 😁

[@ProgrammingwithUmair321]

Great session man. I like your keyboard setup too 🔥😃

[@nikolovlazar]

Thank you!

[@freshu2334]

Great stuff, would be awesome to have a demo repository with this architecture approach example :)

[@nikolovlazar]

There will be. As soon as I'm done figuring things out (this stream is me figuring things out) I plan on recording a proper KZbin tutorial that's shorter than the live streams and also publish a demo repository as well!

[@RockCYP]

Just started watching this, great topic to dive into btw. Just wanted to say I am not a huge fan of not using a test database because the mock data can become stale, where as a test database should always be 1:1 with the dev schema at least. Would love some opinions though.

[@nikolovlazar]

This would be an interesting problem to figure out. Curious to hear how would you set up testing with a database. What I'm thinking of is spinning up a docker compose config that sets up a pre-seeded db alongside the tests service and tear it down once the testing is done. I'm not 100% sure how would I set up the tearing down trigger though, but it could be cool to play around with that. How would you set this up?

[@chenrvn]

​@@nikolovlazarsound interesting. I think there is several level of testing abstraction and it might suitable for kinda mock e2e test. I belive that maintainability for the test is very important

[@BibhuBal]

Your are just Professor Dumbledor form Harry Porter . Deep , Clean and Clear

[@gamingwolf3385]

Bro , you are amazing keep going , this series is what we really need , javascript ecosystem is not clean hhh or we don't know how to organize things , not like c# devs

[@nikolovlazar]

Thank you! Let's change that! 😁

[@gamingwolf3385]

Bro i start learning c# , can you suggest some resources ? In a clean architecture way ​@@nikolovlazar

[@gamingwolf3385]

Bro , can you explain clean architecture in c# , i started learning c# , its a beautiful language Thank you 😁

[@nitindevatraj]

We need more stuff like this, ❤

[@ynspc]

That keyboard loved it. :D

[@Luisllaboj19]

Hi, for the error handling do you usually throw errors in every layer? Where do you catch them, do you wrap the top level layer in try{}catch{} block or do you let nextjs take care of rendering the error page fallback? Error handling seems so subjective :C Great video btw it's so nice to see other people struggling in live session coding because all tutorias make it look like it's clean and perfect all the time lol

[@rithalius8219]

I would like to have the answer of this question. I am also having trouble handling errors. Did you find the optimum solution to this or close to optimum?

[@nikolovlazar]

We’ll try to figure that out in the next stream (today!). I’m going to be setting up Sentry in this project, so every non-catched (and even some catched ones) will end up being sent to Sentry. When it comes to handling them, I found that services should throw, but actions should return objects so the UI can provide feedback to the user.

[@Luisllaboj19]

@@nikolovlazar Yes, and I assume that the persistance/db layer throws errors under the supabase api when anything out of the normal happens. Also makes sense actions return an object, and in that case, do you make sure every time you return the same shape of object like follwing a contract with discriminate unions or something of the style? Thank you, looking forward the next stream! This has been very insightful!

[@nikolovlazar]

@@Luisllaboj19 Yep! The "zsa" package allows us to define the output just as like we define the input. I do have an example for this that I will showcase at the very beginning of the stream today.

[@jeffedmo2218]

Absoluetly love this. Thank you. Any chance of getting a neovim / tmux / terminal setup video?

[@nikolovlazar]

I did start to put together some content on Neovim. It will be fun creating a video on my neovim setup and workflow.

[@bwest-dev6241]

Hi, thanks for the great tutorial and series. Really enjoying it. Small problem I had watching was would have been nice if it was from scratch so we (i could code along) as you explained things. like the structure, creating of some of those files, but I still enjoyed it. h

[@nikolovlazar]

Glad you enjoyed it! I do have a more concentrated tutorial that you can check out here: kzbin.info/www/bejne/oHu5cp-XZcmKgNE this one too doesn’t cover starting from scratch, but it’s showcasing clean architecture on top of a smaller GitHub project.

[@anuragraou]

Very cool video. I had a doubt, you talk about the persistence layer taking a input and giving an output without authorization, Can a user just bypass the Bussiness Layer and directly call the persistence layer because I can track the requests using the networks tab in developer options?

[@nikolovlazar]

A user can't bypass the business layer because the only touch point with the backend is the route handler (or server action). A developer can bypass the business layer and directly use the persistence APIs, but there's nothing you can do to prevent that (maybe you could with a monorepo and a good dependency config).

[@kiransilwal]

My only question is on generating nanoid. In the repository layer we are tightly coupling our persistence/data layers with a package. Please correct me if I am wrong, wouldn’t it be better if we pass that package through the constructor as a service so that it is not tightly coupled to the library?

[@nikolovlazar]

It’s perfectly fine that the repository implements specific libraries. Nanoid could additionally be isolated in its own service, but I deemed it might be an overkill for this scenario.

[@jss_developer]

I definitely see the value in this, but for my new MVP this might be an overkill atm, but once its launched and others start working with me then this would make absolute sense, less files edited, more concise folder structures. this makes sense actually. Ill need to take some time to organize it like this.

[@nikolovlazar]

I also think that's the way to go. If you're starting a new project from zero, don't pay too much attention to this until you reach MVP state, or have validated the idea. Once things get serious, or other people join the project, it's definitely a good idea to establish either CA or a similar architecture so everyone's "talking" the same language. Even code reviews are faster when everyone writes code in a common predictable way. Not to mention, but debugging is faster as well. You'll know where you need to look at.

[@piyushacharya7696]

Hey man, how did you achieve such smooth scrolling in your Neovim? Is it because of the Kitty terminal? Please share.

[@nikolovlazar]

It's probably the quick repeat effect: github.com/nikolovlazar/dotfiles/blob/main/.zshrc#L52-L55

[@piyushacharya7696]

@@nikolovlazar Wowww! Thank you so much. You don't know how much I love this change. I did change it through the system settings, though.

[@ray941644]

Subbed!! Came here from WDC 😊

[@jiachen1078]

thank you!

[@kiransilwal]

1:35:48 Effect looks good. Is it just like Promise from fp-ts? I found that way of error handling easy and light weight.

[@nikolovlazar]

It does look like it has a bit of learning curve, but I do think it's a really cool library!

[@Deus-lo-Vuilt]

I came to review concepts, hopefully later we can see a complete auth system with the backend and frontend to see the entire flow with architecture, how to handle everything with jwt and so on.

[@nikolovlazar]

Yes the course that I plan to release will use either next-auth or lucia, not Supabase.

[@Deus-lo-Vuilt]

@@nikolovlazar thanks

[@w3mw]

What keyboard are you using? :D Will you create a video about neovim how to install it and with your config? :D

[@nikolovlazar]

It's the ZSA Voyager. It has been requested previously, so I might end up making a video on how I achieved this setup and what goes into it.

[@hello19286]

I might have missed it in the video, but how do you plan on setting up/instantiating your services in page.tsx files and any other location that is not a server action? I did something similar to this on a vite-react project where I created a provider and had a hook that returned my services, but that's not really an option in server components.

[@nikolovlazar]

We’re yet need to think about this.

[@김인욱-u5q]

Could you please let me know why you are calling const supabase = createClient() for each function?

[@nikolovlazar]

I had to because creating it once in the constructor didn't take into consideration the session for each request. Maybe there is a way to only "refresh" or "reload" the session from the request, I just didn't look into it. But that's the reason.

[@SajidAliSoftwareEngineer]

what settings you are using for neovim can you please share your neovim config

[@nikolovlazar]

Of course! Here's my dotfiles repo: github.com/nikolovlazar/dotfiles

[@Mari_Selalu_Berbuat_Kebaikan]

Let's always do alot of good

[@jonasj2627]

What do you think about using row level security?

[@nikolovlazar]

I like the concept, but I still don't understand them fully. I need to spend some more time playing around with RLS. Any tips? 😁

[@JPORTES]

Hello! I LOVED YOUR KEYBOARD! what is the model?

[@nikolovlazar]

It's the ZSA Voyager!

[@Tapadar.Monsur]

Lazar, what code editor and theme are you using??

[@nikolovlazar]

It’s Neovim, running within Kitty! Check out my config: github.com/nikolovlazar/dotfiles

[@rahulprasad3575]

@@nikolovlazar how can i apply the same theme as yours from the dot files?

[@nikolovlazar]

@@rahulprasad3575 It's a combination of Kitty config and Neovim config. Kitty's theme defines the background and everything outside of Neovim. Neovim only defines the syntax highlight colors, the contrast, etc... Kitty theme config: github.com/nikolovlazar/dotfiles/blob/main/.config/kitty/cyberdream.conf (mind the background - it's in the repo) Neovim theme config: github.com/nikolovlazar/dotfiles/blob/main/.config/nvim/lua/plugins/colorscheme.lua

[@SrdjanRakic-y8u]

Hey man are you from balkan originally? :D

[@nikolovlazar]

Hey Srdjane! Yes I am 😁 I’m from Macedonia, but moved to Canada last year.

[@SajidAliSoftwareEngineer]

I also like I prefix for interface. basically I am dotnet software engineer.

[@SajidAliSoftwareEngineer]

niece session. you nicely teach.

[@nikolovlazar]

Thank you Sajid! Glad you liked it!

[@KrishnaList]

Also make projects using DDD CQRS Event driven architecture

[@nikolovlazar]

Exploring DDD on this channel would be cool. Thanks for the feedback!

[@Deus-lo-Vuilt]

Thanks :3

[@chenrvn]

@nikolovlazar it will be very intersting to implement the Hexagonal (Ports and Adapters) architecture on Next.js :) do you maybe have a plan to do that? Thanks, Men! appreciate your excellent work!!

[@nikolovlazar]

Thanks! I don't have plans to do that, but it would be interesting. I was planning on doing this CA series and then move on to deploying the newly refactored Next.js app on Hetzner with Docker, and the whole setup with CI/CD, creating Docker images etc...

[@chenrvn]

BTW where do you put hooks in which layers?

[@SajidAliSoftwareEngineer]

where I can find your code repository

[@nikolovlazar]

This project is still close-sourced, but I do plan on making a proper, a more polished KZbin video with a demo project where I go through the same refactoring steps that I'll do in this series. That demo project will be minimal and contain only the relevant parts for the lesson, so it's going to be much cleaner and easier to understand. I'll post the video with the project on my channel, so keep an eye on it! 😁

[@ftacapa]

@@nikolovlazar I'm waiting for that tutorial, I would love to learn how to implement this clean architecture with server actions in next js, great content ✨

[@nikolovlazar]

Thanks 🙏

[@HadesGodAum]

What is the book that you open along with?

[@nikolovlazar]

Oh those are just my notes for the stream 😅 it's a plain notebook

[@kesar]

is there any gh repo w the final code?

[@nikolovlazar]

No repo yet. This series is me figuring stuff out together with y'all, but I do plan on releasing a more polished, proper KZbin tutorial that's not N-hours long and that uses a demo project created specifically for it. That demo project will be open source.

[@tharindudarshana6480]

No relying on underlying implementation is called abstraction - kzbin.info/www/bejne/eJK4pH6Ba6aLa7M - its a fundamental concept in Software engineering. To make a more sense, your car is a better example, you don't need to know anything about how it works just to drive and use it for your needs 🤫

[@nikolovlazar]

That’s right!

[@okkashaally2115]

Please create you development environment setup series

[@nikolovlazar]

Will do! A number of people have already requested that. I'll definitely publish a video on my dev environment. Keep an eye on my channel for it!

[@okkashaally2115]

Please create your development environment setup series

[@nikolovlazar]

My Neovim setup? A few more folks have requested it as well, so I’ll definitely record a video on it!

[@okkashaally2115]

@@nikolovlazar yes for sure, and some more NextJS software tutorials right now you just have one the card, but we'd love a software as this one from scratch.

[@nikolovlazar]

Not sure if you've seen it, but I published a video on my dev environment setup a couple of days ago: kzbin.info/www/bejne/fWiQooiDgLh7lbs

[@devflo]

Also from web dev cody

[@nikolovlazar]

Welcome WDC gang! 🙌

[@repinor]

Min 3:16.. There are very important concepts that you are just misunderstanding. Layers is a different pattern. Just check!. Maybe DDD theory would help you understand much better the graphic that depicts Clear Architecture.Actually, the architecture you depicted is Classic Layers.

[@chenrvn]

@@repinor I understand your point but keep in mind that you can look any archetcture such: Hexegonial, clean, onion as some layering archetcture. In general the most important thing is the separation and dependency.

[@repinor]

@@chenrvn Indeed,, I agree that you should use design principles independly of what architecture style you use, however the approach it’s being explained here is conceptually wrong. You can not think DB and Web and Devices are in the same layer, even they could be “outside” they have complete level of visibility. Hexagonal Architecture and clean Architecture in my opinion are like a kind of composable architecture in which there are levels of privacy and visibility that plays a very clear role along the solution. My point is, you should use design principles like SOLID, DRY, KISS, YAGNI, OO principles, etc, but you can not confuse design principles with architectural styles. In my opinion the way Clean Architecture is approached here is being confused with Layers.

[@repinor]

@@chenrvnBut, what is wrong with Layers? 1. Promotes Database Driven Design. 2. Hides use cases. 3.Makes parallel work difficult, 4. Grows hard to Test and I’d say that it’s prone to shortcuts. In the long run, it will happen, because, you know the speed of the business.

[@chenrvn]

@@repinor it's a great concepts. I just say that you can think of clean architcture also as a "layer" archetcture. It depend how you determine it. All what you mention above is an excellent and proved concepts :-)

[@iykazorji8171]

What keyboards are those?!

[@nikolovlazar]

It’s the ZSA Voyager!

[@iykazorji8171]

@@nikolovlazar Oh it's the same I have just looked curved in the video!

[@nikolovlazar]

@@iykazorji8171 I've attached a couple of phone holders below it so I can bring it to a 30 degree angle 😁 Here's how it looks like: www.reddit.com/r/zsaVoyager/comments/1dmrl4d/comment/l9xvmx1/

[@iykazorji8171]

@@nikolovlazar Ah, thanks! Gonna try this out!

[@ogbillity]

Thank you so much. Can you share the source code.

[@nikolovlazar]

You're welcome! This project will most likely remain close sourced, but I'll be creating a different one (much simpler one) after this streaming series to showcase the architecture. I also plan on publishing a proper, more polished KZbin video on this topic that will use the demo project, so make sure to keep an eye on my channel!

[@NickHamilton88]

@@nikolovlazarnice that would be helpful

[@sebastianflajszer6969]

I am just watching this moment 1:25:48 , so maybe you've changed it later, but with typescript you can create a constructor like this constructor(private test: number) {} and it will automatically create a private property and assign the value to it :)

[@nikolovlazar]

Oh nice! Thanks for the tip, Sebastian!

[@Cyber_Lanka]

Nice video. But this is over complicated for most projects

[@nikolovlazar]

You definitely shouldn't do this for every project, but as your project grows into complexity you'll find yourself needing to implement something like this.

[@gadgetboyplaysmc]

My toxic trait is thinking I could recreate your theme on Neovim lmao. It looks really fukin good but I remember spending weeks on mine and still turning out crap and made me 10x less productive.

[@nikolovlazar]

Go steal it! github.com/nikolovlazar/dotfiles

[@HarisMladenov-il7pf]

Are you Bulgarian?

[@nikolovlazar]

Nope, close 😁 I’m Macedonian. Pozdrav neighbour! 🙌