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

Mehul Mohan

Dec 12, 2020

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:

  1. Box model in CSS
  2. Layout systems (flexbox and grid) in CSS
  3. Selectors and pseudo-selectors in CSS
  4. DOM elements in HTML/CSS and pseudo-elements in CSS
  5. 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:

  1. Video Course - HTML5/CSS3 Basics
  2. Practice Classroom - HTML5 Exercises
  3. Practice Classroom - CSS3 Exercises
  4. Practice Classroom - Flexbox Layout Exercises
  5. 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:

  1. Basic syntax and language use
  2. Document Object Model (DOM)
  3. ES6+ concepts
  4. You should be aware of the weird side of JavaScript (type casting, NaN, etc.)
  5. 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:

  1. Video Course - JavaScript Basics
  2. Video Course - Build 10 Projects with JavaScript
  3. Practice Classroom - Basic JavaScript Challenges
  4. 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:

  1. Functional components
  2. State Management with hooks - useState and useEffect (very very very x 1000 important)
  3. JSX expressions and basics
  4. Routing with react-router and data fetching with react-query
  5. Working with a layout system like Material UI or Tailwind CSS (optional, but recommended if you want to be a good frontend developer too)
  6. 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:

  1. Video Course - React.js Fundamentals
  2. Video Course - Build 6 Projects in React
  3. Practice Classroom - React Quiz App
  4. Practice Classroom - React Tours Project
  5. 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:

  1. File-based routing (static/dynamic)
  2. getServerSideProps and getStaticProps in Next.js (very important concept - understand precisely how they work and thank me later for making your life 100x easy)
  3. Internal files (_app.js, _document.js, error files, etc.)
  4. The Image component in Next.js 10

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

  1. Video Course - Learn fundamentals of Next.js
  2. Video Course - Create a blog app with Next.js + Ghost CMS
  3. 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!

#nextjs
#javascript

Know your author

Mehul Mohan

Apparently this author likes to keep an air of mystery about them

Join the discussion

Did you enjoy reading the article? Thank the author by sharing it on Twitter.

Tweet a thanks!