Steps for migrating an existing React project to Next JS
Step 1: Setting up a new Next JS Project
To begin, let’s create a new Next JS project using the following command:
npx create-next-app my-next-app
This will set up a new Next JS project in a directory named the my-next-app. Once the installation is complete, navigate into the project folder:
cd my-next-app
Step 2: Moving existing React components
Now that we have our Next JS project set up, it’s time to move our existing React components into the new project’s structure. By default, Next JS follows the conventions for the pages directory, where each file in this directory becomes a route.
For example, let’s say we have a React component in our existing project like this:
// existing-project/src/components/Header.jsimport React from 'react';const Header = () => {return <header>This is the header component</header>;};export default Header;
We should move this component to the following location within the Next JS project:
// my-next-app/pages/components/Header.jsimport React from 'react';const Header = () => {return <header>This is the header component</header>;};export default Header;
Step 3: Routing
Next JS uses file-based routing, meaning the file structure determines the routing. For example, if you want to create a page with the URL path /about, you would create a file named the about.js inside the pages directory.
Let’s say we have an existing About component in our previous React project. We’ll move this component as follows:
// existing-project/src/components/About.jsimport React from 'react';const About = () => {return <div>About page content</div>;};export default About;
We should move this component to the following location within the Next JS project:
// my-next-app/pages/about.jsimport React from 'react';const About = () => {return <div>About page content</div>;};export default About;
With this file-based routing, Next JS will handle the URL routing for us.
Step 4: Assets and static files
Next JS has a built-in way of handling assets and static files. In the public directory, you can place images, fonts, and other files, which will be served at the root URL.
For instance, if you have an image logo.png in your existing project:
// existing-project/src/assets/logo.png
Move it to the following location in the Next JS project:
// my-next-app/public/assets/logo.png
You can then reference this image in your components using the root path:
// In any component<img src="/assets/logo.png" alt="Logo" />
Step 5: Styling
Next JS supports various CSS modules and preprocessors, but you can also continue using your existing styling solution.
For example, if you were using CSS modules in your previous React project:
/* existing-project/src/components/Header.module.css */.header {font-size: 24px;color: #333;}
You can simply copy this file into the Next JS project:
/* my-next-app/components/Header.module.css */.header {font-size: 24px;color: #333;}
And import and use it in your components as before.
Step 6: Data fetching and API routes
Next JS provides built-in support for data fetching using methods like getServerSideProps, getStaticProps, and getInitialProps. If your existing project uses any external APIs or custom data fetching functions, you can continue using them with some adjustments.
For example, if you had a data fetching function in your previous React project like this:
// existing-project/src/utils/api.jsconst fetchData = async () => {const response = await fetch('https://api.example.com/data');const data = await response.json();return data;};export default fetchData;
You can copy this function into your Next JS project and use it with the getServerSideProps or getStaticProps:
// my-next-app/pages/api/data.jsconst fetchData = async () => {const response = await fetch('https://api.example.com/data');const data = await response.json();return data;};export default fetchData;
On the specific page where you need to fetch data, you can use the getServerSideProps like this:
// my-next-app/pages/some-page.jsimport React from 'react';import fetchData from './api/data';const SomePage = ({ data }) => {return <div>{data}</div>;};export async function getServerSideProps() {const data = await fetchData();return {props: {data,},};}export default SomePage;
Step 7: Testing
If you have tests for your existing React components, you can continue using them in the Next JS project. Jest and other popular testing libraries are fully compatible with Next JS.
Step 8: Build and deployment
Finally, it’s time to build and deploy your Next JS application. For deploying your Next.js application, it is recommended to use Vercel as a preferred hosting provider. Vercel offers seamless integration with Next.js, allowing you to easily create an optimized production build using the command:
npm run build
Next JS will generate a build folder containing the optimized assets and HTML files. Once built, you can effortlessly deploy the generated 'build' folder to Vercel for a smooth and efficient deployment process.
Conclusion
We have migrated our existing React project to Next JS. By following the steps mentioned above, we have unlocked the powerful features of Next JS, such as server-side rendering, file-based routing, and automatic code splitting, which can significantly enhance our application’s performance and SEO.
Remember that every project is unique, and some adjustments might be necessary based on your specific requirements. Additionally, consider exploring Next JS documentation and community resources for further optimizations.
Free Resources
