POC: Move the Website to Static Site Generation (SSG) using Next.js or Remix

[andron13]

📝 Describe the feature

We need to check if it’s possible to move the current website to Static Site Generation (SSG) using Next.js and Remix. For this, two branches should be created: poc-ssg/next and poc-ssg/remix. Each branch will have the full website transferred and tested with SSG.

ℹ️ Additional context

The goal is to move the whole website to SSG using Next.js and Remix and test if it works correctly. The POC will help the team understand which framework is better for the project. We should check if there are any issues or benefits during the transfer process. There could be technical challenges, like backend limitations, that need to be considered.

✅ Definition of Done (DoD):

• Two branches are created: poc-ssg/next and poc-ssg/remix.
• The full website is transferred and working on both branches.
• The website should be statically generated with commands like npm run build (or equivalent in each framework).
• The ease of use and difficulties faced with each framework are listed.
• Recommendations are provided based on the POC results.

Responsible:
@andron13, @YulikK, @Quiddlee

[YulikK]

started doing the remix branch

[Quiddlee]

Two branches are created: poc-ssg/next and poc-ssg/remix - if you create branch with these names you'll not be able to push the code due to husky rules

[YulikK]

You can see the result in the feat/554-poc-ssg-remix

Transition issues:

1. Using useWindowSize hook in footer, header, alumni, courses components does not allow to make them server-side as there is no window.innerWidth on the server.

2. Disabled the use of the NextTopLoader page load indicator component from the nextjs-toploader library. Catch an error:
   Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

3. Disabled the use of the Marquee component from the react-double-marquee library. Catch an error:
   Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
   P.S. There is no error when navigating to the community page, but when refreshing the page the error appears

4. Error when using the dayjs.isBetween method - changed the logic a bit

5. Deleted three test files: base-layout.test.tsx, course-main.test.tsx, places.test.tsx

6. On the page javascript-preschool-ru CloneElement method gave an error saying that ul can not be nested in p(widget TrainingProgram)

[thirdmadman]

Little about next.js and FSD
https://feature-sliced.design/docs/guides/tech/with-nextjs

[YulikK]

You can see the result in the poc-ssg-nextjs

Transition issues:

1. Removing react-router, change navigation hooks
2. Importing images now gives an object as a result. Added src field to all image variable
3. Removed useSizeWindo hook
4. Removed useTitle hook, moving title setting logic to route files
5. Removed hooks for data request, I pass data directly from the route file.
6. Problem with naming folders by fsd. Renamed pages folder to views folder. Renamed app folder to core folder
7. Disable eslint rule for default export
8. Removed ScrollRestoration
9. Dayjs.isBetween same problem as when switching to remix, import changed a bit
10. Deleted all test files