Migrate Why8By8 to Next.js

[dvorakjt]

Problem

We are migrating the web-app to Next.js to take advantage of all its features to improve user experience, improve developer experience, integrate TypeScript and Inversify.js to create a more type safe and testable app, and much more.

In the next-js-migration branch we need the Why8By8 component to be migrated to use Next.js and TypeScript. Also, we need Unit Tests to be written to test the component.

Goal

Have the Header component in TypeScript
100% coverage of Unit Tests for Why8by8
Clean up coding style to make the codebase more consistent and readable

Additional context

Things to look for:

Wherever we previously used history.push consider using the Next.js router and prefetching
Whenever changing styles or adding in styling try to first use already defined scss classes or mixins
Make updates to better match how the web-app was designed in Figma: Colors/Spacing Figma, Figma for most components, Figma for Rewards
Update variable names, class names, and file names to keep things consistent across the codebase
Use more descriptive and accurate HTML elements
To get started create a next-js-migration branch in your fork of the web-app. Once you've switched to the branch then use npm install to install dependencies and npm run dev to start the development server. You'll probably need to upgrade your node version to 16.0.0 or higher to have things work correctly.

Here are links to more details about the migration including details on Next.js and TypeScript, SCSS structure and guide, naming conventions, and unit tests.

Take a look at the official Next.js documentation and official TypeScript documentation as well as this TypeScript cheat sheet.

For reference here are simple unit tests in Next.js and more complex unit tests from the old CRA framework.