Next isn't React.
Yes, this is correct. Next.js and React are different things. But from the grand scheme of things, these two are more similar than they are different. Next.js is a React meta-framework which means it's built on top of React. It's not a replacement for React. It's a framework that makes it easier to build React applications. So instead of saying "Next isn't React", we should say "Next isn't just React". It is all that is React plus additional features and optimizations.
And you won't get better performance if you use it the way you use React.
React was used to build client-side rendered (CSR) applications or single-page applications (SPA). I say "was" because the React team no longer recommends this anymore and they recommend using a framework instead (Next.js in this case). The reason for this is that CSR applications are slow to load and not very SEO friendly. Next.js improved this by introducing server-side rendering (SSR), static site generation (SSG) and incremental static regeneration (ISR) and these are the main reasons for the better performance. But these approaches still sent all the JavaScript used to generate the page to the client for hydration and SSR would also still take a long time. The solution to this did not come from Next.js this time but from React itself. React 18 introduced a new feature called "Server Components" which allows us to render React components on the server without sending any JavaScript to the client. The problem is that Server Components are a full-stack architecture and requires a bundler to implement. This is where Next.js comes in to provide the App Router bundler. So the combination of Next.js App Router and React 18 will give us the best performance.
Those useState, useEffect, and other hooks we're used to are client stuff. We must get rid of that way of thinking completely to build a Next.js application.
We should not get rid of thinking about client-side React since this is the only way we can add interactivity to React applications. But we should think about it differently. Instead of thinking about it as the only way to build React applications, we should think about it as a way to add interactivity to React applications.
src: reactwg/server-components#4
RSC adds a new layer before all the client-side React code that we know get's to run. And since Server components are the default in Next.js App Router, it means we shall be writing much fewer client components, but we will still be writing them and useState, useEffect, and other hooks we're used to will continue working the same and will still be relevant in these client components.
Agreed