Next.js for beginners

Next.js is already a widely known framework for React applications when writing this article. Honestly, there are tons of reasons for it to be popular and widely adopted, but I'm not going to go into that rabbit hole for today (I've done it many times already ). Instead, I'll walk you through a series of questions (don't worry, I'll answer them with you) to explain it better.

Disclaimer: When I say for beginners I mean beginners in Next.js. This article is meant for developers who have been doing React for a while and who want to get serious in Application development with React. So, if you don't know the fundamentals React, reading up React Docs instead would be a good idea.

If you've decided to proceed, let's get the party started.

What's Next.js?

Next.js is a React framework that provides additional optimizations and configurations out-of-the-box for developers.

But, what does that mean?

To answer this better, we should answer another question first.

Why is Next.js?

The answer to this question starts with "What is React?", (man, now you're just going in circles), bear with me, my friend.

React is a library for building web applications in a declarative fashion.

React does many things for us. It also has great community and support but it lacks "opinion". It's a library, so it's minimal by definition and leaves a lot of heavy lifting on the developers like routing, asset management, and optimizations like code splitting. While this gives a lot of flexibility, it also leads to bad choices and poor application organization.

This is where Next.js comes into the picture. It gives the right set of tools and guides you with a process to make the most out of them.

It provides built-in support for

• Directory-based routing
• Pre-rendering to HTML for SEO (Search engine optimization)
  • SSR (server-side rendering at request time)
  • SSG (static site generation at build time)
• API routes
• Middlewares
• Image optimization
• Code splitting

to name a few.

It does all of this while keeping

• developer experience optimal
• maintenance overhead to a minimum

How's Next.js?

Wait, wait... before you get started about my bad English (because you didn't watch Avengers: Infinity War), I'd request you to watch this video so you get the joke (that's really important, to me ).

Coming back to the question, well Next.js does it by covering up the things developers want while building upon what React has provided. For example, React is great at developing applications with declarative code but it sucks at routing (as it doesn't have its own), Next.js provides a great solution for path-based routing.

Next.js became quite popular at first by solving the SEO problem with client-side applications including React.

Ideally React applications are rendered on the client/browser, which has a couple of drawbacks like

• slow initial load due to large bundle size and JavaScript execution on the client
• bad SEO due to client-side rendering
• unnecessary network calls from client-side

Next.js solves this by pre-rendering React applications before sending the response to the user.

Pre-rendering is compiling React components into their HTML layout on the server side.

Pre-rendering makes the user experience better as

• it delivers a smaller JavaScript bundle, which reduces the time to download and process it on the client-side
• rendering on the server is fast because of better computing power
• data-fetching on the server saves us from network calls waterfall on the client, on top of that it'll be much faster if the data source is the Next.js API routes

Next.js provides two methods of doing pre-rendering, SSR which generates the HTML at the request time (good for pages using live data) and SSG which generates the HTML at the build time (better for static pages).

The below diagram explains the difference between CSR (Client Side Rendering) vs SSR (Server Side Rendering) vs SSG (Static Site Generation)

Both SSR and SSG enables us to leverage the simplicity of React without compromising on user experience. Next.js being the great framework it is, picks the best rendering strategy for you based on how you've have structured your page. This makes Next.js a powerful framework for delivering production- ready applications with React.

As you can already see my love for Next.js (very hard to hide), I'll be unleashing this love by continuing this Next.js beginners course in a series of articles and YouTube videos.
We'll discuss Next.js fundamentals in detail and build a production-ready application with Next.js, including development and deployment. So, make sure to follow me to get latest updates.

I hope you find this article helpful! Should you have any feedback or questions, please feel free to put them in the comments below. For more such articles, follow me on Twitter

Until next time