E1: Clean Architecture in Next.js

--
--

We started off talking about the architecture, pros & cons, and why we decided to implement the "Layered Architecture". Then we got into it! 😁 In the next stream we'll continue refactoring the services.

🔗 Links:

--

[matyascsoti]

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.

[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 💖

[gadgetboyplaysmc]

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

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

[gamingwolf]

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

[ProgrammingwithUmair]

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

[freshu]

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

[FuzzyAnkles]

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

[bwest-dev]

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

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

[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?

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

[Luisllaboj]

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

[kiransilwal]

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

[jeffedmo]

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

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

[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?

[piyushacharya]

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

[김인욱-uq]

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

[hello]

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.