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.

If you prefer reading it on the web for note-taking reasons, then you can click the link below; otherwise, keep reading.

๐Ÿฟ 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.

Having said that, using create-react-app โ†—๏ธ is one of the easiest ways to start learning to react.

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.

I would first start with "create react app" and stick to the above concepts.

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 ๐Ÿ’–

Is Facebook's StyleX a TailwindCss Killer?

video previewโ€‹

5 Ways to Level Up as a Developer ๐Ÿš€

video previewโ€‹

โ€‹Check it out and subscribe to my channel for more Frontend, Leadership and Career Development content. ๐Ÿ’ช

The Frontend Developers Toolbox ๐Ÿงฐ

What did you think of today's newsletter? Click on the link below.

โ€‹๐Ÿ”ฅ ๐Ÿ˜ ๐Ÿ‘Žโ€‹

I hope you have a great day!

Thanks for reading! Reply any time.


When you're ready, here's how I can help you:

  1. ๐Ÿš€ Turn into a Successful Engineering Leader - Learn the essential skills to Become an Engineering Leader Course
  2. ๐Ÿ“™ Get an E-book on Taking control of your First 90 days as a Leader - An Ebook: The Engineering Leader's Playbook: The First 90 Days
  3. โ˜Ž๏ธ Book a 1:1 Coaching call with me

A Frontend Newsletter that you'll love! ๐Ÿ’–