How to Make Your NextJS App Quicker

By Ari Nakos • 2025-03-12

In this tutorial, we'll explore how to identify and fix performance bottlenecks in your NextJS application using react-scan. This powerful tool helps you understand where slow renders occur and why, allowing you to make targeted optimizations.

Why Performance Matters in NextJS Apps

Before diving into the implementation, let's understand why performance optimization is crucial:

  1. User Experience: Faster apps lead to better user engagement and lower bounce rates
  2. SEO Ranking: Page speed is a significant factor in search engine rankings
  3. Conversion Rates: Studies show that a 1-second delay in page load can reduce conversions by up to 7%
  4. Mobile Experience: Performance issues are amplified on mobile devices with slower connections
  5. Cost Efficiency: Optimized apps consume fewer server resources, potentially reducing hosting costs

What is react-scan?

React-scan is a lightweight performance monitoring tool that helps identify slow renders in your React applications. It works by:

  • Measuring component render times
  • Identifying unnecessary re-renders
  • Highlighting performance bottlenecks
  • Providing actionable insights for optimization

The best part? It requires minimal setup and works seamlessly with NextJS applications.

Getting Started with react-scan

Let's implement react-scan in your NextJS application in just two simple steps:

Step 1: Install react-scan

First, add react-scan to your project using your package manager. Since we're using pnpm at RealReview.Space, we'll use:

bash
pnpm add react-scan

This will add the package to your dependencies in package.json.

Step 2: Add the Script to Your Layout

Next, you need to add the react-scan script to your application's layout file. The key is to add this script before any other scripts to ensure it can properly monitor all rendering activities.

Open your app/layout.tsx file (or create it if it doesn't exist) and add the script tag:

tsx
// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <script src="https://unpkg.com/react-scan/dist/auto.global.js" />
        {/* rest of your scripts go under */}
      </head>
      <body>{children}</body>
    </html>
  );
}

That's it! With these two simple steps, react-scan is now integrated into your NextJS application.

Using react-scan to Identify Performance Issues

Once you've implemented react-scan, you can start identifying performance bottlenecks in your application. Here's how:

Viewing Performance Metrics

  1. Open your application in development mode (pnpm dev)
  2. Open your browser's developer tools (F12 or Right-click > Inspect)
  3. Navigate to the "React Scan" tab (it should appear alongside Console, Network, etc.)
  4. Interact with your application to see real-time performance metrics

React Scan Developer Tools Panel

Understanding the Metrics

React-scan provides several key metrics:

  • Component Render Time: How long each component takes to render
  • Re-render Count: How many times a component re-renders
  • Wasted Renders: Components that re-render without any visible changes
  • Render Cascades: How component renders trigger other component renders

Using the Performance Data

Once you've collected performance data with react-scan, you can use it to make informed decisions about optimizing your application. Here are some general tips:

  1. Focus on frequently re-rendered components: Components that re-render often are prime candidates for optimization.

  2. Look for render cascades: When one component re-renders, it can trigger re-renders in child components. Identifying these cascades can help you break unnecessary render chains.

  3. Identify wasted renders: Components that re-render without any visible changes are wasting CPU cycles.

  4. Measure before and after: After making optimizations, run react-scan again to measure the improvement.

Remember that premature optimization can lead to more complex code without significant benefits. Always measure first, then optimize where it matters most.

Conclusion

Optimizing your NextJS application doesn't have to be a guessing game. With react-scan, you can identify exactly where performance bottlenecks occur and make targeted optimizations to improve your app's speed and user experience.

Remember that performance optimization is an ongoing process. As your application grows and changes, new performance issues may arise. Regularly using react-scan as part of your development workflow can help you catch and fix these issues before they impact your users.

By following the steps and techniques outlined in this article, you'll be well on your way to creating lightning-fast NextJS applications that provide an exceptional user experience.

Have you implemented react-scan in your NextJS project? Share your experience and optimization tips in the comments below!