Next In-It Stats

Keep track of your next.js app's bundle.

next-in-it-stats is a TypeScript package that helps you analyze and keep track of your nextjs bundle sizes over time. It provides valuable insights into the growth and changes in your bundles, allowing you to set limits and detect bloated dependencies.

Installation

1npm install next-in-it-stats

Integration

1// next.config.js
2const withInItStats = require('next-in-it-stats/cjs')({
3  legacy: true,
4}); // or import withInItStats from 'next-in-it-stats' if you use esm;
5
6/** @type {import('next').NextConfig} */
7const nextConfig = {
8  reactStrictMode: true,
9};
10
11module.exports = withInItStats(nextConfig);

Usage

Now when you run npm build you'll see a link to analyze your bundles.

You can click it to see the bundle analyzer report.

Or you can see your apps page (after logging in) and click on the app you want to analyze.

Limit bundles (work in progress)

1// .in-itrc.js or "in-it" in package.json or any other supported config file
2module.exports = {
3    "track": "**/*", // globby to which files in the build dir you want to track (default)
4    "limits": [
5        {
6            "server/chunks/**/*": {
7                "maxSize": "10mb",
8            }
9        },
10        {
11            "static/chunks/app/layout*": {
12                "maxSize": "10kb",
13                "maxDifference": "10%", // not yet supported
14            }
15        },
16        {
17            "static/chunks/app/page*": {
18                "maxSize": "5kb",
19                "prohibitedModules": [ // not yet supported
20                    "lodash",
21                ]
22            }
23        },
24    ]
25};