Route prefetching behavior in NextJS - Mini Project: Build & Apply

Route Prefetching Behavior in Next.js

📖 Scenario: You are building a simple Next.js app with two pages: Home and About. You want to improve user experience by prefetching the About page route when the Home page loads. This means the About page will load faster when the user clicks its link.

🎯 Goal: Build a Next.js app that prefetches the About page route on the Home page using the next/link component's prefetch behavior.

📋 What You'll Learn

Create a Home page with a link to the About page using next/link

Add a configuration variable to control whether prefetching is enabled

Use the prefetch prop on the Link component to enable or disable prefetching based on the config

Add the About page with simple content

💡 Why This Matters

🌍 Real World

Prefetching routes in Next.js improves user experience by loading pages in the background before the user clicks, making navigation feel instant.

💼 Career

Understanding route prefetching is important for frontend developers working with Next.js to optimize app performance and user experience.

1

Create the Home page with a link to About

Create a file called app/page.tsx with a functional component named HomePage. Inside it, return a Link component from next/link that links to "/about" with the text "Go to About". Import Link from next/link at the top.

NextJS

import Link from 'next/link'

// Your code here

Need a hint?

Use the Link component from next/link to create the link to the About page.

2

Add a config variable to control prefetching

Inside app/page.tsx, add a constant named shouldPrefetch and set it to true. This will control if the About page link prefetches.

NextJS

import Link from 'next/link'

const shouldPrefetch = true

export default function HomePage() {
  return (
    
      Home Page
      Go to About
    
  )
}

// Your code here

Need a hint?

Define a constant shouldPrefetch before the component function.

3

Use the prefetch prop on Link based on config

Update the Link component in HomePage to include the prefetch prop. Set it to the value of shouldPrefetch so that prefetching is enabled or disabled based on this variable.

NextJS

import Link from 'next/link'

const shouldPrefetch = true

export default function HomePage() {
  return (
    
      Home Page
      Go to About
    
  )
}

// Your code here

Need a hint?

Add the prefetch attribute to the Link component and set it to shouldPrefetch.

4

Add the About page with simple content

Create a file called app/about/page.tsx with a default exported functional component named AboutPage. It should return a main element with an h1 heading that says "About Page".

NextJS

// Your code here

Need a hint?

Create a simple functional component that returns a heading inside a main tag.