This guide describes how to set up Niquis with GitHub Actions to track the page bundle sizes of a Next.js application.

At the end of this guide you will have a setup that:

• Tracks the page bundle sizes as they develop over time in code that is pushed into your main branch.
• Reports page bundle size differences between your main branch and pull requests and communicates those differences to you via a PR comment.

Requirements

• A GitHub repository with a Next.js project.
  • Only Next.js v12 is supported at the moment.
• A secret token to access the Niquis API.
  • To request a secret token, send an email to [email protected] with the name of the GitHub repository.

Steps

1. Add a secret token as a new repository secret to your GitHub repository.
   1. Navigate to your repository Settings → Security → Secrets → Actions (https://github.com/owner/name/settings/secrets/actions).
   2. Create a new repository secret with name NIQUIS_TOKEN and value of the secret token.
2. Create a GitHub Actions Workflow file (.github/workflows/niquis.yml) with the contents shown below. Adjust the build steps as needed to match your setup.
3. Create the Niquis configuration file (.github/niquis.yml). This file tells the Niquis action what metrics it should collect.
4. Install the Niquis GitHub App (https://github.com/apps/niquis) in your account or organization.
5. Commit and push the workflow file into your main branch and wait for the action to finish running.

Now every time you open a pull request the action will run and attach a report in a comment. It will look something like this: