5 difficulties : converting CRA to NextJS

1. converting a cra to SSR

https://dev.to/coderdan/5-issues-i-encountered-while-converting-a-create-react-app-to-ssr-and-how-i-solved-them-4lje#:~:text=To%20convert%20your%20CRA%20app,component%20found%20in%20next%2Frouter.

the benefit:

        loading in data before the render

5 difficulties I encountered while converting my CRA app to NextJS

1. Handling Global State

Global state: handles authentication on initial page load

           1.1  In a CRA app: wrap the main App component in a state provider like Redux or React Context Provider

             1.2 In NextJS: create an `_app.js ` folder in the `pages/` directory and extend the App class; Then you can wrap the Component class (a NextJS) class with your State provider.   

https://codeconqueror.com/blog/state-management-in-next-js

The global state (user logged in or not) as a React Context object:

2. Routing

Since NextJS allows for both server-side routing and client-side routing, it also uses a special Router component found in `next/router`

The NextJS router has its own custom Link component that handles client-side routing.

        => Link takes two properties: href and as

        => when should you use both of these two properties

3. getInitialProps

It can be called on the default export component of your .js or .tsx file, and it returns an object that, when finished, gets sent to the props of your default export.

The page will not finish loading until that fetch has completed.

IF you're using Firebase, and use getInitialProps to fetch your data, you cannot use the onSnapshot method to listen to changes in your objects.

4. Environment Variables

You need to declare them in the next.config.js file within an env:{} object. Then you can call process.env.VAR_NAME as you would in CRA app.

5. CSS and Dynamic Loading

You can dynamically require components using `next/dynamic`