Exercise: What Makes Next.js Special?
The Course is launching in Early Access! 🎉
The Modern Full Stack Next.js Course is launching in Early Access only to the folks on the waitlist in a couple of weeks.
Feedback
To re-iterate, What makes Next.js special?
To quickly summarize what we learned in the previous lesson.
Next.js can be thought of as React with superpowers. While React gives you the freedom to build applications your way, Next.js provides an opinionated structure that implements best practices automatically.
Let's look at some key advantages:
1. Built-in Routing
With plain React, you'd need to:
- Research routing libraries (React Router? React Location?)
- Install your chosen library
- Set up routing configuration
- Wrap your app in router providers
Next.js simplifies this with a file-based routing system built right into the framework. Just create a file in the app directory, and it automatically becomes a route!
2. Flexible Rendering Options
Next.js gives you multiple ways to render your pages:
- Server-Side Rendering (SSR): Pages are generated on the server for each request
- Static Site Generation (SSG): Pages are generated at build time
- Client-Side Rendering (CSR): Pages are rendered in the browser
- Incremental Static Regeneration (ISR): The best of both SSG and SSR
You can even mix and match these approaches in the same application!
3. Built-in API Routes
Instead of maintaining separate frontend and backend codebases, Next.js lets you build your API right inside your application. Just create a file in the app/api directory, and you've got a serverless API endpoint!
4. Performance Optimizations
Next.js works closely with Google's Web Core Vitals team to ensure excellent performance:
- Automatic Image Optimization: The
next/imagecomponent automatically:- Compresses images to modern formats like WebP
- Resizes images for different devices
- Lazy loads images off-screen
- Script Optimization: The
next/scriptcomponent:- Intelligently loads third-party scripts
- Uses PartyTown to run scripts off the main thread
- Prevents render blocking
And there are many more optimizations that Next.js does automatically.
5. Caching
Next.js gave us more power to say, hey cache this data forever until I kick off a new build and re-deploy my application.
So remember, when we work on features and after a git push and merge, this kicks off some sort of a build to take our changes we have worked on and put it on a site that anyone can access? Well, Next.js gave us power that until we kick off another build, the data will stay in memory and will be served to the user.
So for example, if a user from Ghana 🇬🇭 visits our website, they get served the data from that cache vs if a user from Canada 🇨🇦 visits our website, they get served the data from that cache.
Now, if you are wondering when do we download the data to be then stored in memory? Well, that happens right before we are trying to deploy our application.
Here's how it works:
npm install- Installing all dependencies needed for the project- Build process - Downloads all the data 👈
- Package the buildand deploy - Push to a publicly accessible URL
All of this makes Next.js very powerful.
6. SEO Benefits
Next.js also helps a lot with SEO (Search Engine Optimization). When you search for something on Google, you get a list of results. Each of those results has a title, description, and a URL.
Now, imagine the internet as a vast, dark forest. In this forest, there are curious creatures called "search engine bots". These bots are like tireless explorers, constantly crawling through the web, searching for new content to discover and index.
Next.js Server
Websites that Next.js Server has pre-rendered
Click the button to see how the search bot crawls pre-rendered content.
Think of these bots as hungry creatures:
- Always on the lookout for fresh, delicious content to devour (or in this case, index).
- Just like how roaches find food and keep coming back for more
- Once these bots find content they can understand on your website, they'll keep returning, eager for new morsels of information.
Next.js acts like a master chef in this scenario. It prepares your website's content in a way that's irresistible to these bot creatures. How? By serving up pre-rendered HTML pages.
You see, these bot creatures aren't very patient. They don't want to wait around for JavaScript to load and execute before they can see your content. Next.js solves this problem by having the meal (your content) ready to serve immediately. It's like having a buffet of pre-prepared dishes, all set out and ready for the bots to feast upon as soon as they arrive at your site.
This is particularly important because if the bots can easily understand and index your content, it's more likely that your website will appear in search results when people are looking for information related to your site.
So, in essence, Next.js is not just a framework for building web applications. It's also your ally in making your website more discoverable and appealing to these hungry search engine creatures roaming the vast forest of the internet.
Quiz 🧠
Take the quiz to see how much you've understood from this lesson. Don't worry if you don't get all the answers right. This is just to get you thinking and more for you to track your progress.
Loading...