Migrate to Next.js

[ezhlobo]

There are two key advantages for us that Next.js has over CRA:

• Built in server side rendering
• Better optimization

Due to them I think it makes sense to run an experiment and see if we can build our framework on top of Next.js that covers our needs.

---

Progress

tree/migrate-to-nextjs

• dreact app
  • start (plus build)
    • Delegates to next.js
    • Adds Pug
    • Supports our file structure
    • more
  • Supporting polyfills
• dreact env-sync
• dreact test
• dreact lint
  • js
  • styles
• dreact book
  • start (plus build)
    • more

Useful new features

• Make sure .gitignore contains necessary files
• Handle Routes inside dreact (this is important because Nextjs requires some efforts to maintain routes and in most cases will ask you to use third-party solutions such as next-routes)

[ezhlobo]

Next.js relies on react and react-dom packages in Node scripts. It's possible to mock them and point to necessary files, however it seems like they are run in jest-worker and it can be quite tricky to achieve and override the references.

[radion-chernyakov]

@ezhlobo hey, do you need help with it?

[ezhlobo]

@nixololo my main issue is that I don't know how to hide next dependency behind react.

Ideally I don't want to expose what is used under the hood and provide own framework, so it's important.

[ezhlobo]

I attached working branch. I successfully ran nextjs behind dreact app. However I stuck on a task when I need to sync server side router and local router.

• Local development
• Nodejs server that does SSR
• Static app (when all files are plain html files)
• Dynamic app (when there's one html file that handles all routes)

I want to get a router that can be transformed into something that gives the possibility to implement steps mentioned above.

Also it seems like we need to invent new commands. I'm thinking about something like this:

• Local development
  dreact app dev
• Nodejs server that does SSR
  dreact app ssr-build
dreact app ssr
• Static app
  dreact app static-build
• Dynamic app
  dreact app dynamic-build

PS. Even though my main focus is to implement local development and dynamic app, I need to be careful and pay attention on all the constraints we have from SSR and Static app.

[viscoze]

@ezhlobo when you're talking about "Dynamic app" do you mean implementing of client side routing?

Like we receive an html with one script tag, and then receive a bundle of the whole app. Then we use routing to navigate to other routes directly in a browser

[ezhlobo]

@viscoze yes, "Dynamic apps" are those that understand what to output in runtime, not on server or via pre-building all pages.