Next.js Bundle Analysis Github Action

Analyzes each PR's impact on your next.js app's bundle size and displays it using a comment. Optionally supports performance budgets.

Installation

It's pretty simple to get this set up, just run the following command and answer the prompts. The command will create a .github/workflows directory in your project root and add a next_bundle_analysis.yml file to it - that's all it takes!

$ npx -p nextjs-bundle-analysis generate

> NOTE: Due to github actions' lack of support for more complex actions, the experience of getting this set up is unusual in that it requires a generation script which copies most of the logic into your project directly. As soon as github adds support for the features needed to properly package up this action, we'll put out an update that removes the extra boilerplate and makes usage much simpler. Until then, we all have no choice but to endure this unusual setup process.

Configuration

Config values are written to package.json under the key nextBundleAnalysis, and can be changed there any time. You can directly edit the workflow file if you want to adjust your default branch or the directory that your nextjs app lives in (especially if you are using a srcDir or something similar).

showDetails (boolean)

(Optional, defaults to true) This option renders a collapsed "details" section under each section of the bundle analysis comment explaining some of the finer details of the numbers provided. If you feel like this is not necessary and you and/or those working on your project understand the details, you can set this option to false and that section will not render.

buildOutputDirectory (string)

(Optional, defaults to .next) If your application builds to a custom directory, you can specify this with the key buildOutputDirectory. You will also need to replace all instances of .next in next_bundle_analysis.yml with your custom output directory.

For example, if you build to dist, you should:

• Set package.json.nextBundleAnalysis.buildOutputDirectory to "dist".
• In nextjs_bundle_analysis, replace all instances of .next with dist.

budget (number)

(Optional) The file size, in bytes, to budget for first page load size. For example, if budget was set to 358400 (350 KB) and a page's first load size was 248 KB, the report would list that page as having used 70% of the performance budget.

budgetPercentIncreaseRed (number)

(Optional, but required if budget is specified) If a page's first load size has increased more than budgetPercentIncreaseRed percent, display a 🔴 to draw attention to the change.

minimumChangeThreshold (number)

(Optional, defaults to 0) The threshold under which pages will be considered unchanged. For example, if minimumChangeThreshold was set to 500 and a page's size increased by 300 B, it will be considered unchanged.

skipCommentIfEmpty (boolean)

(Optional, defaults to false) When set to true, if no pages have changed size the generated comment will be an empty string.

Caveats

• This plugin only analyzes the direct bundle output from next.js. If you have added any other scripts via the `