Published on

Migrate from CRA to Next.js with a single command

Thumbnail

I read the Next.js docs when Next.js 9 was released.

As there have been many changes to Next.js since version 9, I have re-read the docs again.

While I was reading, I came across this page.

If you do not know what Codemod is, I came across this explanation:

Codemod is a tool/library to assist you with large-scale codebase refactors that can be partially automated but still require human oversight and occasional intervention. Codemod was developed at Facebook and released as open source.

Next.js team created a codemod for migrating CRA (create-react-app) projects to Next.js.

You can migrate your project to Next.js with this single command → npx @next/codemod cra-to-next <path>

The path should be the root directory of the CRA project.

If you are at the root directory, you can type this command to run the codemod → npx @next/codemod cra-to-next .

I tried it in my CRA projects, and it worked wonderfully.

There are several problems, though:

  1. You still have to configure your route paths.
  2. Everything is still client-side rendered.
  3. You need to check whether there are files that need to access the window object.

As your code both run at server and client, the window object is not accessible at the server.

Warning: This codemod is still in an experimental stage; if you encounter any problems, you can share it in this discussion.