Reactjs > Nextjs

Hi, after reacting how important it is to SSR for SEO purpose, I have decided to convert Reactjs app to Nextjs app. Here is my experience.

Function component vs Class component

This is very much debatable which one is better. I must admit I don’t know React well enough to understand the benefits of each styles, being Angular guy for past many years, however, I can see React/Nextjs (or even Material UI) communities prefer function components over class component. Main benefits for me is function components are far more compatible with third parties libraries and it’s easier to find code sample for function components than class components.

If you have function components in React (or if you convert your class component to function component), your migration will be a lot smoother.

Make sure child components are as stateless as possible.

Environment Variables

React and Nextjs use similar way to provide environment variables to the app. Make sure to centralise the environment variables in one place and use NODEjs style as process.env.VARIABLE_NAME.

My react environment varialbes have prefix REACT_APP_ and for Nextjs, i have to change them to NEXT_PUBLIC_. This will make those variables in client side.

Routing

This is so far the biggest one to migrate for me. Most react application use react-router-dom library with react. Nextjs has built in file based routing. All react-router routes need to be migrated to file based routes. This will include migration of all the params passing through routes.

Remove React.Lazy.

React.Lazy doesn’t work with Nextjs as of this writting. Remove all React.Lazy and Suspense loading prior to migration.

CSS

NextJs has its own style of writing CSS. Prepare to migrate the CSS to Nextjs style.

StyledComponent is supported but at the time of writing its very buggy and doesn’t integrate well.

both Material-UI and bootstrap seems to work well with Nextjs.

more coming …