One of the most common questions asked
Hey friend,
Happy New Year!
Today, we will keep the topic short and sweet, but this is one of the most asked questions ever.
🍿 Our Weekly Snack: Next.js vs React
Should I pick Next.js or Create React app while building apps? What should I learn first?
Unquestionably, Next JS has soared in popularity, but why exactly is this the case? If you're curious, you're certainly not alone.
The strong developer community support is one of the primary reasons for its popularity.
This community takes care of a lot of the complexity. It saves you from the hassle of dealing with a ton of packages and getting into the nitty-gritty of various domains like performance SEO. Trust me, navigating through all that isn't a walk in the park with create react app.
IMO, the strengths of Next.js are,
SEO support: Have APIs like MetaData for SEO, ability to update Open Graph tags responsible for dynamically
Built-in file routing system: With CRA, you need to set up a router and use a library like React router, but with Next.js, it uses a file-based routing system.
Performance: You get different ways to cache data, which boosts performance.
I'm sure there are many articles on this topic. But there are 2 things I would like to cover in this newsletter.
What is the difference between a library and a framework?
Next.js uses React internally, so you can't fully learn Next.js without React. You need to understand the fundamentals of React.
Next.js is a framework, and React is a library. This means that React provides the building blocks, and Next.js provides all the pages and the glue for the blocks to hold together.
Without Next.js i.e. with create react app, you would need to build a good understanding of Webpack and perform a lot of caching on your own, along with server-side rendering, which can be a lot to handle for a beginner React developer.
With Next.js, all of the above is easier!
So, What should you learn first? React or Next.js?
You should still learn React first and understand how to build components, what makes a good component, what prop drilling is, react context, and managing global state before you dive into Next.js.
Once you have a good grasp on those, move on to using create-next-app, which is a good starter for next.js apps. You will then appreciate what a framework provides.
🤫 Latest Frontend News
Next.js is exploring moving to Lightning CSS ⚡️ ↗️. You can try it out on `next@latest` when using `next dev --turbo`.
Delba shares some thoughts on why they chose 'use client' directive as a differentiator between Client and Server components. There are some good arguments in the thread 🧵↗️.
Shadcn/ui ↗️ has gained a lot of popularity as a UI library. It provides Beautifully designed components that you can copy and paste into your apps. Last month, it introduced a few cool components like a carousel with motion, swipe gestures, keyboard support and more.
Weekly Youtube Videos 💖
Check it out and subscribe to my channel for more Frontend, Leadership and Career Development content. 💪
The Frontend Developers Toolbox 🧰
- Skewed infinite scroll built entirely with Tailwind CSS ↗️
- Want to become a public speaker in 2024? Check out this Chrome extension called Scream for Papers ↗️ that helps you fill out multiple Call for Papers.
I hope you have a great day!
P.S.