https://github.com/blairmcalpine/next-build-parser
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.
https://github.com/blairmcalpine/next-build-parser
ci cli next nextjs npm parser
Last synced: 5 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/blairmcalpine/next-build-parser
- Owner: blairmcalpine
- License: mit
- Created: 2024-10-12T20:24:37.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-23T02:16:29.000Z (about 1 year ago)
- Last Synced: 2025-10-10T12:45:58.369Z (9 months ago)
- Topics: ci, cli, next, nextjs, npm, parser
- Language: TypeScript
- Homepage:
- Size: 139 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# next-build-parser
🚀 A quick and easy tool to parse the output of the [Next.js](https://github.com/vercel/next.js) `next build` command into machine readable JSON, to fit whatever needs you may have.
# Usage
## 💻 As a CLI
Assuming you have a `build` package.json script that runs `next build`, you can run:
```bash
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:
```bash
npx next-build-parser next-build.txt --output output.json
```
For other CLI options, run:
```bash
npx next-build-parser --help
```
## 📦 In Code
First, install the package, and then run `next build` to generate the output file:
```bash
npm install next-build-parser
npm run build > next-build.txt
```
Then you can use it in your code:
```typescript
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:
```typescript
import { parseFile } from 'next-build-parser';
const output = parseFile('next-build.txt', {
unit: 'MB',
});
console.log(output);
```
## ➡️ Output
The output is a JSON object with the following structure:
```typescript
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
};
```
# FAQs
- 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 already 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.