[{"slug":"migrating-a-cra-ejected--app-to-next-js-v12","frontmatter":{"content":"\nI recently got the chance to migrate a custom CRA app to Next.js for a client. There were around ~4000 modules that were involved directly or indirectly(as npm dependency). This is what I learned through the process.\n\n# Approach to Adopting Next.js (Step-1)\n\nWith a custom CRA set up the only suitable approach is [the incremental adoption](https://nextjs.org/docs/migrating/incremental-adoption). But you would have to choose among the following two strategies.\n\n- Subpath - CRA has the main control and Next.js tackles only a path\n - Any new page addition would happen through `react-router` only by default.If you need to do it through Next.js, you would have to change it’s path.\n- Rewrites - Next.js has the main control and it tells CRA what it will do.\n - Any new page addition would happen to Next.js\n\nIt should be easy to switch b/w either of the two approaches by modifying Next.js. I would suggest a hybrid strategy. \n\n- Go for the Subpath approach in the POC stage as it is pretty quick to do\n- Switch to the Rewrite approach when you are ready to ship to production\n\n# Getting components to work with Next.js(Step-2)\n\n## 1. Dependencies Changes\n\n- Babel has been replaced by SWC by default in the latest version. The app had a babel config, which Next.js complained about. Next.js fallbacks to using Babel instead of SWC if it discovers a babel config in the app.\n - Do update babel and babel plugins to the latest version.\n- Next.js v12 enforces webpack v5. There used to be a flag `[webpack5](https://nextjs.org/docs/messages/webpack5)` that you can use to disable enforcing the use of webpack v4, which has been removed in Next.js v12\n - It would mean installing the latest version of all the plugins that are compatible with v5 if you still want to use those plugins.\n - You would have to go and fix the data input format of a few plugins as that might not be compatible with v5. Webpack does a decent job of telling what exactly is wrong in plugin config.\n- If you see an error that Webpack can’t understand the SVG file. [Add SVG loader in webpack](https://stackoverflow.com/a/55180310)\n\n## 2. **App Code Changes**\n\n- If you are importing a CSS with side-effect `import \"a.css\"`, it is global CSS and Next.js throws an error and asks to move it to **`_app.js`**. Learn how to do it [here](https://nextjs.org/docs/basic-features/built-in-css-support#adding-a-global-stylesheet). If there are many such imports it’s going to be a pain to find out all of them\n - Run `next dev` and see where it is reporting this error and move all such imports to `_app.js`\n - It gives errors one by one which is sad and thus it takes a lot of time depending on how many such files are there. You might be better looking at a pattern as to where all such imports exist and make the changes according to that pattern in one go.\n - If you would find a lot of such instances, you can comment those CSS Import lines temporarily to focus on other problems first and then come back to convert those CSS files into CSS modules.\n - You should plan to convert all those global CSS imports to CSS modules anyway.\n- `React Router` related changes. Also, read [https://nextjs.org/docs/migrating/from-react-router](https://nextjs.org/docs/migrating/from-react-router)\n - `useLocation` provided by [`react-router`](https://github.com/remix-run/react-router) has to be replaced with `useRouter` provided by [`next/router`](https://nextjs.org/docs/api-reference/next/router).\n - Link component provided by `react-router` is to be replaced with Link component provided by [`next/link`](https://nextjs.org/docs/api-reference/next/link)\n - Also, `to` attribute has to be converted to `href` attribute.\n \n ### Some of the Errors that I encountered and how I fixed them\n \n - `You may need an additional loader to handle the result of these loaders.\n export type { CCProviders } from \"./types\";`\n - **Solution**: Upgrade the babel plugins and babel to the latest version.\n - `Module not found: Can't resolve 'react/jsx-runtime' in ...`\n - **Solution**: Make sure Typescript is at least 4.3.2 and react is at least v16.4.0. Read [this](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) for more details\n - React Router’s `Link` component allows multiple children but the `next/link` [doesn’t allow that](https://nextjs.org/docs/messages/link-multiple-children).\n - **Solution:** Avoid having multiple children.\n\n# **Pre-rendering (SSR or SSG)(Step-3)**\n\nAt this point, you should have a working page that is rendered by Next.js. It might look to you that your job is done as you are seeing the page perfectly but it might or might not be pre-rendering. I\n\nf you have a pretty simple app(with no data fetch requirements), then Next.js should be automatically rendering the components on the server-side and you are done. But even with a slightly complex app, you would face issues with getting components to render into HTML on the server. \n\nThis is owing to the following reasons:\n\n- `useEffect` never executes on the server. This is where the data fetching code usually exists.\n- State changes don’t cause components to re-render on the server.\n\nYou would have to choose the data fetching strategy according to [https://nextjs.org/docs/basic-features/data-fetching](https://nextjs.org/docs/basic-features/data-fetching)(which also decides you are going to do SSR or SSG). After that, you would have to refactor your code let Next.js own data fetching.","data":{"category":"SSG, React, React-Hooks, SSR, migration","creationTs":1641876660000,"date":"January 11, 2022 5:51 AM","lastModified":"March 3, 2022 10:27 AM","lastModifiedTs":1646299620000,"published":"Yes","title":"Migrating a CRA(ejected) app to Next.js v12"},"isEmpty":false,"excerpt":"","category":["SSG","React","React-Hooks","SSR","migration"],"creationTs":1641876660000,"date":"January 11, 2022","lastModified":"March 3, 2022 10:27 AM","lastModifiedTs":1646299620000,"published":"Yes","title":"Migrating a CRA(ejected) app to Next.js v12","updated":"March 3, 2022"},"content":"

I recently got the chance to migrate a custom CRA app to Next.js for a client. There were around ~4000 modules that were involved directly or indirectly(as npm dependency). This is what I learned through the process.

Approach to Adopting Next.js (Step-1)

With a custom CRA set up the only suitable approach is the incremental adoption. But you would have to choose among the following two strategies.

Subpath - CRA has the main control and Next.js tackles only a path
- Any new page addition would happen through react-router only by default.If you need to do it through Next.js, you would have to change it’s path.
\n
Rewrites - Next.js has the main control and it tells CRA what it will do.
- Any new page addition would happen to Next.js
\n

It should be easy to switch b/w either of the two approaches by modifying Next.js. I would suggest a hybrid strategy.

Go for the Subpath approach in the POC stage as it is pretty quick to do
Switch to the Rewrite approach when you are ready to ship to production

Getting components to work with Next.js(Step-2)

1. Dependencies Changes

Babel has been replaced by SWC by default in the latest version. The app had a babel config, which Next.js complained about. Next.js fallbacks to using Babel instead of SWC if it discovers a babel config in the app.
- Do update babel and babel plugins to the latest version.
\n
Next.js v12 enforces webpack v5. There used to be a flag [webpack5](https://nextjs.org/docs/messages/webpack5) that you can use to disable enforcing the use of webpack v4, which has been removed in Next.js v12
- It would mean installing the latest version of all the plugins that are compatible with v5 if you still want to use those plugins.
- You would have to go and fix the data input format of a few plugins as that might not be compatible with v5. Webpack does a decent job of telling what exactly is wrong in plugin config.
\n
If you see an error that Webpack can’t understand the SVG file. Add SVG loader in webpack

2. App Code Changes

If you are importing a CSS with side-effect import "a.css", it is global CSS and Next.js throws an error and asks to move it to _app.js. Learn how to do it here. If there are many such imports it’s going to be a pain to find out all of them
- Run next dev and see where it is reporting this error and move all such imports to _app.js
  - It gives errors one by one which is sad and thus it takes a lot of time depending on how many such files are there. You might be better looking at a pattern as to where all such imports exist and make the changes according to that pattern in one go.
  - If you would find a lot of such instances, you can comment those CSS Import lines temporarily to focus on other problems first and then come back to convert those CSS files into CSS modules.
  \n
- You should plan to convert all those global CSS imports to CSS modules anyway.
\n
React Router related changes. Also, read https://nextjs.org/docs/migrating/from-react-router
- useLocation provided by react-router has to be replaced with useRouter provided by next/router.
- Link component provided by react-router is to be replaced with Link component provided by next/link
  - Also, to attribute has to be converted to href attribute.
  \n
\n
Some of the Errors that I encountered and how I fixed them
\n
- You may need an additional loader to handle the result of these loaders. export type { CCProviders } from "./types";
  - Solution: Upgrade the babel plugins and babel to the latest version.
  \n
- Module not found: Can't resolve 'react/jsx-runtime' in ...
  - Solution: Make sure Typescript is at least 4.3.2 and react is at least v16.4.0. Read this for more details
  \n
- React Router’s Link component allows multiple children but the next/link doesn’t allow that.
  - Solution: Avoid having multiple children.
  \n
\n

Pre-rendering (SSR or SSG)(Step-3)

At this point, you should have a working page that is rendered by Next.js. It might look to you that your job is done as you are seeing the page perfectly but it might or might not be pre-rendering. I

f you have a pretty simple app(with no data fetch requirements), then Next.js should be automatically rendering the components on the server-side and you are done. But even with a slightly complex app, you would face issues with getting components to render into HTML on the server.

This is owing to the following reasons:

useEffect never executes on the server. This is where the data fetching code usually exists.
State changes don’t cause components to re-render on the server.

You would have to choose the data fetching strategy according to https://nextjs.org/docs/basic-features/data-fetching(which also decides you are going to do SSR or SSG). After that, you would have to refactor your code let Next.js own data fetching.

\n"}]

Category: migration