A quick and easy tool to parse the output of the Next.js build command into machine readable JSON, to fit whatever needs you may have.
MIT License
A quick and easy tool to parse the output of the Next.js next build
command into machine readable JSON, to fit whatever needs you may have.
Assuming you have a build
package.json script that runs next build
, you can run:
npm run build > next-build.txt
npx next-build-parser next-build.txt
This will output a JSON object to stdout. If you would like to output it to a file, you can run:
npx next-build-parser next-build.txt --output output.json
For other CLI options, run:
npx next-build-parser --help
First, install the package, and then run next build
to generate the output file:
npm install next-build-parser
npm run build > next-build.txt
Then you can use it in your code:
import { parse } from 'next-build-parser';
import { readFileSync } from 'node:fs';
const file = readFileSync('next-build.txt', 'utf8');
const output = parse(file, {
unit: 'MB',
});
console.log(output);
or using the more convenient parseFile
function:
import { parseFile } from 'next-build-parser';
const output = parseFile('next-build.txt', {
unit: 'MB',
});
console.log(output);
The output is a JSON object with the following structure:
type Output = {
routes: {
name: string; // The name of the route, e.g. /blog
type: string; // The type of the route, e.g. Dynamic, Static, etc.
icon: string; // The icon of the route type, e.g.
size: number; // The gzipped size of the route in the specified unit, e.g. 1000
firstLoad: number; // The gzipped size of the first load JS in the specified unit, e.g. 1000
}[];
shared: {
name: string; // The name of the chunk, e.g. chunks/472-9100b5fcfec8f88c.js
size: number; // The gzipped size of the chunk in the specified unit, e.g. 1000
}[];
sharedTotal: number; // The total gzipped size of all the shared chunks in the specified unit, e.g. 1000
unit: string; // The unit of the size, e.g. B, KB, MB, etc
middleware?: number; // The gzipped size of the middleware in the specified unit, e.g. 1000
};
What is the difference between firstLoad
and size
?
size
is the gzipped size of the route only, assuming the user has already downloaded the shared JS.
This is representative of the download size for a user that has alreaedy visited another route, but is visiting this one for the first time.
firstLoad
is the total gzipped size of that route, which includes the shared JS. Other included files are typically shared layout files.
This is representative of the download size for a user that is visiting this route for the first time, and has not visited any other route before this.
Why isn't firstLoad
the sum of size
and sharedTotal
?
This is usually because there is some other JS included in sharedTotal
but not exclusive to this route, for example any client-side JS in Next.js layout files.