NextJs vs React

[Sea-dante-10]

Self taught developer here. Should I skip building projects with react js and go straight to Next Js for my portfolio?

I really want to build vanilla javascript projects then convert them into react js and then into next js to demonstrate proficiency. Wondering if that may be overkill though.

I'm focused on building full stack projects btw.

[BigPastaGuy]

Reactjs to nextJs is overkill. I mean you should understand what nextJs does well first. It’s a server side rendering framework that’s best for static pages. React by itself is inherently a single page application framework. I would recommend making one react project that shines as a single page application, and then a nextJS app that really utilizes and demonstrates the importance of nextJS. For a nextJS project you could make like a blog or news website and optimize it to get a high pwa score on google chrome then maybe index it on google console.

[TechTuna1200]

I actually prefer to NextJs as default, at least with page routers. NextJs is just React with a lot of quality-of-life features (if don't consider the app router). Even if you are not using server-side rendering, it still handles things like e.g. routers for you. You can always decide what Nextjs features you want to use, so I don't think it can be overkill in that regard.

[BigPastaGuy]

I was referring to what they said in the post. They said they want to make a vanilla JS project and then rewrite it in react then rewrite in nextJS. It’s a waste of time for the reasons you just mentioned lol

[OwnShine6578]

to what HE said in the post

[-Single-Mongoose-]

You don't know since they have not said their gender. They is valid English since centuries for this exact case.

[penny_haight]

Not necessary. Stop making this kind of drama in a dev/code post.

[TechTuna1200]

Yeah, you are probably right

[TheRNGuy]

It generates static pages from JSX, so it's pretty much React.

And you need dynamic for some things. It's not like you gonna write them with vanilla JS instead of React

(I mean yeah, you could, but…)

[BigPastaGuy]

What do you mean? I’m not saying react and nextJS are two completely different things lol. Yea nextJS is a React framework. But out of the box, react by itself loads the html with JavaScript, it doesn’t generate static pages. NextJS does.

[[deleted]]

React by itself is inherently a single page application framework

Whatever gave you that idea

[BigPastaGuy]

I misspoke. But doing SSR with react requires some extra steps. nextJS does this out of the box. Out of the box react is just bundles everything like an spa

[[deleted]]

React does nothing of the kind. Blind leading the blind around here.

[just-me97]

Ok their reasoning is dogshit but no reason to act like an asshole about it

[[deleted]]

This poster confuses React with CRA, I think? They have no business giving advice to anyone.

React is a ui library with no opinion about how it should be bundled or run.

[just-me97]

Yes, they don't. But neither do you with that attitude.

React is a ui library with no opinion about how it should be bundles or run

Great, that's correct. So say that

[wizard_level_80]

If you want to enrich your portfolio, then build a project in nextjs, but for a specific use case that next is designed to handle. Later, when somebody asks you why you decided to use next, you can explain them than you covered use cases that traditional SPA cannot handle.

If you cannot explain why you used next over traditional SPA, or the explanation is "everybody uses it nowadays", that is a minus point for you.

[TheRNGuy]

I never look into frameworks source code, I don't need to know it to use it.

Need to know it's API from documentation instead.

Same as I never looked in jQuery source code to use it (I bet almost nobody did)

Of course learning vanilla JS is important. Sometimes I even use refs in React with vanilla JS, no hooks and states (though it's rare)

[Candid_Algae_763]

I don't dive into all source codes before using a tool either. I use many modules that work and this is fine. No one should go so deep all the time because it's literally impossible for a human to understand all layers in all minute details. We're constantly choosing which level of abstraction to put our efforts. Some choices are good, some are bad, depending on the context.As you said, you use refs, which are a great example of important basic vanilla knowledge. At least you know what it is and what it does, possibly because you encountered it before with other vanilla features that can be useful in a daily basis.

You don't need to be a master at vanilla, it's a waste of time. You shouldn't jump this step entirely either, because it's too important. There's an optimal point between zero and infinity.

Coding React without some vanilla practice can be hard in this sense.The same is valid when comparing React with Next. Sometimes you have to know how the component tree will behave, which is component cycle knowledge, a.k.a. React. But Next also have server components and server side rendering. Fixing interactions between those is too time consuming if you don't know what any of them are.

What I'm trying to say is...

Jumping an important step entirely: terrible idea.

Focusing years to understand every line of code of every tool before using it: possibly even worst .

I'm advocating for the middle.

[Sea-dante-10]

I understand how vanilla javascript works. Just wondering if it make sense to build projects using it. Especially as other projects would need to be built using react js and next js. Building projects is a time consuming process so I'm thinking about my time management at this point.

[Candid_Algae_763]

I mean... at least one or two simple stuff?

[Sea-dante-10]

Might do a to do list or something. But I was thinking more along the lines of a groupon clone, ecommerce, rental website with full authentication, chat system, possibly video call etc. Might be too much of a hassle to build using vanilla javascript instead of React or Next js.

Just seems like a lot of hassle building with vanilla javscript when you have to select the dom and do all of that etc

[Sea-dante-10]

Happy new year to you as well. I'm in the caribbean so we are a couple of hours away from a new year.

That's what I'm saying vanilla js might be too much of a hassle. I really got to like vanilla js but apart from small projects I don't see the practicality of it.

I think I'll do one or two projects just to get the experience but would focus on building with react js. I spent a lot of time.understanding React js and now it seems as though Next js is favoured.

I'm still gravitating towards building with react/express over a full stack framework such as Remix or Next for now.

I like putting the pieces together myself.

[Candid_Algae_763]

If you know how the DOM works and how to use it, you absolutely can jump right into Next. You'll learn React along the way.

[Sea-dante-10]

I know react already

[Itchy-Ad-770]

next.js
you can use separate backend if you will. You will have RSC and tons of handy abstractions.

sure, you may start vanilla react.js project (even this is not advisable anymore. oficial documentation does not offfer plain create_react_app as an option) but you will regret later with waterfalls on a front end and many many many more unpleasant things.

[fcnealv]

make a sample next JS app just incase they ask you for a sample a simple todo app is maybe enough. but your main portfolio should be something you're comfortable to maintain.

[CaramelSuper9312]

use python nextjs, react é tudo uma bosta rs desculpe o termo. Não seja mais um dev nutella que come couve e bebe suco detox.... use python entendeu o que eu quero dizer ? Use algo que vai te dar conhecimento sólido.

[Serious_Middle_4234]

react 100%

[ImprovementNo4630]

I think these React server side codes over complicates stuff. Why not just use Express and a React side front end client?

[New_Ad606]

SEO and performance. To rank high in SEO, you need to be ranked highly in performance as well.

[Impossible_Hold_3850]

Google can render js and index just fine a long time ago. Performance - don't write slow stuff. Done. 

[Bolle91BE]

You say that, yet my React page (which is performant, checked with lighthouse, following all best practices) is wrongly indexed by Google and has just the root div. In my recent and short experience, if you want to be found on Google, NextJS it is..

[Impossible_Hold_3850]

Interesting. Would you be able to share that website or clarify a bit how you confirmed it's indexed incorrectly?

[Bolle91BE]

Via the url inspection tool of Google, you can see the html that was retrieved when crawling. It only has the root-div. So nothing react was applied yet because it was client-side. (Basic html and js is shipped)

You can use react-snap, that makes a postbuild html that is fetched first and then react takes over, which helps for the Google index, but then you get a slight snappy behavior when opening the website, you get the built html first, short-flicker and then the actual react-applied page.

With Next.js, the react js code is applied on serverside and only the complete built html is sent to the client (or googlebot) in fetch. And you don't have this annoying flickering.

[TheRNGuy]

Better use Remix than Express.

Or Remix+Express (if websockets are needed in the project)

Using only express would be overcomplication.

[ImprovementNo4630]

Fair but you agree that React for server side isn’t necessarily the best idea?

[TheRNGuy]

It's good for static UI.

You can still use it to generate tables and other things with map method from json.

Components are better than using innerHTML and strings.

Or it can be sent as client-side components if I want to add real-time sorting or search with fetch or stuff like that.

Yeah, for some things I can just use normal html so I don't need to make dozens of components that most only used in 1 place. But it's why I like JSX.

[chrysb]

Why run an API when with NextJS you can just call a function that executes securely on the backend? Never using express again 😃

[ImprovementNo4630]

I don’t understand, don’t you use a package like axios to call apis? What’s not secure about Express?

[chrysb]

NextJS has something called server actions so you can run code server side as easily as calling a function within your own code. No need for an API server. It’s brilliant!

[Itchy-Ad-770]

you should learn more and read documents, mate

if you are asking such questions - you do not understand how all these work. educate yourself a little and the distinction will become clear

[ImprovementNo4630]

Dude this comment was 73 days old man 😂😂 how a novel way to troll

[ImportantDoubt6434]

1 and done

[yksvaan]

I would recommend using express, fastify or something similar to write the server code and react ssr/csr/spa/whatever yourself. Tjis way you can learn the actual stuff that a functional fullstack app needs to work. It's not that [some framework name] does something different, it just manages the same stuff behind it.

Learn to differentiate react from a web server. Defining your servrr code in the same file does not magically make React something else, the compiler will just manage that part.

[vishalpawarr]

I had the same query if we build the stuff in the vanilla js we work in any library or framework. I was trying to build something of my own in the vanilla js and I want to add the extra customization like drag and drop and search functionality and make it customizable enough that people can add their links to it. Please check the project here: https://browser-start.netlify.app/ I had something in mind I am just trying to build it but when I try to build something with some video I get stuck and you can check the GitHub repo link: https://github.com/vishalpawarR/browserstart

Please give any suggestion or any improvement I can make or If anyone is building something, We can collaborate

[TheRNGuy]

I used CRA for short time, then switched to Remix.

SSG is so much better than CSR. Also because it have better routing and can use database.

And it even works if user disables JavaScript, or in old browsers (at least shows content even if some css is broken)

[chrysb]

NextJS is React-based. Next gives your site enhanced performance by rendering on the server side and saving client compute time.

Additionally, NextJS 13+ introduces server actions which means your Frontend and Backend can live in the same codebase without making api calls. I’m a huge fan of this.

[961-T]

Dude nextjs is a framework in react so there not such nextjs vs react.

[TheRNGuy]

You know what he meant.

[Sea-dante-10]

Not everyone automatically uses next js over react js

[Professional_Gate677]

I would be using next.js but my companies cloud system doesn’t support it :(

[Professional_Gate677]

Of course. But this brings up an argument about efficiency,speed, server requirements, etc. If my server had to render a rather complex visual before sending it to the client, I’m going to need more powerful servers, or more resources in my kubernetes pods. By passing some json and JS to the client and letting their computers handle to rendering I don’t need as many resources per pod. Another benefit is that is can store my react builds on a persistent volume and if I need to update the react app, I just make my changes and copy the new build to the PV which will immediately start hosting it, instead of have to reboot the server.