TypeErrors will be found while testing or using the software.
Typescript
Benefits
Inferring data types gives you more hints about how the code works.
You can track down TypeErrors before your application is shipped to production. TypeErrors are the most common javascript errors. The top 8 javascript errors out of 10 are TypeErrors. This data show.
Typescript has the largest community among javascript typing tools.
Next.js vs. React
React
Benefits
Fast navigation and routing.
Rendering doesn't take any money.
Drawbacks
Slow initial page load can harm LCP.
It can't provide dynamic tags with search engines and social media.
SEO - unable to provide dynamic tags with search engines and social media.
Code-based routing lets you write more code for route configuration. It might not be the case if you're using Tanstack Router File-based routing.
Next.js
Benefits
Server components can improve LCP.
Next.js supports automatic code splitting by routes.
Next.js supports default Font Optimization by next/@font to prevent CLS.
Next.js supports default Image Optimization by <Image/> component. It prevents CLS by putting a placeholder. Image lazy-loading improves initial page load. Meanwhile, it serves the minimal and quality copy of an image.
File-based routing comes with less configuration.
Drawbacks
Next.js navigates less smoothly and slowly. However, you can mitigate issues by prefetching.
Rendering on the server side takes money.
CSS-in-JS vs. TailwindCSS
CSS-in-JS
Benefits
You can write JavaScript expressions for styling.
It has a large community support for react-native.
Drawbacks
Currently, CSS-in-JS is not supported in Server Components.
Even if you can write CSS in a javascript file components and styling are separated.
TailwindCSS
Benefits
You can write CSS faster.
CSS and HTML are tied completely together.
Most CSS properties depend on parents or children, so it's easier to read CSS once you get used to it.
Drawbacks
It's hard to get used to it
When you use JavaScript expressions, you need to do repetitive work.
