So far the main reason I like Angular over react is because Angular is a full framework with everything included that you need to build front end applications. But I'm trying to compare it to Next.js which I have not used before. Next is also a full framework and and seems like it might handle seo with less work than Angular since it does SSR out of the box.

Anyone have reasons why they like Next.js over Angular or the other way around?

Yes this again! I was trying to leave a reply on another post but I guess my reply was to big.

I have been going back and forth between Angular and NextJS for the last few years. When starting a new project all is well and smooth at first with both frameworks but at some point I end up getting stuck on something. Here is what I can say from my experience so far.

Internationalization (i18n)

Angular has built in support for i18n which can take the text from your DOM directly and export them to translation files. NextJS has several libraries for i18n but all require you to use json files to define your messages to be translated. What I don't like in NextJS is that it requires you to do a lot of changes to your app's structure to achieve i18n. For example add logic to the single middleware file, add `(locale)` group to your app directory and move everything under there and use some i18n-specific routing functions. Also I have to import a different function each time to `useTranslations/getTranslations` depending whether I am in a server or client component. Personally I don't like this approach because it makes text hard to find and understand which text goes where. React however has a great ecosystem of vscode plugins that can help you with that mess.

On the other hand, Angular's built-in translation system will build one app per language and you essentially have to use some server directives (NGINX for example) to point to different urls/paths to display a language. That has been working great for me so far but the only drawback is that you can't have any server or remote file to use for translations since those are done on build time. It might be possible but I have never tried it.

Routing

I can't emphasize enough how much I hate routing in NextJS. It's a complete mess. Router groups, Layouts, Parallel routes, intercepting routes and so on. Even with years of experience, it is still hard for the eyes to look at a project and easily understand how everything is wired together. Also while developing, usually any changes to your app structure are not always reflected immediately and you more often than not have to restart your app to see the changes. Also what about when you want to use some specific guards/protections for a route? You have to add some custom logic into the middleware file which again is not ideal.

Angular's routing system is pretty good and flexible. You can apply a route guard through the `canActivate` param and that will also protect the children of that route. It's pretty flexible. The only real issue I faced with Angular's routing is that you don't have a generic/centralized way for handling 404 errors and redirects. Let's say for example you have a route `/blog/:slug` which gets a single blog post by `slug`. You have to manually add some logic in your resolver to handle any http error and do the redirects manually to the 404 page. I haven't found a nice way to generalize this behaviour so far.

Caching

Nextjs has a pretty decent caching mechanism for http requests and other things like memoized callbacks and computation. Even though it's a bit hard to understand at first, once you do it all makes sense and is flexible enough. In Angular there are very little helpers/tools for caching but you can always use signals or local variable in a service for example to check for cached data. That means doing a lot of manual work if you want to work with caching in Angular.

Data Submission

Angular has a very intuitive approach to building forms. Creating custom form controls is very easy and works very nicely with the built-in Forms Module. Honestly, it has been a pleasure working with forms in angular. What I usually do is create a wrapper `FormField` to use to display error messages and some other common things for form controls. Then by extending Angular's `ControlValueAccessor` I can literally create any kind of input component and reuse it in many forms. The only issue I faced working with custom form components is that sometimes change detection gets confused about a component value and you might run into some issues if you are not careful.

In React, there are several libraries that help you build forms and manage their state. They all work pretty good but you are required to write a lot of code and logic for each form which can be very frustrating when you have an app that uses a lot of forms like an admin dashboard for example.

Server Actions

NextJS can run server-only code and you can tightly bind forms to call a server function/action that will only run on the server. This sounds promising but trust me it is a nightmare to work with. I find my self always moving things around in my code because NextJS complains all the time - "This can't run on the server". "This can't run on the client", "The library uses node specific imports and I can't run that" and so on. In general, server actions are nice as long as you can deal with all those limitations.

Writing Components

React is easier and more efficient when it comes to writing your own components. No argument there. With that said, I still prefer Angular because I can work more efficiently when I need to use some common state/service. I can have all my state in a service (whether using signals or Observables/Subjects) and have several components react to those state changes. That brings me to my next point which is state management.

State Management

In Angular you can have signals and a shared service (which is provided in root context) and you can inject that service to any component that needs to use it. Now compare that with all the "Lifting the state up/down" and wrap everything in a Provider nonsense in React. That simply sucks - end of story.

Working in Monorepos

If you are ever building several apps in a single codebase that need to share code; Don't even bother using NextJS at all. You want to reuse a shared page in several apps? Good luck. You want to import some common routes/paths used in many apps? You can't. Another scenario where I found Angular better is when I wanted to reuse a library that contained some common images like logos and category images in several apps. In Angular you can just defined a wildcard path to your `project.json` and you can reference say `/shared-assets/images` path to anything in that library/path. In NextJS/React it is still possible to do that but you have to import the images into your code and use them as JSX components or something similar.

SSR and SEO

Both frameworks has good support for SSR. Don't pay attention to the articles that talk about NextJS SEO is better, it really doesn't matter. There are ways in both frameworks to export some Meta Tags in your DOM and server render a page. In NextJS however it's much easier

Performance

Unless you are building the next facebook/reddit or the next big thing there is no reason to bother with the performance. Both frameworks have excellent performance and the difference, if any, might be a 5-10ms. Your 10 users won't care or notice any difference and neither should you.

Ecosystem

NextJS and React have a larger community. If you ever need anything special, there is propably a library for that. In Angular however, I find my self building most things from scratch. I'm not using any Component libraries like Material or PrimeNG maybe that's why. Also you can't find many up-to-date tutorials for Angular compared to React.

Overall Developer Experience

Angular has a larger learning curve BUT once you get the hang of it you can trust that it won't change much in the next couple of years :). I can say that both frameworks have their frustration moments but I usually find my self in that situation more often with NextJS/React. That is usually because I have to use a lot of third-party libraries and sometimes it's hard to debug or event understand what's going on. On the long run, I spent more time reading when working with React.

Conclusion

Even though I lean more towards Angular, NextJS is a more popular choice and a larger community. Angular works for me because I am a freelancer and I have the option to choose what to work with. If someone was looking to get experience for a job then definitely you should learn React.