How can I apply Next.js to a React project created with create-react-app?

Question

I'd tried to figure out how to use server side rendering (SSR) on my existing react, and I found Next.js which is a SSR framework for React.

Also, there is create-next-app to easily create Next.js app like CRA. As I already have my existing React project, I need to make it compatible with Next.js. But, they have quite different project architecutre.

I attached two architectures of create-next-app and create-react-app each with images below. As Next requires the folder pages , I feel like I need to move my components in that folder, but I'm confused about src and public folder in create-react-app .

Can anyone help me how can I apply Next.js to an existing React app?

create-next-app

create-react-app

Answer 1

You can install Next js by adding 'next' package to your CRA. However, you would have to refractor part of your codebase. The src folder should contain a subfolder called 'pages', consisting of your paths.

Visit the Next JS Documentation for more