tutorial : using the appdir directory

[raphaelbadia]

Hello everyone, just like issue #42 I wanted to run the bundle analysis in the app directory.

I modified the script to make it work with it instead of pages dir. I didn't bother make it work for both scenarios because I only use appdir.

Here's how you can have it too :

First, install the required dependencies:

yarn add -D gzip-size@6 mkdirp

Then, you need to copy this gist : https://gist.github.com/raphaelbadia/1fbc948928378a4ce0e1ce90923263ae to a file in your repository. I called it report-bundle-size.js

Finally, open your nextjs_bundle_analysis.yml, find the action with name "- name: Analyze bundle" and replace npx -p nextjs-bundle-analysis report by node report-bundle-size.js

Result :

Cheers

[KajSzy]

This deserves to be merged as app dir router becomes more and more popular

[astrodomas]

@raphaelbadia
A huge thanks for sharing this!
A question I have about the layout and page. Does page size include the layout size or not (to my understanding it does not)?
This impacts the budget option as it does not represent the whole page size which is relevant I believe. Do you have any suggestions on how this could be improved?
An example:
My budget is 350kb

/layout is 150kb (~42% of the budget)
/page is 250kb (~71% of the budget)

but in reality you will fetch layout + page which is 400kb which is 14% over the budget.

So basically the script should sum the nested layouts (if any) and add that sum to the page itself to get the correct bundlesize. Maybe a future improvement

[AhmedBaset]

thanks @raphaelbadia