Next.js Discord

Discord Forum

how do i convert my cra to nextjs?

Unanswered
Silver Fox posted this in #help-forum
Open in Discord
Silver FoxOP
i am switching from cra to nextjs

12 Replies

Silver FoxOP
import React from 'react';
import { createRoot } from 'react-dom/client';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';

import Index from './pages/guilds';
import Home from './pages/home';

const router = createBrowserRouter([
  { path: '/', element: <Home /> },
  { path: '/guilds', element: <Index /> },
]);

createRoot(document.getElementById('root')).render(
  <div className='antialiased'>
    <RouterProvider router={router} />
  </div>
);
⨯ ./app/page.jsx
Error: × You're importing a component that imports react-dom/client. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
Tibbs
Have you created a new project using create-next-app@latest?
Tibbs
First of all next js creates the root document internally from its own custom server setup, and you also do not need manual routing setup as next js uses file based routing, e.g. src/app/page.jsx is the home page, then you'd have something like src/app/guild/page.jsx for a guild index page. If you don't have a src folder then it will just be app/page.jsx or app/guild/page.jsx

To fix it start by changing your /app/page.jsx to this:

import Link from "next/link";

export default function Home() {
  return (
    <>
      <h1>Hello world</h1>
      <Link href={"/guild"}>Guild Page</Link>
    </>
  );
}


Then, create a folder called inside the app folder called guild, with a file page.jsx and add this:

import Link from "next/link";

export default function Home() {
  return (
    <>
      <h1>Hello guild page</h1>
      <Link href={"/"}>Home Page</Link>
    </>
  );
}
Silver FoxOP
i got this error
Console Error

Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used

- A server/client branch if (typeof window !== 'undefined').
- Variable input such as Date.now() or Math.random() which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

See more info here: https://nextjs.org/docs/messages/react-hydration-error


- cz-shortcut-listen="true"
Show ignored frames
and finished converting to nextjs
Silver FoxOP
@Tibbs no idea wtf happened to my bot dashboard's ui after converting to nextjs
@Tibbs Send a screenshot of your project structure please not sure exactly what you're working with
Silver FoxOP
aero (bot)
api
dashboard (frontend)