compatibility with next.js

[tomoakley]

How would I go about making Packtracker play nice with Next.js? I'm trying to use the Circle CI orb, which requires the webpack_config setting, but Next.js doesn't expose the Webpack config directly; it's editable through the next.config.js but there's no path available.

[dawsbot]

I spent a few hours today looking into this. It turned out to be very difficult getting packtracker to integrate with next.js.

Nextjs does not export a simple webpack config as js. This makes the github action for packtracker impossible. That being said, I was able to get the packtracker cli to work, but that requires having access to the github rev-parse. Unfortunately, with github actions, you cannot have access to git rev-parse AND run a shell script like the packtracker cli 👎

I'm currently working on solving this last issue, if I do, I will report back how to do this @tomoakley

So far, I think this would require a fork of this module because this module does not allow you to pass in prior-commit via the cli.

---

For those of you trying to make this work:

1. Make a custom version of @next/bundle-analyzer where you output a stats.json. (It ends up in .next/stats.json)
2. Tell packtracker cli to run after your build via:

// in your package.json

{
  "scripts": {
        "postbuild": "if-env CI=\"true\" && packtracker-upload --stats=.next/stats.json --output-path=.next || echo 'Not in CI env, skipping packtracker uploading'"
  }
}

3. Somehow fix the git prior-commit error in gitub actions (this is where I'm stuck):

[jondavidjohn]

@dawsbot Thanks for your effort here!

You actually can set the prior commit via an environment variable.

https://github.com/packtracker/webpack-plugin/blob/3545b185e0a77001741b68cf90856b3608b8ff1c/config.js#L42-L44

As PT_PRIOR_COMMIT, does that help?

[dawsbot]

Awesome, thank you for the additional info @jondavidjohn! I'm not sure still how this might integrate because we would need to calculate the prior commit as a variable in the github action then set it in the env vars for the line where we call the packtracker cli

Perhaps I'll get time again soon to test this, but not for at least a week

[jondavidjohn]

Is the GitHub Action you are creating open source? I wouldn't mind taking a look 👍

Also, the way we do it is to access the GitHub push event like so

https://github.com/packtracker/report/blob/master/report.js#L51

[dawsbot]

@jondavidjohn I'm taking the shortest, hackiest path to this solution by trying to execute the packtracker cli directly from a github action. So the cli command which should work for all nextjs projects after npm run build is yarn packtracker-upload --stats=.next/stats.json --output-path=.next.

If you have availability for this @jondavidjohn, I'd be eternally grateful. The fastest path to this would be to download the minimal nextjs template which would build in something like 10 seconds with npm init next-app

[jondavidjohn]

You could definitely just use the raw webpack plugin, and add it to your configuration as next.js describes here:

https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config

For example something like:

https://gist.github.com/balupton/4bb9efe0928dc6e326fd41a3b22cd2cc

Then the only challenge would be to

1) Run your webpack build in your CI environment or a GitHub Action 2) Get the information you need to populate the plugin configuration (if git is not available at build time), which could potentially be retrieved via the GitHub Action event. For example, how we do it in our action

[dawsbot]

Would you be able to publish an example @jondavidjohn ? When I stumbled through this last weekend, it wasn't straightforward, and I think you could adopt a lot of nextjs users to your product if it was dead-simple to intregrate. It's likely zeit would accept a PR to their official examples folder as-well

[jondavidjohn]

Sure, after a quick look I created an example repo using the default application next.js provides.

https://github.com/packtracker/test-next

With the relevant configuration addition

https://github.com/packtracker/test-next/blob/master/next.config.js

and in repository GitHub action that triggers the reporting.

https://github.com/packtracker/test-next/blob/master/.github/workflows/push.yml

https://github.com/packtracker/test-next/runs/483514033

[jondavidjohn]

https://app.packtracker.io/organizations/2/projects/372/commits/05bd4996954e0d695efbb68c36eb553bebfaa5fe

[jondavidjohn]

@dawsbot Additionally, I've created a page for next.js specific documentation.

https://docs.packtracker.io/uploading-your-webpack-stats/common-app-platforms/next.js

This is also editable via GitHub and I'd love any contributions you may have to ensure it's a clear path for next.js users.

Thanks!

[dawsbot]

@jondavidjohn Superb, thank you for these examples. I'm working through the nextjs github action attempt currently. I think the online documentation you've added on https://docs.packtracker.io/uploading-your-webpack-stats/common-app-platforms/next.js is a welcomed addition, but still does not provide enough details for setting it up via github actions.

If I did not have the direct link from you to https://github.com/packtracker/test-next/blob/master/next.config.js I would not have been able to solve this.

It's an undertaking for me to document various subsections like "nextjs with github actions" in your documentation, so I'll leave that to you or your team. I'm a paid user now 😏

[dawsbot]

I just got it working too! Thank you for adding these instructions, we're off to the races tracking our package sizes 🙌

You should try this out @tomoakley