Link component for client navigation in NextJS - Mini Project: Build & Apply

Link component for client navigation

📖 Scenario: You are building a simple Next.js website with multiple pages. You want to create navigation links that let users move between pages without reloading the whole page. This makes the site faster and smoother.

🎯 Goal: Build a navigation bar using Next.js Link components to navigate between the Home and About pages with client-side navigation.

📋 What You'll Learn

Create a basic Next.js app structure with two pages: Home and About

Use the Next.js Link component to create navigation links

Ensure the links navigate without full page reload

Use semantic HTML for the navigation bar

💡 Why This Matters

🌍 Real World

Websites often have multiple pages. Using Next.js Link components lets users move between pages quickly without full page reloads, improving user experience.

💼 Career

Understanding client-side navigation with Next.js Link is essential for building fast, modern React-based web applications.

1

Create Home and About pages

Create two files: app/page.tsx for the Home page and app/about/page.tsx for the About page. In app/page.tsx, export a default function component called HomePage that returns an <h1> with text Home Page. In app/about/page.tsx, export a default function component called AboutPage that returns an <h1> with text About Page.

NextJS

# Create HomePage component in app/page.tsx
# Create AboutPage component in app/about/page.tsx

Hint

Each page is a React component exported as default from its file. Use simple function components returning an <h1> with the page name.

2

Add a navigation bar component

Create a new file app/components/NavBar.tsx. Export a default function component called NavBar that returns a <nav> element containing an unordered list <ul> with two list items <li>. Each list item will later hold a navigation link.

NextJS

/* app/components/NavBar.tsx */
// Create NavBar component with  and  containing two  elements
// Your code here

Hint

Use semantic HTML: <nav> for navigation and <ul> with <li> for list items.

3

Use Next.js Link component for navigation

Import Link from next/link in app/components/NavBar.tsx. Inside the first <li>, add a <Link> component with href="/" and text Home. Inside the second <li>, add a <Link> component with href="/about" and text About. This creates client-side navigation links.

NextJS

/* app/components/NavBar.tsx */
import Link from 'next/link'

export default function NavBar() {
  return (
    
      
        
          {/* Add Link to Home page here */}
        
        
          {/* Add Link to About page here */}
        
      
    
  );
}

/* app/page.tsx */
export default function HomePage() {
  return Home Page;
}

/* app/about/page.tsx */
export default function AboutPage() {
  return About Page;
}

Hint

Use the Link component with the href prop set to the page path. The link text goes inside the component.

4

Add NavBar to Home and About pages

Import the NavBar component from app/components/NavBar in both app/page.tsx and app/about/page.tsx. Include the <NavBar /> component above the <h1> in both pages. This completes the navigation setup.

NextJS

/* app/page.tsx */
import NavBar from './components/NavBar'

export default function HomePage() {
  return (
    
      {/* Add NavBar component here */}
      Home Page
    
  )
}

/* app/about/page.tsx */
import NavBar from '../components/NavBar'

export default function AboutPage() {
  return (
    
      {/* Add NavBar component here */}
      About Page
    
  )
}

Hint

Import the NavBar component and include it in the JSX above the page heading.

Practice

1. What is the main purpose of the Link component in Next.js?

easy

A. To style links with CSS automatically

B. To fetch data from an API

C. To navigate between pages without reloading the whole page

D. To create server-side rendered pages

Solution

1. Step 1: Understand the role of Link in Next.js

   The Link component is designed to enable client-side navigation, which means moving between pages without a full page reload.

2. Step 2: Compare options with Link's purpose

   Options A, C, and D describe unrelated features: styling, data fetching, and server rendering, which are not the Link component's main job.

3. Final Answer:

   To navigate between pages without reloading the whole page -> Option C

4. Quick Check:

   Link enables client navigation = B [OK]

Hint: Link is for fast page moves without reloads [OK]

Common Mistakes:

• Thinking Link styles links automatically
• Confusing Link with data fetching tools
• Assuming Link creates server-rendered pages

2. Which of the following is the correct syntax to create a client navigation link to '/about' page using Next.js Link component?

easy

A. About

B. About

C. About

D. About

Solution

1. Step 1: Recall Next.js Link syntax

   The Link component requires an href prop for the destination and wraps an <a> tag for accessibility and styling.

2. Step 2: Evaluate each option

   <Link href='/about'><a>About</a></Link> uses href and wraps <a> correctly. <Link to='/about'>About</Link> uses to which is React Router syntax, not Next.js. <a href='/about'>About</a> is a plain anchor tag without Link, so no client navigation. <Link url='/about'><a>About</a></Link> uses url which is invalid.

3. Final Answer:

   <Link href='/about'><a>About</a></Link> -> Option D

4. Quick Check:

   Use href and wrap <a> = A [OK]

Hint: Link uses href, not to or url, and wraps an <a> tag [OK]

Common Mistakes:

• Using 'to' instead of 'href' in Link
• Not wrapping content inside <a> tag
• Using plain <a> without Link for navigation

3. Given this code snippet, what will happen when the user clicks the link?

import Link from 'next/link';

export default function Home() {
  return (
    <Link href='/contact'><a>Contact Us</a></Link>
  );
}

medium

A. Nothing happens because the Link is missing a required prop

B. The page navigates to '/contact' without a full page reload

C. The page reloads completely and navigates to '/contact'

D. An error is thrown because <a> cannot be inside Link

Solution

1. Step 1: Understand Link behavior on click

   The Link component enables client-side navigation, so clicking the link changes the URL and page content without a full reload.

2. Step 2: Check code correctness

   The code uses href='/contact' and wraps the text inside <a>, which is the correct pattern. No errors or missing props.

3. Final Answer:

   The page navigates to '/contact' without a full page reload -> Option B

4. Quick Check:

   Link click triggers client navigation = C [OK]

Hint: Link with href and <a> navigates client-side [OK]

Common Mistakes:

• Thinking Link causes full page reload
• Believing <a> inside Link causes error
• Assuming missing props cause no navigation

4. Identify the error in this Next.js Link usage:

import Link from 'next/link';

export default function Nav() {
  return (
    <Link href='/services'>Services</Link>
  );
}

medium

A. Missing <a> tag inside Link for proper accessibility

B. Incorrect import statement for Link component

C. href should be a full URL, not a relative path

D. Link component cannot be used inside a function

Solution

1. Step 1: Check Link usage requirements

   Next.js Link requires wrapping the clickable content inside an <a> tag for accessibility and styling.

2. Step 2: Analyze the code snippet

   The code places the text 'Services' directly inside Link without an <a> tag, which is incorrect and can cause accessibility issues.

3. Final Answer:

   Missing <a> tag inside Link for proper accessibility -> Option A

4. Quick Check:

   Link needs <a> inside = D [OK]

Hint: Always wrap Link content in <a> tag [OK]

Common Mistakes:

• Omitting the <a> tag inside Link
• Using full URLs unnecessarily in href
• Thinking Link can't be used in functions

5. You want to create a navigation menu with three links: Home ('/'), About ('/about'), and Contact ('/contact'). Which code correctly uses Next.js Link components to ensure fast client navigation and accessibility?

hard

A.
Home
About
Contact

B.
Home
About
Contact

C.
Home
About
Contact

D.
Home
About
Contact

Solution

1. Step 1: Review correct Link usage for multiple links

   Each Link must have an href prop and wrap an <a> tag for accessibility and client navigation.

2. Step 2: Evaluate each option

   Home About Contact
   correctly uses href and wraps text in <a>.
   Home About Contact
   uses plain anchors without Link, causing full reloads.
   Home About Contact
   uses to which is invalid in Next.js.
   Home About Contact
   uses <span> instead of <a>, breaking accessibility and styling.

3. Final Answer:

   Option A code with Link and <a> tags for all links -> Option A

4. Quick Check:

   Link with href and for all links = A [OK]

Hint: Use href and <a> inside Link for all menu items [OK]

Common Mistakes:

• Using plain <a> without Link causing reloads
• Using 'to' instead of 'href' in Link
• Replacing <a> with <span> inside Link