Master the NextJS Link Component
Note: All links to PRO lessons in this email have a free gift code applied which allows you to view it for free for 24 hours (no sign in required!) 🚀
There are a lot of deep concepts in the NextJS that can greatly simplify your development experience once you build a solid mental model.
Last year we already covered Server-Side-React vs. Client-Side-React, demystifying the fact that client side components can still run on the server and the real reason why react server components are important is that they “only” run on the server which has a number of advantages (even beyond security).
Now, for the past month we’ve targeted the NextJS Link component.
Static vs Dynamic Rendering
Before you can master all the concepts of the NextJS Link component you need to be clear on Dynamic vs. Static rendering. So, here is a pro lesson that simplifies that:
Static vs Dynamic Rendering
Lesson from "Professional NextJS": Static vs Dynamic Rendering
Reason to use the Link Component
Then we look at why a is bad and you need to use the Link component:
NextJS Link Component
Lesson from "Professional NextJS": NextJS Link Component
Then we cover features the Link component provides that are beyond a simple wrapper on an anchor tag.
Link Prefetching
What is it?
How can you control it?
What do the different values mean (null vs true vs false)
NextJS Link Prefetching
Lesson from "Professional NextJS": NextJS Link Prefetching
Scroll Behaviour
Browser have two kinds of behaviours when it comes to scrollbar + navigation.
If you do an explicit full page navigation (e.g. by entering an address in the address bar), browsers scroll to top of the new page.
If you use back and forwards, browser will preserve the scroll position.
The Link component supports both forms with a simple prop.
Navigation Scroll with Link
Lesson from "Professional NextJS": Navigation Scroll with Link
Replace Navigation
Since the NextJS link component does client side navigation, it supports the common pattern of an in-place navigation by overwriting the current entry in the browser history. But why would you use it?
Replace Navigation History
Lesson from "Professional NextJS": Replace Navigation History
Want More?
Hope you enjoy our teaching style:
Quick Tutorials (hours of research and thought goes in the background)
Real World Demos (so you can practically see what your code does instead of purely abstract models)
Deep Coverage (tips and tricks you will not find elsewhere).
We are working on the NextJS Course, but already have a complete learning path to get you ready for web development: JS → TS → React.
Our pricing is probably the best in the business (kept it affordable for people from diverse backgrounds)
https://www.booleanart.com/pricing
If you want a technical preview (free 1 month unlimited access), don’t be afraid to reach out. We just want people to learn while still remaining sustainable as a business ❤️