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.
