Boolean Art logo

Boolean Art

Subscribe
Archives
February 24, 2025

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 ❀️

Don't miss what's next. Subscribe to Boolean Art:
GitHub X Facebook LinkedIn Boolean Art
Powered by Buttondown, the easiest way to start and grow your newsletter.