New React docs and a move to Next.js

The React team at Facebook just updated the official react site at react.dev, and as well as being one of the better sources of documentation for a developer framework, it just got a whole lot better.

An interesting point I picked up in the wording of the new react documentation is the subtle change in stance & wording around going “full-stack with a framework”.

React is a component library for building UI’s, and by design has no strong opinions on what you use it for or use it with – routing, testing, other components, mixing with other frameworks such as angular etc.

For developers who wanted more of a railroaded approach, Facebook created create-react-app as a fantastic out-of-the-box experience to get a working application off the ground. I have successfully used this as a starting point for a number of clients over the years and the results have been great.

In the years since, other frameworks have been developed and grown and become a lot more featured than create-react-app, the front runner of these is Next.js.

Without getting in to too much detail here, Next.js offers opinions on routing and other configurability, but where Next really shines is it’s support for different types of server side rendering out of the box.

Now it appears Facebook themselves have acknowledged this. Before, create-react-app was more of a recommended approach, but now it appears other frameworks are not being recommended over create-react-app - most notably Next.js.

Facebook don’t make these sorts of moves or suggestions lightly, So I am treating it a very early signal that Next.js is the stronger way to go for any new projects that are started from scratch.

Migrating from create-react-app to Next.js

In saying that, I thought it might be fun to take a really basic app created with create-react-app and see about porting it over to Next.Js. For simple solutions, the process is actually pretty easy

Create a new Next.js project using npx create-next-app.
Move any images, fonts, or other static assets to the public directory.
Convert index.html (the entry point of your application) to Next.js.
Update package.json and dependencies. Remove react-scripts (but keep react and react-dom). If you’re using React Router, you can also remove react-router-dom.
Install Next & add Next.js related commands to scripts. One is next dev, which runs a development server at localhost:3000.
Drop your components into your Next.js project.

There is a great tutorial on the Next.js site which goes into more detail