How to measure performance in Next.js projects

Next.js provides built-in support for measuring web performance through the Web Vitals API. This allows developers to track key performance metrics such as First Contentful Paint (FCP), Largest Contentful Paint (LCP), and Cumulative Layout Shift (CLS) directly in their Next.js applications.

Largest Contentful Paint (LCP): measures loading performance.
Interaction to Next Paint (INP): measures interactivity.
Cumulative Layout Shift (CLS): measures visual stability.

To measure performance in a Next.js project, you can use the useReportWebVitals hook from the next/web-vitals package. This hook allows you to report web vitals metrics to an analytics endpoint or log them to the console for debugging purposes.

Here's an example of how to use the useReportWebVitals hook in a Next.js component:

import { useReportWebVitals } from "next/web-vitals";
export function WebVitals() {
  useReportWebVitals((metric) => {
    console.log("Web Vitals Metric:", metric);
    // You can also send this data to an analytics endpoint
    // fetch('/analytics', {
    //   method: 'POST',
    //   body: JSON.stringify(metric),
    // });
  });

  return null; // This component doesn't render anything
}

In this example, the WebVitals component uses the useReportWebVitals hook to log performance metrics to the console. You can customize this function to send the metrics to your analytics service or perform any other actions you need.

To use the WebVitals component, simply include it in your Next.js application, such as in the layout.tsx file:

import { WebVitals } from "@/components/web-vitals/web-vitals";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <WebVitals />
        {children}
      </body>
    </html>
  );
}

The easiest way to measure performance is to use Chrome DevTools. Once you open the DevTools, you will see a “Lighthouse” tab. Clicking the “Generate report” button will run a series of tests on the web page and display the results right there in the Lighthouse tab. But there is also a better way to do it, which is to use the Lighthouse CI tool. This tool allows you to automate performance testing and integrate it into your CI/CD pipeline.

{
  "ci": {
    "collect": {
     "url": ["https://your-nextjs-app.com"],
      "startServerCommand": "npm run build && npm start",
      "numberOfRuns": 3,
       "settings": {
        "preset": "desktop"
      }
    },
    "assert": {
      "assertions": {
        "categories:performance": ["warn", {"minScore": 0.6}],
        "first-contentful-paint": ["warn", {"maxNumericValue": 2000}],
        "largest-contentful-paint": ["warn", {"maxNumericValue": 2500}],
        "cumulative-layout-shift": ["warn", {"maxNumericValue": 0.1}]
      }
    },
    "upload": {
      "target": "temporary-public-storage"
    }
  }
}```