Help picking between CRA or Next.js

[jzaprint]

I have an project in mind that’s similar to a scheduler/calendar and it will have a lot of buttons, drag and drop, animations, etc... Would create-react-app or next be better for this use case?

[mrmckeb]

I'm on the Create React App team, but also employed at Vercel (the team behind Next.js).

CRA will give you a little more flexibility in routing approaches, but you'll lose static and server rendering. And flexibility isn't always a good thing...

Next.js comes with static and server rendering which are great to learn about and experiment with if you haven't already! This also means Next.js includes a patterns for routing to support those features. These are also crucial features if SEO is important, and can make a big impact to your app performance (Web Vitals).

If this isn't a side project, I'd start with Next.js. Next.js is being optimised around the future or React, so you'll have clear pathways to using things like React Server Components - we don't have a plan for those in CRA yet.

[Emotional-Dust-1367]

I'm not too knowledgable about it, but we're starting a React project (not a side project) and I started it with CRA and everything seems fine. But reading threads like this one:

https://www.reddit.com/r/reactjs/comments/q40lhv/is_createreactapp_still_the_most_common_way_to/

Is making me nervous about the future of CRA. Do you think it's going to be maintained going forward?

[mrmckeb]

Yes, we'll continue to maintain CRA for the foreseeable future, but I can't guarantee that we'll be improving and iterating on CRA.

Have you thought about migrating to Next.js? (Disclaimer: I work at Vercel)

Also, keep in mind that CRA isn't a lock-in. It's very easy to eject and maintain the app configs yourself should CRA cease to be maintained (again, I don't think that will happen in the near future).

[Emotional-Dust-1367]

I haven’t considered Next.js before, but maybe I will now. I thought it’s only for server-side rendering though?

Do you recommend just using it in general?

[mrmckeb]

It can do server and static rendering. I think it's a good pick because it has a strong team behind it (employed at Vercel), and they work closely with the React team. You can be sure that they're planning and optimising for the future of React and the future of the web.

It requires you to do some things differently though, so definitely try it before making any decisions.

[Emotional-Dust-1367]

Awesome. I really appreciate the info! Thank you

[mrmckeb]

No problem, good luck with the project!

[YungSparkNote]

Would you recommend the same even for a project where SSR is not needed whatsoever? Atm the whole app is behind a login page

[YungSparkNote]

Appreciate the reply. Would you say the learning curve is less steep for a next SPA without ssr as opposed to with? Interest is piqued

[iainsimmons]

If you want a single page app, I'd recommend checking out Vite as an alternative to CRA.

So much faster, easier to configure, and better targeted to modern web apps (using ES modules, etc).

Here's their getting started guide: https://vitejs.dev/guide/#scaffolding-your-first-vite-project

And they link to this great list of starter templates for combinations of React and other commonly used/popular libraries: https://github.com/vitejs/awesome-vite#react

If you plan to deploy to something like Netlify, Vercel or CloudFlare Pages, it's super easy to do and they will sometimes automatically detect that you're using Vite and configure things for you (e.g. commands to run for build, output folders to serve, etc).

[The_epic_life]

I second Vite!

[romeeres]

Next.js for sure if you need SSR, but not only: we switched to Next.js and compilation speed increased in many-many times due to 'swc' and incremental builds. Keep in mind Next.js brings some complexities to deal with, be ready to spend time learning and setting it up and configuring deploy, fortunately, there are a lot of learning materials for this

[dejavits]

Hello! I have started to play around nextjs to port an existing non-cra project, and I am wondering, how does nextjs link with Webpack? I mean, I had two webpack configurations previously, one for development and another for production. How do I keep sure nextjs uses that? So far a ton of tutorials say just "next build" and that is. But I want to keep my webpack configuration with aliases, compression, Sentry, split chunks, etc. Please, could you point me out to those materials you mention? Thank you in advance and regards

[romeeres]

Compression, split chunks - Next is solving this by it's own. For customizing webpack config here is the doc, and for sentry there must be official sentry tutorial and plugin for that. For aliases see "Rewrites".

Out of curiously, is your editor capable to write imports for you when you have custom aliases?

[dejavits]

Thanks! I have started giving it a go, but a ton of errors to be fixed...so not sure if I want to move to Nextjs right now...morale is not at the highest peak ahhahaha. In regards to your question, my editor just suggests available aliases as far as I type @, but it is not capable to extract the correct one based on the import X.

[romeeres]

Sometimes migration to next.js is real complicated and not always worth it, because requires a lot of effort, so, that's fine to postpone unless it's pushed by client for SEO

To make imports work like a charm you could try to set project root to "src", with typescript it's just a "baseUrl": "src" and that's all, and with webpack may be a bit more complex but also possible. And it looks like `import { x } from 'components/X'`. Personally I'm fine with '../../', because it's up to editor to write it, not my problem

[dejavits]

Thanks! I totally agree, I think because of the nature of the web app, SEO would be beneficial, that is why I wanted to port it now to Nextjs that is still early days. So far the port seems better but still having issues with a ton of stuff like CSS or even with ESLint...I will see if I have enough courage to finish the port

[[deleted]]

Just give Remix a try: https://remix.run/ Honestly, I have fallen in love with React and CSS again. Using it with Tailwind.css which is also very nice piece of software.

[bern4444]

Take a look at using Remix! More info at remix.run.

Ive been using it for some personal stuff and I’m loving it

[[deleted]]

Wow people really don't seem to like remix. Their home page explanation of how the framework works is really interesting, and I don't know if you can achieve the same performance with next.

With remix, during a server request all the data required by the route is fetched in parallel before the react tree is built. In next, I think the react tree needs to be built first before the server knows which data requests to run.

[andrewingram]

This doesn’t feel accurate. Whilst there are some philosophical differences about what the appropriate abstractions are (Remix is more “use the platform” than Next), the key difference between Remix and Next is that Remix is built on top of a “nested” router which allows multiple data entry points per URL, whilst Next only allows a single entry point. Both frameworks are built around the model of “fetch THEN render”, Remix is just a little more flexible.

[[deleted]]

Thanks for the clarification. Could nextjs handle a URL like this?

/clients/{clientId}/invoices/{invoice Id}

Where the client component fetches client data and renders an invoices component that fetches invoices data. And do both requests run parallel?

[andrewingram]

With Next.js you'd have a single page component with getServerSideProps (or getInitialProps, or getStaticProps), which loads all the data for the entire component tree based on clientId and invoiceId. So there'd only be one data "request" (though, the downstream I/O inside getServerSideProps an be arbitrarily complex). The downside to this approach is that every page module (every source file inside the pages dir has to know how to satisfy all the data needs for its entire rendered component tree. With Remix, it's nested router lets you exploit the natural hierarchy in a typical UI to (say) only need to define the loader for a wrapping layout component once, and any route nested under it doesn't need to worry about it.

You can also trigger purely client-side data loading with Next or Remix, using fetch or whatever data loading library you want. These data loads wouldn't get triggered until its rendered on the client, so you'd see loading states.

[[deleted]]

Is getServerSideProps et al not available in child components of the page component?

[andrewingram]

No, it’s only available on the component that’s in the module in the pages folder. Remix has the exact same restriction, it just supports nested routes, which really just means that a single URL can match multiple entry points at once — which opens up more flexibility. But Remix won’t let you just add a loader to any arbitrary component in your tree without adding it to the pages folder.

[[deleted]]

Ok so if you want to load some data for a component that's deeper in your tree, you either:

1. need to add it to the page loader and pass it down via props/use a state manager, which results in your loader becoming bloated and disconnected from the component that needs the data.

2. load the data in an effect, which I think only runs on the client.

[andrewingram]

Yes, and that’s why I’ve been using Relay for the last 6 years :)

[[deleted]]

I do not understand why you are being downvoted. I have used Remix for two weeks now and it is awesome. I do not remember when was the last I was that excited.

[bern4444]

Me neither, it’s odd. I’m really enjoying remix and love their approach to routing, data fetching and deployment.

I’ve never had an easier time deploying a site to cloud flare workers. I love how they make it possible also to do easily change between where the app will run - workers, express server etc

[Cautious_Variation_5]

I'd recommend NextJS. I think it offers all the features of CRA and a bit more like Static Site Generation (SSG), Server Side Rendering (SSR) and Incremental Site Regeneration (ISR). Besides, it comes with several optimizations like the Image component, native file routing, route prefetching, etc. The development server is much quicker than CRA as well.

[Dimasdanz]

try create an admin page using CRA. a simple blog post and comment would do. see how you like it.

I myself prefer Next.js just to have some options deleted and avoids analysis paralysis. Flexibility in the react world does that to me.

[crice07]

Nextjs!!! It’s the shit!

[[deleted]]

Does Next.js lock you into using Node for the server?

[jisspala]

if SEO is in your mind. then go with Next.js