🇫🇷 Speak French? Cet article est disponible en français sur PointJS.
3 steps to learn Next.js efficiently
If you follow me on Medium, it’s probably because you’ve liked one of my previous Next.js articles, for instance “how to set configuration variables in Next.js” or “render anything statically with Next.js and the Megaparam”.
Last year in 2022, I’ve joined Human Coders, a famous training agency in France, as a teacher. And I’ve crafted a 3 days Next.js course based on my years of experience with this framework. It’s available in English and in French.
Next.js also offers excellent resources for self-learners. The downside of having a lot of content, is that it can feel overwhelming and you may not know where to start!
Here are the 3 steps I recommend to learn Next.js efficiently.
Step 1 : discover Next.js by crafting a few pages
Next.js file-based router is not just a fancy pattern choice to differentiate itself from other frameworks. This approach has many positive technical implications: ability to split code between pages, reducing bundle size, support of an hybrid approach mixing server-side rendering and client-side routing…
So, it would be a good idea to start your journey there: just crafting a few pages. Next.js is after all a web framework, and websites are made of pages.
Just keep it fun! You can create an online CV for your dog, a website with a quote for each day of the year, an e-commerce that sells pictures of cosy places…
Don’t hesitate to spend a whole day on this step even if it looks simple, you’ll learn a lot.
Step 2: understand server-rendering (“SSR” and “SSG”)
A Single Page Application is a website that relies a lot on client-side JavaScript to create an extremely interactive experience. “Single Page” means that there is a single HTML file whose sole purpose is to load tons of JavaScript. This JavaScript in turn makes the app work as expected. A bit like a “.exe” for a Windows software.
SPAs are great for SaaS softwares, but not so cool for content-oriented applications: e-commerce, blogs. That’s because these apps need to run a lot of JavaScript code to display the page, which can feel slow and heavy.
Server-Side Rendering and Static Site Generation are optimization techniques brought by modern frameworks like Next.js.
SSR pre-renders the page on the server, it’s great for critical content, SEO or supporting low-end devices like mobiles. SSG does the same, but at build-time when the application is deployed online. It drastically reduces the costs of hosting your website, because the page is rendered only once and not for each request.
SSR and SSG are probably the most complex features brought by Next.js. To make things even more complicated, the wording has changed over time and we now talk about “dynamic” and “static” rendering instead of SSR/SSG.
You’ll want to dedicate at least a whole day to understand them better!
Step 3: understanding serverless API routes
Next.js is not just a frontend framework. It lets you create API endpoints server-side, that we call “API Routes”.
API routes let you implement usual server-side features, such as authentication, talking to a database, processing payments…
But there’s a trick: Next.js, and the company behind it, Vercel, promote a paradigm named “serverless computing”.
Instead of having one big server running all the time, each of your API route behaves like a tiny independent server.
For instance, users will call your “login” endpoint way more often than your “signup” endpoint, since they create their account only once. A serverless deployment will allocate more resources to “login” than to “signup”, automatically!
The same thing also happens for your pages, each page of your app can act as an independent application.
Serverless is also a really advanced concept. That’s why you can also spend a whole day learning the basics, that’s perfectly fine.
Conclusion: you don’t need to spend years of your life learning Next.js
I’ve built my expertise of Next.js while working for Aplines as a freelance lead front-end developer. Aplines has been bought by Schneider Electrics since then, and it helps multiple electricity provider across the world to manage their assets.
I’ve shared the knowledge I’ve gathered back to the open source ecosystem, by migrating Vulcan, a framework formerly powered by Meteor and now framework-agnostic, with a Next.js starter. I am now part of the Devographics collective that runs the State of JS, CSS and GraphQL surveys.
Why am I listing those achievements (apart from bragging shamelessly :))? Because I want to point out that mastering a modern technology is not about being the coolest kid on the block, it brings actual professional success. But it has a price. I’ve spent 2 years learning the inner workings of Next.js and server-rendering, and I still learn new things every day.
Do you have to spend 2 years of your life following the same route I did? No, that wouldn’t make sense.
It took me so long because I’ve started learning Next.js a long time ago, just a few months after backend API routes were unveiled (previously Next.js was a frontend-only technology like create-react-app or Vite).
I think that currently, 3 days are enough to learn how to build a fullstack JS application with Next.js. You won’t master each and every little detail, but you can get enough to put real code into production.
Example schedule to learn Next.js efficiently:
Day 1: crafting pages
Day 2: server-side rendering and data fetching
Day 3: API routes and serverless
What you need to succeed is a fast track, focusing on the most relevant part one step at a time. I hope this article will help you figure out the schedule that works best for you!
Find my Next.js course at Human Coders:
- 🇬🇧 English program: https://www.humancoders.com/formations/next-js-en
- 🇫🇷 French program: https://www.humancoders.com/formations/next-js
