Skip to content
This repository has been archived by the owner on Jul 12, 2023. It is now read-only.

Commit

Permalink
⚑ 🎨 ✨ add bundle anlyzer and home page content
Browse files Browse the repository at this point in the history
add bundle anlyzer and home page content

⚑ General update, 🎨 Improve format/structure, ✨ New feature
  • Loading branch information
TimMikeladze committed Dec 29, 2022
1 parent fa27b51 commit 1152e09
Show file tree
Hide file tree
Showing 9 changed files with 148 additions and 27 deletions.
9 changes: 9 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ yarn && yarn dev
- πŸ“– [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](Webpack Bundle Analyzer) - Visualize the size of Next.js output files with an interactive zoomable treemap.

##### Lint and format

Expand Down Expand Up @@ -125,3 +126,11 @@ If you want to build your app for production on your local machine, within a con
```console
yarn build
```

### Analyzing bundle size

To analyze the page bundles of your Next.js app, run the following command:

```console
yarn build:analyze
```
6 changes: 5 additions & 1 deletion next.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@ const { i18n } = require('./next-i18next.config');

const { withAxiom } = require('next-axiom');

const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
});

const { version } = require('./package.json');

/** @type {import('next').NextConfig} */
Expand All @@ -22,4 +26,4 @@ const nextConfig = {
},
};

module.exports = withAxiom(nextConfig);
module.exports = withBundleAnalyzer(withAxiom(nextConfig));
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
"scripts": {
"dev": "concurrently \"next dev\" \"yarn codegen:watch\"",
"build": "next build",
"build:analyze": "ANALYZE=true yarn build",
"start": "next start",
"type-check": "tsc --noEmit",
"test": "jest --forceExit --passWithNoTests",
Expand Down Expand Up @@ -89,6 +90,7 @@
"@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",
Expand Down
3 changes: 3 additions & 0 deletions public/locales/en/common.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@
"switchToLightMode": "Switch to light mode",
"switchToDarkMode": "Switch to dark mode",
"home": "Home",
"helloThere": "\uD83D\uDC4B Hello there!",
"learnMore": "Learn more about this project at: {{ url }}",
"learnMoreUrl": "https://github.com/TimMikeladze/next-apollo-joy-starter",
"providers" : {
"github": "GitHub"
}
Expand Down
19 changes: 11 additions & 8 deletions src/components/AppPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,19 @@ import { useTranslation } from 'next-i18next';
import ThemeModeToggle from './ThemeModeToggle';
import { useSession } from 'next-auth/react';
import Link from 'next/link';
import SignInDialog from './SignInDialog';
import Head from 'next/head';
import { Toaster } from 'react-hot-toast';

import UserMenu from './UserMenu';
import { getHomeRoute } from '@/util/routes';
import dynamic from 'next/dynamic';

const AppToaster = dynamic(() => import(`@/components/AppToaster`), {
ssr: true,
});

const SignInDialog = dynamic(() => import(`@/components/SignInDialog`), {
ssr: true,
});

const AppPage = (props: PropsWithChildren) => {
const { t } = useTranslation();
Expand All @@ -24,12 +32,7 @@ const AppPage = (props: PropsWithChildren) => {
height: `100vh`,
})}
>
<Toaster
position="bottom-center"
containerStyle={{
zIndex: 99999,
}}
/>
<AppToaster />
<SignInDialog
open={signInDialogOpen}
onClose={() => setSignInDialogOpen(false)}
Expand Down
12 changes: 12 additions & 0 deletions src/components/AppToaster.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { Toaster } from 'react-hot-toast';

const AppToaster = () => (
<Toaster
position="bottom-center"
containerStyle={{
zIndex: 99999,
}}
/>
);

export default AppToaster;
36 changes: 23 additions & 13 deletions src/pages/index.tsx
Original file line number Diff line number Diff line change
@@ -1,19 +1,29 @@
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { GetServerSidePropsContext } from 'next';
import { Stack } from '@mui/joy';
import { GetStaticProps } from 'next';
import { Stack, Typography } from '@mui/joy';
import Link from 'next/link';
import { useTranslation } from 'next-i18next';
import { withTranslations } from '@/util/i18n/withTranslations';

const Landing = () => {
return <Stack spacing={1}></Stack>;
const Home = () => {
const { t } = useTranslation();
return (
<Stack spacing={1}>
<Typography level="h5">{t(`helloThere`)}</Typography>
<Typography level="body2">
<Link href="https://github.com/TimMikeladze/next-apollo-joy-starter">
{t(`learnMore`, {
url: t(`learnMoreUrl`),
})}
</Link>
</Typography>
</Stack>
);
};

export default Landing;
export default Home;

export const getServerSideProps = async (
context: GetServerSidePropsContext,
) => {
export const getStaticProps: GetStaticProps = withTranslations(() => {
return {
props: {
...(await serverSideTranslations(context.locale as string, [`common`])),
},
props: {},
};
};
});
11 changes: 8 additions & 3 deletions src/util/i18n/withTranslations.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,19 @@
import { GetServerSidePropsContext } from 'next';
import {
GetServerSidePropsContext,
GetStaticProps,
GetStaticPropsContext,
} from 'next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { GetServerSideProps } from 'next/types';

export const withTranslations =
(fn: GetServerSideProps) => async (context: GetServerSidePropsContext) => {
(fn: GetServerSideProps | GetStaticProps) =>
async (context: GetServerSidePropsContext | GetStaticPropsContext) => {
const translations = await serverSideTranslations(context.locale, [
`common`,
]);

const gsspData: any = await fn(context);
const gsspData: any = await fn(context as any);

return {
props: {
Expand Down
77 changes: 75 additions & 2 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -2872,6 +2872,13 @@
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"
Expand Down Expand Up @@ -3179,6 +3186,11 @@
"@pnpm/network.ca-file" "^1.0.1"
config-chain "^1.1.11"

"@polka/url@^1.0.0-next.20":
version "1.0.0-next.21"
resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==

"@popperjs/core@^2.11.6":
version "2.11.6"
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45"
Expand Down Expand Up @@ -5350,7 +5362,7 @@ acorn-walk@^7.2.0:
resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==

acorn-walk@^8.1.1, acorn-walk@^8.2.0:
acorn-walk@^8.0.0, acorn-walk@^8.1.1, acorn-walk@^8.2.0:
version "8.2.0"
resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.2.0.tgz#741210f2e2426454508853a2f44d0ab83b7f69c1"
integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
Expand All @@ -5365,7 +5377,7 @@ acorn@^7.1.1, acorn@^7.4.1:
resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==

acorn@^8.4.1, acorn@^8.5.0, acorn@^8.7.0, acorn@^8.7.1, acorn@^8.8.0:
acorn@^8.0.4, acorn@^8.4.1, acorn@^8.5.0, acorn@^8.7.0, acorn@^8.7.1, acorn@^8.8.0:
version "8.8.1"
resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.1.tgz#0a3f9cbecc4ec3bea6f0a80b66ae8dd2da250b73"
integrity sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==
Expand Down Expand Up @@ -7020,6 +7032,11 @@ commander@^6.2.1:
resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==

commander@^7.2.0:
version "7.2.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==

commander@^8.3.0:
version "8.3.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
Expand Down Expand Up @@ -7920,6 +7937,11 @@ dset@3.1.2:
resolved "https://registry.yarnpkg.com/dset/-/dset-3.1.2.tgz#89c436ca6450398396dc6538ea00abc0c54cd45a"
integrity sha512-g/M9sqy3oHe477Ar4voQxWtaPIFw1jTdKZuomOjhCcBx9nHUNn0pu6NopuFFrTh/TRZIKEj+76vLWFu9BNKk+Q==

duplexer@^0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==

duplexify@^3.4.2, duplexify@^3.6.0:
version "3.7.1"
resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.7.1.tgz#2a4df5317f6ccfd91f86d6fd25d8d8a103b88309"
Expand Down Expand Up @@ -9716,6 +9738,13 @@ graphql@^15.4.0:
resolved "https://registry.yarnpkg.com/graphql/-/graphql-15.8.0.tgz#33410e96b012fa3bdb1091cc99a94769db212b38"
integrity sha512-5gghUc24tP9HRznNpV2+FIoq3xKkj5dTQqf4v0CpdPbFVwFkWoxOM+o+2OC9ZSvjEMTjfmG9QT+gcvggTwW1zw==

gzip-size@^6.0.0:
version "6.0.0"
resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-6.0.0.tgz#065367fd50c239c0671cbcbad5be3e2eeb10e462"
integrity sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==
dependencies:
duplexer "^0.1.2"

handlebars@^4.7.7:
version "4.7.7"
resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.7.tgz#9ce33416aad02dbd6c8fafa8240d5d98004945a1"
Expand Down Expand Up @@ -12408,6 +12437,11 @@ move-concurrently@^1.0.1:
rimraf "^2.5.4"
run-queue "^1.0.3"

mrmime@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/mrmime/-/mrmime-1.0.1.tgz#5f90c825fad4bdd41dc914eff5d1a8cfdaf24f27"
integrity sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==

ms@2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
Expand Down Expand Up @@ -12906,6 +12940,11 @@ open@^7.0.3:
is-docker "^2.0.0"
is-wsl "^2.1.1"

opener@^1.5.2:
version "1.5.2"
resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.2.tgz#5d37e1f35077b9dcac4301372271afdeb2a13598"
integrity sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==

openid-client@^5.1.0:
version "5.3.1"
resolved "https://registry.yarnpkg.com/openid-client/-/openid-client-5.3.1.tgz#69a5fa7d2b5ad479032f576852d40b4d4435488a"
Expand Down Expand Up @@ -14952,6 +14991,15 @@ simple-git@3.15.1:
"@kwsites/promise-deferred" "^1.1.1"
debug "^4.3.4"

sirv@^1.0.7:
version "1.0.19"
resolved "https://registry.yarnpkg.com/sirv/-/sirv-1.0.19.tgz#1d73979b38c7fe91fcba49c85280daa9c2363b49"
integrity sha512-JuLThK3TnZG1TAKDwNIqNq6QA2afLOCcm+iE8D1Kj3GA40pSPsxQjjJl0J8X3tsR7T+CP1GavpzLwYkgVLWrZQ==
dependencies:
"@polka/url" "^1.0.0-next.20"
mrmime "^1.0.0"
totalist "^1.0.0"

sisteransi@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
Expand Down Expand Up @@ -15798,6 +15846,11 @@ toidentifier@1.0.1:
resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==

totalist@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/totalist/-/totalist-1.1.0.tgz#a4d65a3e546517701e3e5c37a47a70ac97fe56df"
integrity sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==

tr46@~0.0.3:
version "0.0.3"
resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
Expand Down Expand Up @@ -16502,6 +16555,21 @@ webidl-conversions@^3.0.0:
resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
integrity sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==

webpack-bundle-analyzer@4.7.0:
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==
dependencies:
acorn "^8.0.4"
acorn-walk "^8.0.0"
chalk "^4.1.0"
commander "^7.2.0"
gzip-size "^6.0.0"
lodash "^4.17.20"
opener "^1.5.2"
sirv "^1.0.7"
ws "^7.3.1"

webpack-dev-middleware@^3.7.3:
version "3.7.3"
resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.7.3.tgz#0639372b143262e2b84ab95d3b91a7597061c2c5"
Expand Down Expand Up @@ -16821,6 +16889,11 @@ ws@8.11.0, ws@^8.2.3:
resolved "https://registry.yarnpkg.com/ws/-/ws-8.11.0.tgz#6a0d36b8edfd9f96d8b25683db2f8d7de6e8e143"
integrity sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==

ws@^7.3.1:
version "7.5.9"
resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.9.tgz#54fa7db29f4c7cec68b1ddd3a89de099942bb591"
integrity sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==

x-default-browser@^0.4.0:
version "0.4.0"
resolved "https://registry.yarnpkg.com/x-default-browser/-/x-default-browser-0.4.0.tgz#70cf0da85da7c0ab5cb0f15a897f2322a6bdd481"
Expand Down

1 comment on commit 1152e09

@vercel
Copy link

@vercel vercel bot commented on 1152e09 Dec 29, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.