Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Migrate to next.js #112

Merged
merged 110 commits into from
Apr 16, 2022
Merged

Migrate to next.js #112

merged 110 commits into from
Apr 16, 2022

Conversation

htbkoo
Copy link
Owner

@htbkoo htbkoo commented Apr 14, 2022 •
edited
Loading

And as a bonus, this will upgrade react to v18.0.0 as well

And this will fix #109, fix #103, close #85, close #62 and close #108

TODO checklist:

  1. add next.js dependencies
  2. setup next.js
  3. remove create-react-app dependencies, e.g. react-scripts
  4. migrate all relevant parts to next.js (e.g. app architecture, build pipeline)
  5. fix all errors
  6. test build locally
  7. fix build and configure GitHub actions CI
  8. compare performance before and after migration
    1. Example reports:
      1. before migration (production)
        hey-personal-portfolio-prod_pagespeed-web-dev_20220415
      2. after migration (staging)
        hey-personal-portfolio-staging_pagespeed-web-dev_20220415
      3. with page split(staging)
        with-page-split-rearchitecture_hey-personal-portfolio-staging_pagespeed-web-dev_20220415
  9. fix sub-path problem after deploying to GitHub pages
  10. fix storybook
    1. extracted to Fix storybook after migration to next.js #114
  11. split web app into Home, Portfolio and Contact pages
  12. fix local dev environment (currently the styles are not applied until the toggling of dark / light mode)
  13. make sure service worker still works and can pass the lighthouse PWA check
  14. clean up and removed unused old codes / assets
    1. extracted to Miscellaneous code refactoring #71 and Review project and remove unused codes #105
  15. fix scrollspy which stops working after migration
    1. related: Migrate to @makotot/ghostui to replace usage of react-scrollspy #113

htbkoo added 30 commits April 13, 2022 19:22
@htbkoo
(migrate-to-next-js) added new files created by create-next-app
43d5c05
@htbkoo
(migrate-to-next-js) removed leftover file from create-react-app
a115a0b
@htbkoo
(migrate-to-next-js) updated README.md to add a Major updates sec…
7e40b5c 
…tion
@htbkoo
(migrate-to-next-js) merged configs from next.js
2c09281
@htbkoo
(migrate-to-next-js) added configs for next.js with jest (referen…
1348333 
…ce: https://github.com/vercel/next.js/tree/canary/examples/with-jest)
@htbkoo
(migrate-to-next-js) bumped version
735984e
@htbkoo
(migrate-to-next-js) updated scripts in package.json
725ab3c
@htbkoo
(migrate-to-next-js) removed duplicated eslint configs in `package.…
da4df87 
…json` as there is a standalone `.eslintrc.json` from `next.js`
@htbkoo
(migrate-to-next-js) updated dependencies and devDependencies for `ne…
564dc39 
…xt.js` and removed leftover dependencies from `create-react-app`
@htbkoo
(migrate-to-next-js) updated scripts.build for next.js static HTM…
d9e1456 
…L export

 (reference: https://nextjs.org/docs/advanced-features/static-html-export)
@htbkoo
(migrate-to-next-js) updated scripts.build for next.js static HTM…
7dd7fb6 
…L export

 (reference: https://nextjs.org/docs/advanced-features/static-html-export)
@htbkoo
(migrate-to-next-js) updated browser environment variables prefix to …
c231424 
…`NEXT_PUBLIC_` for `next.js` (reference: https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser)
@htbkoo
(migrate-to-next-js) applied auto-formatting
5f6b559
@htbkoo
(migrate-to-next-js) applied auto-formatting
e79e95c
@htbkoo
(migrate-to-next-js) applied auto-formatting
88fddbe
@htbkoo
(migrate-to-next-js) applied auto-formatting
ac6bc7a
@htbkoo
(migrate-to-next-js) added config to handle the subpath in GitHub Page
e0ef393
@htbkoo
(migrate-to-next-js) applied auto-formatting
008193f
@htbkoo
(migrate-to-next-js) copied legacy css to styles/globals.css
65135c0
@htbkoo
(migrate-to-next-js) cleaned up styles/globals.css
55bf970
@htbkoo
(migrate-to-next-js) updated next.config.js for basePath and `ass…
527ed69 
…etPrefix`
@htbkoo
(migrate-to-next-js) added @/services/* to paths at `tsconfig.jso…
9d9e927 
…n` as a temporary workaround
@htbkoo
(migrate-to-next-js) updated next.config.js for basePath and `ass…
e2b24cd 
…etPrefix` (reference: https://blog.sallai.me/deploy-next-site-to-github-pages)
@htbkoo
(migrate-to-next-js) fixed compilation errors
0f5d6cc
@htbkoo
(migrate-to-next-js) created _document.tsx (reference: https://next…
8f3a502 
…js.org/docs/advanced-features/custom-document#typescript)
@htbkoo
(migrate-to-next-js) added force dependencies version resolution to d…
a8c99c9 
…owngrade `@types/react` and `@types/react-dom` back to `v17.x.x` because of the breaking changes in version 18 that could not be fixed until either material-ui is upgraded to v5 or this PR (DefinitelyTyped/DefinitelyTyped#59751) is merged

Note this codemod (https://github.com/eps1lon/types-react-codemod) would not help because the errors are caused by library (see this facebook/react#24304 (comment) for the details)

References:
1. https://stackoverflow.com/questions/71810438/compilation-issue-with-react-typescript-and-material-ui-4
2. DefinitelyTyped/DefinitelyTyped#56210 (comment)
3. facebook/react#24304 (comment)
4. https://classic.yarnpkg.com/lang/en/docs/selective-version-resolutions/
5. facebook/react#24304 (comment)
@htbkoo
(migrate-to-next-js) removed unused img resource
1ebeea6
@htbkoo
(migrate-to-next-js) escaped quote in _document.tsx to eliminate wa…
bdc3c59 
…rning `react/no-unescaped-entities`
@htbkoo
(migrate-to-next-js) added @/public/* to paths at tsconfig.json…
646d368 
… as a temporary workaround
@htbkoo
(migrate-to-next-js) added moduleNameMapper at jest.config.js to …
95ba759 
…add module aliases in order to fix broken tests
htbkoo added 25 commits April 15, 2022 17:50
@htbkoo
(migrate-to-next-js) removed duplicated redundant assets
1c278bb
@htbkoo
(migrate-to-next-js) removed unused
9bc688f
@htbkoo
(migrate-to-next-js) refactored and extracted <PageSection />
13c0f77
@htbkoo
(migrate-to-next-js) created <TransitionLayout /> (reference: https…
4121c0e 
…://dev.to/anxiny/page-transition-effect-in-nextjs-9ch)
@htbkoo
(migrate-to-next-js) created styles/Layout.module.css
7f765f3
@htbkoo
(migrate-to-next-js) updated <TransitionLayout /> to only employ fa…
ef72c6a 
…de-in / fade-out effect when `pathname` has changed (instead of applying the effect every time when components has changed which is overkill)
@htbkoo
(migrate-to-next-js) removed unused
079259b
@htbkoo
(migrate-to-next-js) reordered imports for consistency
f49f56e
@htbkoo
(migrate-to-next-js) fixed fade-in / fade-out transition effect durin…
4c4aa32 
…g page changes
@htbkoo
(migrate-to-next-js) updated design to avoid uncomfortable layout shi…
46186a4 
…ft at contact page
@htbkoo
(migrate-to-next-js) [major re-architecture] revamped app architectur…
c41e111 
…e and split pages into different component for better first load time and UX
@htbkoo
(migrate-to-next-js) [major re-architecture] bumped version
40cd018
@htbkoo
(migrate-to-next-js) fixed UI glitch by removing duplicated scrollbar
2aa15b6
@htbkoo
(migrate-to-next-js) added missing dependencies to effect hook to eli…
b8d1ff6 
…minate warnings
@htbkoo
(migrate-to-next-js) re-ordered node-version at `.github/workflows/…
0014112 
…node.js.yml`
@htbkoo
(migrate-to-next-js) added Common Known Issues.`Windows compatibili…
c26c0da 
…ty` at `README.md`
@htbkoo
(migrate-to-next-js) removed temporary workaround scripts (due to W…
ce62aea 
…indows incompatibility) at `package.json`
@htbkoo
(migrate-to-next-js) separated build step from test step at `.git…
150dd9a 
…hub/workflows/node.js.yml`
@htbkoo
(migrate-to-next-js) disabled unhelpful warning
231ae3e
@htbkoo
(migrate-to-next-js) attempted to disable reactStrictMode to fix `m…
76523b7 
…aterial-ui` and `next.js` styles incompatibility issue (reference: https://stackoverflow.com/a/67276953)
@htbkoo
(migrate-to-next-js) reverted changes as that did not fix the issue
c444809
@htbkoo
(migrate-to-next-js) applied auto-formatting
92d8e75
@htbkoo
(migrate-to-next-js) applied auto-formatting
41e9d9c
@htbkoo
(migrate-to-next-js) attempted to fix SSR incompatibility between `ma…
89609bc 
…terial-ui` and `next.js` by using some temporary hacks to make sure the classNames are deterministic (reference: https://v4.mui.com/styles/advanced/#class-names)
@htbkoo
(migrate-to-next-js) fixed "scrollspy" effect by using some temporary…
132bdb7 
… hacks to manaully match the` pathname`
@htbkoo htbkoo mentioned this pull request Apr 16, 2022
Open
@htbkoo htbkoo merged commit 4561a43 into master Apr 16, 2022
@htbkoo htbkoo deleted the migrate-to-next-js branch April 16, 2022 01:26
This was referenced Apr 18, 2022
Closed
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@htbkoo htbkoo

Labels
None yet
Projects
None yet
Milestone
No milestone
1 participant
@htbkoo