How to migrate from create-react-app to next js? ... and a few other questions..

[Elindo586]

So I want to migrate a client-side-rendering REACT-App to Next.js... Why? Because of SEO issues.
The link to the website I want to migrate is this one:
https://github.com/Elindo586/techunion

Questions:

How hard is to do a migration? How much time likely?

How considerations do I need to keep in mind for the migration?

Right now I am using

database from MongoDB,
using Mongoose
Bootsrap....
and I am hosting the site on Heroku using http.
and whatever other plugin I might have..

Also.... could I convert the nextjs into a PWA as well?

[ephraimduncan]

The Next.js Docs has a great writeup on this. You can check it out here. https://nextjs.org/docs/migrating/from-create-react-app

Let me lay out some highlights for you.

1. Setup your app using create-next-app command or manually install all dependencies and add necessary scripts to your package. json.
2. Recreate all your routes and file structure. Next.js has a file-system based router built on the concept of pages. Migrate all your React Routes to Next.js
3. Create a components directory and transfer all your components.
4. Fix all your styling. Import your main stylesheet in _app.js. Next.js has built-in support for CSS and SCSS from version 9.3
5. Convert your pages to be a Static Page or a Server-Rendered Page. Move all of your data fetchings to one of the functions: getStaticProps or getServerSideProps. getStaticProps should be used on those routes that you want to be rendered at build time and served as static. If you want to use it on a dynamic route you should also use getStaticPaths.
   getServerSideProps is to be used on those routes that you want to generate on the server. Read more on data fetching in Next.js here.

[Elindo586]

Thanks... that is a good guide...

[pakito312]

Migrating from CRA (or Vite) to Next.js usually involves:

1. Setting up a new Next.js project with npx create-next-app@latest.
2. Moving your src components/pages into the app or pages directory.
3. Replacing react-router with Next.js built-in routing.
4. Adapting environment variables and API calls.
5. Configuring SSR/SSG where needed.
6. Updating build/deploy pipeline (e.g. Vercel).

This process can be time-consuming, especially if the project is large.
As an alternative, I’ve been working on a tool called ViteToNext.AI that automates a big part of this migration (file structure, routing, TypeScript, config).
It runs client-side (no project data stored) and might save you quite a bit of setup time.

Would love feedback if you give it a try.