🐛 💄 🐎 Fix width scrolling and add CssBaseline component. Use modified…

… next bundle analyzer package.

Fix width scrolling and add CssBaseline component. Use modified next bundle analyzer package.

🐛 Bugfix, 💄 Cosmetic, 🐎 Performance

README.md

@@ -47,7 +47,7 @@ Remaining simple at its core, this project is packed with useful tools that enha
 - 📖 [Storybook](https://storybook.js.org/) - Build UI components and pages in isolation. It streamlines UI development, testing, and documentation.
 - 🧪 [Jest](https://jestjs.io/) - A testing framework for JavaScript. Preconfigured to work with TypeScript and JSX.
 - 🐙 [Run tests via Github Actions](https://docs.github.com/en/actions) - CI/CD workflows for your package. Run tests on every commit plus integrate with Github Releases to automate publishing package to NPM and Storybook to Github Pages.
-- 📊 [Bundle analyzer](https://www.npmjs.com/package/@next/bundle-analyzer) - Visualize the size of Next.js output files with an interactive zoomable treemap.
+- 📊 [Bundle analyzer](https://github.com/josselinbuils/next-bundle-analyzer) - Visualize the size of Next.js build output files with an interactive zoomable treemap.
 
 ##### 🧑‍🎨 Lint and format
 

next.config.js

@@ -2,7 +2,7 @@ const { i18n } = require('./next-i18next.config');
 
 const { withAxiom } = require('next-axiom');
 
-const withBundleAnalyzer = require('@next/bundle-analyzer')({
+const withBundleAnalyzer = require('next-bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
 });
 

package.json

@@ -73,6 +73,7 @@
     "next": "13.1.1",
     "next-auth": "4.18.7",
     "next-axiom": "0.16.0",
+    "next-bundle-analyzer": "0.6.7",
     "next-i18next": "13.0.2",
     "next-pwa": "5.6.0",
     "next-seo": "5.15.0",
@@ -94,7 +95,6 @@
     "@graphql-codegen/cli": "2.16.2",
     "@graphql-codegen/typescript": "2.8.6",
     "@graphql-codegen/typescript-resolvers": "2.7.11",
-    "@next/bundle-analyzer": "13.1.1",
     "@ngneat/falso": "6.3.2",
     "@storybook/addon-actions": "^6.5.15",
     "@storybook/addon-essentials": "^6.5.15",

src/components/AppBase.tsx

@@ -1,10 +1,11 @@
-import { CssVarsProvider } from '@mui/joy';
+import { CssBaseline, CssVarsProvider } from '@mui/joy';
 import { PropsWithChildren } from 'react';
 import { appTheme } from '@/theme';
 
 const AppBase = (props: PropsWithChildren) => {
   return (
     <CssVarsProvider theme={appTheme} defaultMode="dark">
+      <CssBaseline />
       {props.children}
     </CssVarsProvider>
   );

src/components/AppPage.tsx

@@ -38,6 +38,7 @@ const AppPage = (props: PropsWithChildren) => {
       <Sheet
         sx={{
           minHeight: `100vh`,
+          overflowX: `hidden`,
         }}
       >
         <AppToaster />

yarn.lock

@@ -2881,13 +2881,6 @@
     prop-types "^15.8.1"
     react-is "^18.2.0"
 
-"@next/bundle-analyzer@13.1.1":
-  version "13.1.1"
-  resolved "https://registry.yarnpkg.com/@next/bundle-analyzer/-/bundle-analyzer-13.1.1.tgz#f36108dcb953ea518253df5eb9e175642f78b04a"
-  integrity sha512-zxC/MOj7gDjvQffHT4QZqcPe1Ny+e6o3wethCZn3liSElMA+kxgEopbziTUXdrvJcd/porq+3Itc8P+gxE/xog==
-  dependencies:
-    webpack-bundle-analyzer "4.7.0"
-
 "@next/env@13.1.1":
   version "13.1.1"
   resolved "https://registry.yarnpkg.com/@next/env/-/env-13.1.1.tgz#6ff26488dc7674ef2bfdd1ca28fe43eed1113bea"
@@ -13146,6 +13139,14 @@ next-axiom@0.16.0:
   dependencies:
     whatwg-fetch "^3.6.2"
 
+next-bundle-analyzer@0.6.7:
+  version "0.6.7"
+  resolved "https://registry.yarnpkg.com/next-bundle-analyzer/-/next-bundle-analyzer-0.6.7.tgz#1b574859db2df220e2e0b6bfe1639aecb8547d96"
+  integrity sha512-1fCPDnrw5nqRKe7guOlI6ko+ChKBrpmfIsFKTCEKsSX4nTJz0TTUQr/Gtj8Y3suz3Yv5quo5A2vUuG8J5bml+A==
+  dependencies:
+    open "^8.4.0"
+    webpack-bundle-analyzer "^4.6.1"
+
 next-i18next@13.0.2:
   version "13.0.2"
   resolved "https://registry.yarnpkg.com/next-i18next/-/next-i18next-13.0.2.tgz#0b865425e549fe58c81466ea84d4b73f07b3d5e5"
@@ -17415,7 +17416,7 @@ webidl-conversions@^4.0.2:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
   integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
 
-webpack-bundle-analyzer@4.7.0:
+webpack-bundle-analyzer@^4.6.1:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.7.0.tgz#33c1c485a7fcae8627c547b5c3328b46de733c66"
   integrity sha512-j9b8ynpJS4K+zfO5GGwsAcQX4ZHpWV+yRiHDiL+bE0XHJ8NiPYLTNVQdlFYWxtpg9lfAQNlwJg16J9AJtFSXRg==