Tips for Working with Next.js - Part 2

Utilize Multi Zone for Package Separation

Consider using Multi Zone to separate packages you don't need in specific projects. This approach keeps your projects lean and efficient.

Configure Images in Next.config

Ensure you configure image settings in your Next.config file. Set an appropriate minimum CacheTTL to optimize image caching.

Implement Logging Strategy

From the outset, establish a logging strategy for your project. Work with tools that output logs in ECS format. A top recommendation is the ecs-logs-js package or Pino. Later, you can visualize these logs in platforms like Kibana, categorized for easy analysis.

Minimize sideEffect Impact

Disable sideEffect to reduce the final output size of your project. This optimization contributes to a more efficient application.

Select Icons Carefully

For icons, consider using the Tabler library. For instance, be cautious with Feather icon library in production, as it occasionally requests the 'window' object on the server, leading to exceptions.

Activate Error Tracking in Staging

Once you decide to move to staging, enable tools like Sentry to log errors directly. Don't rely solely on console logs to catch errors.

Respect Strict Mode

Don't underestimate the impact of Strict Mode. Avoid turning it off as it can have significant consequences. Instead, strive to identify and solve underlying issues.

Analyze Bundles

At the end of each sprint, analyze your bundles, keeping them as small as possible. Check my posts or articles on this topic for more insights.

Optimize Load Speed

Depending on your needs, consider using packages like react-hydration-on-demand to improve load speeds. This requires experience to determine when and where to apply it. Research and learn to use it effectively.

Implement ISR

In approximately 90% of cases, you can implement Incremental Static Regeneration (ISR) on your homepage, significantly boosting its speed. Make sure to apply this technique.

Utilize SSR-Caching

For pages utilizing SSR, make sure to implement SSR-Caching.

Consider AMP

Depending on your requirements, consider making some of your pages AMP-enabled. Next.js offers a feature called Hybrid AMP for this purpose.

Embrace Next.js Image Component

Always use the built-in Next.js Image component. Replace your previous image components with this one.

Prioritize Visible Images

For images that need to be visible to users immediately, assign them a higher priority for faster loading. This reduces the likelihood of experiencing a poor Largest Contentful Paint (LCP) score.

Optimize Link Component

All links created with the <Link /> component default to prefetch=true, which can impact site speed. Create an intermediary component and set its default prefetch behavior to false. Enable prefetch only where necessary.

Use Shallow Routing

When using router.push, and you don't need to refetch getServerSideProps, opt for shallow routing. This avoids unnecessary re-rendering.

Feel free to adapt these tips to suit your project's needs. Happy coding!