1648064d0e
Converted Next.js Bundle Analyzer example over to TypeScript to align with the Examples guide. I also replaced `faker` with `@faker-js/faker`. Faker has been forked and maintained [here](https://github.com/faker-js/faker) after the original author [deleted](https://www.theverge.com/2022/1/9/22874949/developer-corrupts-open-source-libraries-projects-affected) the library. ## Documentation / Examples - [X] Make sure the linting passes by running `pnpm lint` - [X] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples) |
||
|---|---|---|
| .. | ||
| pages | ||
| .gitignore | ||
| next-env.d.ts | ||
| next.config.js | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
Analyzer Bundles example
This example shows how to analyze the output bundles using @next/bundle-analyzer
Deploy your own
Deploy the example using Vercel or preview live with StackBlitz
How to use
Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:
npx create-next-app --example analyze-bundles analyze-bundles-app
# or
yarn create next-app --example analyze-bundles analyze-bundles-app
# or
pnpm create next-app --example analyze-bundles analyze-bundles-app
Analyze webpack output
To analyze your webpack output, invoke the following command:
npm run analyze
# or
yarn analyze
Once the build is completed, you can inspect the bundle by running:
npm run serve
# or
yarn serve