Migrate Next.js and Storybook and fix compile errors

[nozomione]

Context

Currently the storybook doesn't load due to the compile errors and they needs to be fixed.

Recently we upgraded the docker image for Node v16 to v18 due to the deprecation of Node.js 16 and Vercel will discontinue the support as a result.

Because of this change, the following upgrades will be made to our repository to eliminate the dependency conflict (some errors are caused by it):

• Migrate the storybook v6 to v7 (The Storybook Migration Guide)
• Migrate the Next.js v12 to v13 (The Next.js Migration Guide)
  • v13 is backward compatible and fully supports v12 implementation
  • Upgrading to v13 resolves warnings currently seen with v12(e.g., Attempted to load @next/swc-linux-arm64-gnu, but it was not installed)
• Upgrade the package manager yarn v1 to the latest stable version v3 (Upgrade Yarn)
  • Resolve the error for some packages and faster build
  • The versions are togglable by using yarn set version

NOTE: For the yarn package manager, we have an option to include the auto-generated .yarn/cache in our repository which is recommended by the yarn (The Zero-installs) or to use the global cache (regular install). Based on the choice, we should modify .gitignore as listed in Which files should be gitignored.

e.g. ) A comiple error for the storybook:

ModuleBuildError: Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot combine importAssertions and importAttributes plugins.

Problem or idea

Migrate the packages and resolve the compile errors so that we can run all the services.

Solution or next step

• Migrate Next.js and the storybook
• Upgrade the package manager yarn to the latest stable version v3
• Resolve the compile errors