AMA Deep Dive: The Next.js Framework

A quick note from the editor:

I recently got to join and moderate a live AMA call that Ankita Kulkarni did with our students in the Zero To Mastery virtual campus.

Students and I asked questions about Next.js, how it works, how best to learn it, some technical questions, why Next.js is a cheat code for SEO, why the leaders in CRO testing are using Next.js and much more.

You can check out some of Ankita’s answers to the questions from her AMA call below, but first, let me introduce her.

Who is Ankita Kulkarni, and why should you listen to her?

Ankita Kulkarni is a Senior Engineering Manager with over 10 years of experience in Software Development. Her career began by helping small businesses develop apps and since then she has worked at top companies in North America.

Currently, she is leading two teams and helping define the future of Fintech in Canada as a Senior Engineering Manager at WealthSimple.

Before that, she spent time as a Solutions Architect at Rangle.io and as a Lead Developer at IBM Garage where she architected and scaled many web and mobile applications for clients using React, GraphQL and React Native.

Ankita is also the teacher of the Complete Next.js Developer course here at Zero To Mastery, which teaches you how to build large-scale apps like Netflix from scratch and get hired as a Next.js Developer in 2022.

You actually build the large-scale app yourself inside the course!

As you can see, Ankita clearly knows what she's talking about, so with that out of the way, let’s dive into her AMA answers 😀.

AMA with Ankita Kulkarni on Next.js 🙋

Want to watch the video, ask questions in our Discord or join in live on our next expert AMA?

These are all exclusive access benefits for members of Zero To Mastery. You can find out more details about every course and the other awesome perks of being a ZTM member here.

What is Next.js and what is it used for?

Next.js is essentially a React framework that’s built on top of React.

Now because it’s a framework this provides us with a set of capabilities that can help us do our job faster and in a much better way. In fact, Next.js is known among Developers as ‘the React framework for production’.

Why?

Well when you build React applications, you often have to set up a lot of things from scratch.

You need to figure out:

• What router to use
• Which CSS package to use
• Which design system etc

Basically, you need to figure out a lot of different things, but Next.js provides all of this straight out of the box, so you’re pretty much good to go immediately.

Should I use Next.js or should I use React?

This ties into the answer above, but let’s break them down.

Because Next.js is built on top of React, you get a lot out of the box, such as a file-based routing system that you don’t need to integrate, CSS modules that are already built-in so you can start using them immediately, and at the same time, you also get Search Engine Optimization (SEO) and performance benefits.

Whereas with React on its own, you need to set up a lot of this same stuff from scratch and build it all in webpack, which can get really complex. In fact, I’ve been in several React projects where we would have to dedicate the first 2 weeks to simply build everything that we needed before we could actually run and start production

But with Next.js, you’re pretty much good to go and can skip all that, saving time and money.

Is Next.js better than React? Do you think Next.js may replace React?

Interesting question and it really does come down to your needs, but I will say this:

Even the creators of React are using Next.js, so that speaks volumes. Heck, even their documentation platform is built with Next.js, so this is a good sign that the React creators believe in it.

What is the best way to learn Next.js?

Because Next.js is built on and uses React, I would say that the best method is to learn React first, before Next.js.

This will help you to learn the concepts of components and how they work, what atoms and molecules are in React, how to combine components etc. All of this will give you a great foundation to then learn Next.js.

I recommend getting some experience using the ‘Create React App’ which is essentially a bootstrapped version of React and just building some basic apps to get started.

Once you have a little experience and understanding of React, you can then go ahead and jump across to Next.js and enjoy those out-of-the-box benefits.

Don’t forget to also compare the two, because as a Developer, one of the best things you can do is compare languages and frameworks to see what works best for your needs.

Why is Next.js good for SEO? (Search Engine Optimization)

Next.js has partnered with Google so any production information or specific features that come from Lighthouse(Google's user experience improvement tool), such as Largest Contentful Paint, page load speed, time to first click, and other performance optimization features are baked into Next.js and how it’s built.

This is huge for SEO, as this means that platforms or apps that are built with Next.js are designed to meet and surpass user experience factors that Google has been implementing and will continue to implement. (UX ranking signals are currently their main focus for the future).

It’s very rare for Google to share information that can help your performance so this is a huge benefit.

Without going into too many details, React helps you achieve this with clean, specific code that is crawled easier by SEO bots so that it can understand your page context and content and then recommend you better and more often in the search results (SERPS).

It also has built-in pre-loading and lazy loading to help improve the user experience and page load speed, as well as other features to help stop element flickering.

This means no random images moving around when you try to click on them!

Also, if a user hovers over a link on a page then that new URL will preemptively start to load that page in the background so if the user clicks to open it, they get a faster experience.

Likewise, images and assets further down the page only load as the user gets closer to them, meaning you don’t need to load the entire page all at once, but in short sections that the user is interacting with.

Next.js can even help with super-fast caching for static sites that don’t use a lot of dynamic content so that the cached page loads incredibly quickly.

As you can see, Next.js has a lot of benefits for SEO focused sites.

What kind of companies are using Next.js? Do you have any examples?

There are a lot of really popular sites using Next.js such as Netflix, Hulu, Twitch, GitHub, and more.

You can check out Next.js’s showcase of sites here which is constantly updated.

It’s awesome to see such huge businesses using this same framework when planning your own project build or upgrade, as it shows that Next.js has that scalability for large traffic and user bases and gives you the confidence to create with it.

As a side note, a lot of the companies mentioned in the showcase are also major leaders and champions in the Conversion Rate Optimization space (CRO) in their particular industries.

This is especially interesting because the sites that prioritize CRO are really focused on making sure that the user experience is the best that it can be, so that they can lower bounce and churn and increase sales. And so if they’re using Next.js, then you know they’ve done the research and the testing to make sure it’s the best option for them, it means it can be a great option for you too.

Is Next.js difficult or easy to learn?

This is similar to my answer above on the best way to learn Next.js, but I feel that the best way to become a good developer with Next.js or any language or framework, is to not just go with what’s given to you. You need to test for yourself.

This way, you can try and also understand how that language or framework is also built and get an understanding of what some of the challenges are and how to get past them, and will also help you appreciate when a lot of those issues are bypassed.

Again though, start to learn React first and build some basic apps and then move on to Next.js once you have a foundation of React.

Once you’ve done that, I recommend a few ways to help you learn faster:

#1. Look at examples

Go over to the Next.js documentation and look at how the apps are built there, and look at building and applying what you’re learning as you go. This is the fastest and easiest way to learn. This way you’ll start to understand all those features that you’re learning about, and start to understand how you can use them with your own project.

#2. Follow a structure

That being said, the documentation can be a little overwhelming at times, so if you want a set learning structure to help you fast track and apply what you learn, then you can also follow Next.js and React courses.

#3. See how others are using it

Another great way to fast-track your learning is to look at Next.js GitHub issue threads, and see if you can understand the issues and the solutions that people implement in their file updates.

It’s not a set way to learn but it can help you start to piece together different concepts and see how people resolve issues and build from it.

Again though, a course or training program will help you sidestep a lot of major mistakes while also helping you to focus on what is important to learn to actually use Next.js and maybe get or keep your job, vs trying to learn everything that you can and never moving forward or getting confused when you miss things.

Want to learn more about Next.js?🔥

Feel free to check out Ankita’s course on Next.js, as well as our dedicated Discord channel for React and its various frameworks.

You can ask questions there and get answers and help from Ankita, as well as from other experienced and beginner Developers.