# @zeit/next-bundle-analyzer

> Use `webpack-bundle-analyzer` in your Next.js project

Latest version **0.1.2** (published 2018-09-19) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @zeit/next-bundle-analyzer
pnpm add @zeit/next-bundle-analyzer
yarn add @zeit/next-bundle-analyzer
bun add @zeit/next-bundle-analyzer
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2018-09-19 |
| First published | 2018-02-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 3.7 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 2666 |
| Maintainers | arunoda, codetheory, hharnisc, iamevilrabbit, igorklopov, jamo, javivelasco, joecohens, leo, matheuss, nkzawa, olliv, rauchg, timneutkens, tootallnate |

## Links

- npm: https://www.npmjs.com/package/@zeit/next-bundle-analyzer
- Repository: https://github.com/zeit/next-plugins
- Homepage: https://github.com/zeit/next-plugins#readme
- Issues: https://github.com/zeit/next-plugins/issues
- npm.io page: https://npm.io/package/@zeit/next-bundle-analyzer

## Dependencies (1)

- [webpack-bundle-analyzer](https://npm.io/package/webpack-bundle-analyzer.md) 2.13.1

## Recent versions

- 0.1.2 (latest) — 2018-09-19
- 0.1.3-canary.1 (canary) — 2018-11-14
- 0.1.3-canary.0 — 2018-10-18
- 0.1.2-canary.4 — 2018-07-30
- 0.1.2-canary.1 — 2018-07-30
- 0.1.1 — 2018-03-22
- 0.1.0 — 2018-03-08
- 0.0.4 — 2018-02-18
- 0.0.3 — 2018-02-18
- 0.0.2 — 2018-02-15
- 0.0.1 — 2018-02-15

## README

# Next.js + Webpack Bundle Analyzer

Use `webpack-bundle-analyzer` in your Next.js project

## Installation

```
npm install --save @zeit/next-bundle-analyzer
```

or

```
yarn add @zeit/next-bundle-analyzer
```

### Usage with environment variables

Create a next.config.js (and make sure you have next-css set up)

```js
const withBundleAnalyzer = require("@zeit/next-bundle-analyzer");

module.exports = withBundleAnalyzer({
  analyzeServer: ["server", "both"].includes(process.env.BUNDLE_ANALYZE),
  analyzeBrowser: ["browser", "both"].includes(process.env.BUNDLE_ANALYZE),
  bundleAnalyzerConfig: {
    server: {
      analyzerMode: 'static',
      reportFilename: '../../bundles/server.html'
    },
    browser: {
      analyzerMode: 'static',
      reportFilename: '../bundles/client.html'
    }
  }
});
```

Then you can run one of these commands:

```bash
# Build and analyze the back end server bundle
BUNDLE_ANALYZE=server yarn build

# Build and analyze the front end browser bundle
BUNDLE_ANALYZE=browser yarn build

# Build and analyze both server and browser
BUNDLE_ANALYZE=both yarn build

# Build and analyze neither server nor browser
yarn build
```

If you choose both then two different browser windows will open. One will be for the server bundle, one for the browser bundle.

---
_Source: https://npm.io/package/@zeit/next-bundle-analyzer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._