Like most new projects, you may have started with a framework or toolset that you no longer wish to use. But are you stuck with what you have? Well, if you created a create-react-app using Facebook’s boilerplate repository of the same name to start your project, but want to convert to the Next.js framework, then keep reading.
A big reason for using Next.js is the way routes work. That is, a folder in your Next project is created called
pages that any file created in that folder acts like a url route. Example, if there is a file named
about.js then you you can go to
yourdomain.com/about and that file will be loaded. Whereas, with create-react-app(or CRA), you have to specify what happens when your web visitor goes to
/about and what gets loaded. You can learn more about how Next handles pages and routes here.
I would recommend first by creating a new app with Next, like so from your terminal…
npx create-next-app # or yarn create next-app
This will start the process of getting the needed files for a new app. Once that is done, in it’s most basic form, you’ll probably have files in your CRA of React components that you created, just copy and paste those files into the
pages folder of your new Next.js app, and then make sure they’re named properly and not just
index.js, as that should be used for your homepage component. Then, all your routes will just work. Now you can get rid of your whatever routes you had set up in your CRA, we don’t need them anymore.
For an example of this conversion, here’s a video tutorial where I walk you through a project for a bus and train tracker app I started with CRA, but then wanted to move it to Next.