Skip to content

Instantly share code, notes, and snippets.

@tannerlinsley
Last active March 27, 2024 10:07
Show Gist options
  • Save tannerlinsley/65ac1f0175d79d19762cf06650707830 to your computer and use it in GitHub Desktop.
Save tannerlinsley/65ac1f0175d79d19762cf06650707830 to your computer and use it in GitHub Desktop.
Replacing Create React App with the Next.js CLI

Replacing Create React App with the Next.js CLI

How dare you make a jab at Create React App!?

Firstly, Create React App is good. But it's a very rigid CLI, primarily designed for projects that require very little to no configuration. This makes it great for beginners and simple projects but unfortunately, this means that it's pretty non-extensible. Despite the involvement from big names and a ton of great devs, it has left me wanting a much better developer experience with a lot more polish when it comes to hot reloading, babel configuration, webpack configuration, etc. It's definitely simple and good, but not amazing.

Now, compare that experience to Next.js which for starters has a much larger team behind it provided by a world-class company (Vercel) who are all financially dedicated to making it the best DX you could imagine to build any React application. Next.js is the 💣-diggity. It has amazing docs, great support, can grow with your requirements into SSR or static site generation, etc.

So why aren't more people using Next.js to build single-page-apps?

Next.js apps are normally tethered to its runtime framework. It's expected that you handle navigation with their next/router and next/link components and use their framework to build SSR-enabled apps out of the gate. Don't get me wrong, this is amazing, and if I'm building a website (not an app that probably sits behind a login), then I'll definitely go the normal route (pun intended) and stick with the Next.js runtime framework.

But if you're building a true single page app experience, you may not want to fudge with the Next.js runtime at all and just build as you would with CRA, but still get the amazing CLI and build experience that Next offers.

If that's you... then FINALLY I can tell yo how simple it is to achieve this:

How?

  • Remove react-scripts and any related scripts from your build
  • Go through the Getting Started - Manual Setup guide for Next.js
  • Add the .next directory to your .gitignore file
  • Rewrite all routes to be handled by pages/index.js in next.config.js.
module.exports = {
  target: 'serverless',
  async rewrites() {
    return [
      // Do not rewrite API routes
      {
        source: '/api/:any*',
        destination: '/api/:any*',
      },
      // Rewrite everything else to use `pages/index`
      {
        source: '/:any*',
        destination: '/',
      },
    ]
  },
}
  • Export your default App component in pages/index.js
export default function App() {
  return <div>Hello Next!</div>
}
  • Add React Router
    • npm install react-router-dom history
import React from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'

export default function App() {
  if (typeof document === 'undefined') {
    return null
  }

  return (
    <BrowserRouter>
      <Routes>
        <Route
          path="/"
          element={
            <>
              <h1>Welcome!</h1>
            </>
          }
        />
      </Routes>
    </BrowserRouter>
  )
}
  • Suppress Hydration Warnings

Rendering null on the server and not on the client will produce a hydration mismatch warning. Since, in this case, that's expected, we can silence it with a quick wrapper component that will supress the warning:

function SafeHydrate({ children }) {
  return (
    <div suppressHydrationWarning> // Must be a div, can't be a fragment 😑🤦‍♂️
      {typeof document === 'undefined' ? null : children}
    </div>
  )
}

export default function App() {
  return (
    <SafeHydrate>
      <BrowserRouter>
        <Routes>
          <Route
            path="/"
            element={
              <>
                <h1>Welcome!</h1>
              </>
            }
          />
        </Routes>
      </BrowserRouter>
    </SafeHydrate>
  )
}

And on and on...

Follow Next.js docs, examples and guides to setup/migrate any other functionality or libraries.

@leerob
Copy link

leerob commented Oct 30, 2021

The suggestion Next.js give to fix it is "Reach out to the maintainers and have them release a compiled version

We don't believe this is productive, which is why we opened the RFC mentioned.

I think its pretty restrictive to define how third parties can use css in their modules before they can be used in any Next.js app

Please read the RFC – It's very nuanced. Ultimately, the ship has sailed it's something we want to support for the best ecosystem compat.

We still plan on implementing this! 🙏

@sean-esper
Copy link

sean-esper commented Oct 30, 2021 via email

@benoror
Copy link

benoror commented May 13, 2022

Looks like Next rewrites have changed from :any* to :slug*: https://nextjs.org/docs/api-reference/next.config.js/rewrites

@geekyme-fsmk
Copy link

geekyme-fsmk commented Jun 11, 2022

On react 18, the hydration errors would still appear. They only go away when downgraded to react 17. @tannerlinsley

Alternatively, could use this:

function ClientSideRendering({ children }: any) {
  const [csrReady, setCsrReady] = useState(false);
  useEffect(() => {
    setCsrReady(true);
  });

  return csrReady ? children : null;
}

export default function App() {
  return (
    <ClientSideRendering>
      <BrowserRouter>
        <div>
         .......
        </div>
      </BrowserRouter>
    </ClientSideRendering>
  );
}

@johnoscott
Copy link

johnoscott commented Jul 19, 2022

@geekyme-fsmk I like your solution, however there are redundant re-renders when calling useEffect without any dependencies. Instead, calling setCsrReady(true) once is enough with the 'one-shot' pattern of useEffect with an empty dependancy array.

To see this working, I have added console.log()s which can be viewed in BOTH the nextJS server logs and the browser console.

You can remove the RENDER_COUNT logic and console.log()s once you are convinced (like I did) that the logic works.

import { useEffect, useState } from "react";
import ReactLocationQueryApp from "./ReactLocationQueryApp";

let RENDER_COUNT = 0;

// renders child components ONLY if running client-side
function ClientSideRendering({ children }: any) {

    RENDER_COUNT++;

    const [csrReady, setCsrReady] = useState(false);

    // NOTE: this will NEVER fire on Server Side, but it will (of course) run in the Browser
    useEffect(() => {

        console.log(`ClientSideRendering: 🔵 useEffect: RENDER_COUNT=${ RENDER_COUNT }, csrReady=${ csrReady }`)

        setCsrReady(true); 

    },[]); // one-shot function. ie. will call ONLY once

    console.log(`ClientSideRendering: RENDER_COUNT=${ RENDER_COUNT }, csrReady=${ csrReady }` +
        `${ csrReady ? '🟢' : '❌' }`
    );

    return csrReady ? children : null;
}

// Intended to ONLY run client-side (as a SPA - Single Page Application) in React 18+ / NextJS 12+
// ala "SPA Mode"
export default function ClientSideApp() {
    return (
        <ClientSideRendering>
            <ReactLocationQueryApp/>
        </ClientSideRendering>
    )
}

@Mister-Zeng
Copy link

Anyone know a fix to this error?

  • error node_modules/next/dist/pages/_app.js (12:0) @ eval
  • error Error [TypeError]: interop_require_default. is not a function
    at eval (webpack-internal:///./node_modules/next/dist/pages/_app.js:12:55)
    at ./node_modules/next/dist/pages/_app.js (/home/jzeng/repos/cps-react/.next/server/pages/_document.js:62:1)
    at webpack_require (/home/jzeng/repos/cps-react/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./node_modules/next/dist/build/webpack/loaders/next-route-loader/index.js?page=%2F_document&preferredRegion=&absolutePagePath=private-next-pages%2F_document&absoluteAppPath=private-next-pages%2F_app&absoluteDocumentPath=private-next-pages%2F_document&middlewareConfigBase64=e30%3D!:21:80)
    at ./node_modules/next/dist/build/webpack/loaders/next-route-loader/index.js?page=%2F_document&preferredRegion=&absolutePagePath=private-next-pages%2F_document&absoluteAppPath=private-next-pages%2F_app&absoluteDocumentPath=private-next-pages%2F_document&middlewareConfigBase64=e30%3D! (/home/jzeng/repos/cps-react/.next/server/pages/_document.js:32:1)
    at webpack_require (/home/jzeng/repos/cps-react/.next/server/webpack-runtime.js:33:42)
    at webpack_exec (/home/jzeng/repos/cps-react/.next/server/pages/_document.js:202:39)
    at /home/jzeng/repos/cps-react/.next/server/pages/_document.js:203:28
    at Object. (/home/jzeng/repos/cps-react/.next/server/pages/_document.js:206:3)
    at Module._compile (node:internal/modules/cjs/loader:1256:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at requirePage (/home/jzeng/repos/cps-react/node_modules/next/dist/server/require.js:112:75)
    at /home/jzeng/repos/cps-react/node_modules/next/dist/server/load-components.js:76:65
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Promise.all (index 0)
    at async loadComponentsImpl (/home/jzeng/repos/cps-react/node_modules/next/dist/server/load-components.js:75:33)
    at async DevServer.findPageComponentsImpl (/home/jzeng/repos/cps-react/node_modules/next/dist/server/next-server.js:772:36) {
    digest: undefined
    }
    null

@cduff
Copy link

cduff commented Oct 19, 2023

I recently migrated a large CRA SPA to Next.js. I suggest reviewing the following official Next.js documentation: https://nextjs.org/docs/app/building-your-application/upgrading/from-vite. It's for Vite>Next but mostly applies to CRA>Next also.

If anyone is using Next.js app router for an SPA and using some other client-side router like react-router-dom then the following issue & workaround is probably currently relevant to you: vercel/next.js#56636.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment