Next.js Guide – How to learn and master this React framework

Next.js is a very powerful framework powered by React and created by awesome engineers at Vercel. In this guide, we will discuss how you should approach Next.js as a complete beginner and what all is required.

Introduction

Let us understand the “framework” first. Next.js is a framework. At its very core, Next.js is built on the top of React, rendered on server-side, which in turn is built on top of Node.js, and JavaScript. What makes Next.js interesting is the level of abstraction it provides you as a developer.

Next.js solves UX and DX

User eXperience (UX) and Developer eXperience (DX) are two big hurdles of building software. Next.js addresses both. It allows you to create very smooth websites, thanks to lightweight Server-Side-Generated (SSG) pages with HTML/JSON files, and at the same time allows you as a developer to not care about internals of server side rendering, which trust me, is not something you’d want to do as a startup/business focused on business logic.

How to approach Next.js?

One essential thing to realize is that Next.js is a “next” step on the ladder. According to me, it is definitely not where your journey should start. Your journey should include React, because Next.js is mostly React.

As a Next.js developer, your job will involve working with a lot of React-y things and components.

Also, to learn and appreciate React concepts, you should be comfortable with HTML/CSS/JavaScript to some extent. That will definitely help you pick up things quicker as you might be revising quite a few React concepts while learning Next.js too.

HTML/CSS

HTML/CSS is the gateway to frontend web development. Chances are you’ll always be learning about new things in HTML/CSS, even when you’re learning more advanced things, just because there’s so much to learn. But you can learn 70% of HTML/CSS concepts very quickly, within a week or two. Here are some topics I will recommend for futureproofing your knowledge:

Box model in CSS
Layout systems (flexbox and grid) in CSS
Selectors and pseudo-selectors in CSS
DOM elements in HTML/CSS and pseudo-elements in CSS
Common tags and attributes in HTML and CSS properties

Once again, you can use any source to learn these things, or you can use a few codedamn courses:

Video Course – HTML5/CSS3 Basics

Practice Classroom – HTML5 Exercises

Practice Classroom – CSS3 Exercises

Practice Classroom – Flexbox Layout Exercises

Practice Classroom – HTML/CSS Projects

The next step is to learn JavaScript.

JavaScript

You wouldn’t need an in-depth understanding of the JavaScript world to work with React. Neither would I recommend to do so. However, it would help if you were comfortable with simple to moderate programs. Here’s a checklist of things you should be comfortable within JavaScript:

Basic syntax and language use
Document Object Model (DOM)
ES6+ concepts
You should be aware of the weird side of JavaScript (type casting, NaN, etc.)
General programming concepts (variables, functions, loops, recursion, etc.)

Once again, you can use any source to learn these things, or you can use a few codedamn courses:

Video Course – JavaScript Basics

Video Course – Build 10 Projects with JavaScript

Practice Classroom – Basic JavaScript Challenges

Practice Classroom – Algorithms and Data Structure Projects

Moving on to React now.

React

This is an important step, and to be fair, you can also start working with Next.js when you’re a bit into React. But still, I will recommend learning React separately from Next.js.

Topics in React which I would focus a lot on:

Functional components
State Management with hooks – useState and useEffect (very very very x 1000 important)
JSX expressions and basics
Routing with react-router and data fetching with react-query
Working with a layout system like Material UI or Tailwind CSS (optional, but recommended if you want to be a good frontend developer too)
JavaScript/ES6+ basics from above

Everything is available on the internet yet again, but you can take codedamn with you and start with these free resources to learn React:

Video Course – React.js Fundamentals

Video Course – Build 6 Projects in React

Practice Classroom – React Quiz App

Practice Classroom – React Tours Project

Practice Classroom – React Birthday Reminder

Now that we have a little experience with React concepts as well as HTML/CSS/JS, we are ready to work on Next.js.

Next.js

Next.js is here! Although the framework is very much React itself, here are a few things you should absolutely learn about Next.js:

File-based routing (static/dynamic)

getServerSideProps and getStaticProps in Next.js (very important concept – understand precisely how they work and thank me later for making your life 100x easy)
Internal files (_app.js, _document.js, error files, etc.)
The Image component in Next.js 10

That’s about it. You can use the following codedamn resources to start learning Next.js:

Video Course – Learn fundamentals of Next.js

Video Course – Create a blog app with Next.js + Ghost CMS

Practice Classroom – Coming soon

Conclusion

This is not the end; the sky is the limit! Your next step should be to iterate and re-iterate your learnings and the tech stack you have been learning so far. Slowly but steadily, increase tools in your toolkit and become a pro developer. Good luck!