Tips for Working with Next.js - Part 4

Using Cookies and Headers on the server-side (especially in the RootLayout file) can slow down the application and also force the activation of the Dynamic Routing feature.

If you don't want to use Monorepos, one of the best ways to have a cleaner and more readable structure is to use zones or, in other words, Multi Zones.

If what you're doing seems logical, and you don't have to, don't use CSS in JS. It adds a significant amount of bloat to the final HTML and JavaScript, which can slow down the application and increase TTFB and FCP.

Caching data that comes from the server can greatly help speed up the application. However, not all data should be cached. Usually, there are some data that are used throughout the entire application or are frequently needed from the server, and we always receive the same consistent data. The best approach is to use Redis. If you have any issues in this regard, please mention them in the comments, and I can create a separate post on implementing a Redis caching system in the frontend.

Using a CDN in Next.js is straightforward, and you just need to configure the settings and place your files there. This is very important for end-users and has a significant impact.

The font system in Next.js 13 has undergone significant changes and has become more optimized. So, as much as possible, avoid using local fonts and work with Google Fonts. There are good Persian fonts available there, such as the "Vazir" font. But if you still need a local font, make sure to load it in the way described in the documentation to have a minimal impact.

One point I mentioned before is that when you use Link, it prefetches by default, which can slow down page loading. The suggestion I have is to create a custom Link component with all the default props but set prefetch to false and turn it to true wherever you are sure you need it. This way, you don't need to pass the value every time, and it won't be unnecessarily preloaded.

If you are manually loading a script, be sure to specify the strategy. Usually, we use scripts for analytics and similar purposes, and the best default value for them is "afterInteractive". The important thing is that when using appRouter, workers are not supported yet, and you cannot use them. So, there is no mention of PartyTown in this regard.

TurboPacks still have a long way to go to become a proper and efficient tool. If you are using them in the development environment to work faster, be aware that what you see may differ slightly from the production environment.

If you are deploying on Vercel, pay attention to an important point. Vercel is a serverless environment. When you deploy a site on Vercel, you may encounter strange and inexplicable behaviors that are completely unreasonable. However, if you deploy the same site on a regular server (e.g., Heroku or Railway), these issues do not exist, and the site works perfectly. In the end, no solution was found for it, but when I switched to Heroku, the problem disappeared, and everything worked correctly.