Migrating from Create React App to NextJS

George Bardi
2 min readJun 8, 2024

--

Source: Lexica

The migration process

The migration process was relatively straightforward. I followed the official NextJS docs and made some tweaks to fit our needs, so i won’t dive too deep into it, but rather focus on some of the gotchas that i ran into in the process.

Gotcha #1: Why ‘use client’ isn’t enough for Client Side Rendering ?

When working with Client Components in React, it’s essential to understand how to handle Server-Side Rendering (SSR) to avoid hydration errors. The 'use client' directive plays a key role in this process.

It instructs the bundler to output the component code as a separate file, which can be loaded lazily in the browser. Additionally, it tells the React Server Components (RSC) to include a placeholder for this Client Component in the Virtual DOM instead of the actual HTML output.

However, to fully prevent Server-Side Rendering (SSR) for a Client Component, simply using the 'use client' directive isn't enough. Instead, you need to use next/dynamic to dynamically import the component with SSR explicitly disabled. Here’s how you can achieve this:

"use client";

import AuthProvider from "@/providers/AuthProvider";
import AppBar from "@/components/Appbar";

export default function RootLayout({ children }) {
return (
<AuthProvider>
<AppBar />
<div id="root">{children}</div>
</AuthProvider>
);
}
"use client";

import dynamic from "next/dynamic";
const RootLayout = dynamic(() => import("./components/rootLayout"), {
ssr: false
});
export default function Layout({ children }) {
return (
<html lang="en">
<body>
<RootLayout children={children} />
</body>
</html>
);
}

Gotcha #2: StrictMode in react 18 provoke infinite loop

StrictMode in react 18 provoke infinite loop when using @react-keycloak/web, the app continuously redirect to keycloak server then back to react then keycloak server (infinite loop), so i just removed strict mode in next.config.js

module.exports = {
reactStrictMode: false,
};

--

--