Link component for client navigation in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Link component from Next.js.

NextJS

import [1] from 'next/link';

Drag options to blanks, or click blank then click option'

ARouter

BLink

CNavLink

DNavigation

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Router' instead of 'Link' for navigation.

Trying to import from 'next/router' instead of 'next/link'.

The Link component is imported from 'next/link' to enable client-side navigation in Next.js.

2fill in blank

medium

Complete the code to create a client navigation link to the '/about' page.

NextJS

<Link href=[1]><a>About Us</a></Link>

Drag options to blanks, or click blank then click option'

A'/contact'

B'/home'

C'/about'

D'about'

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the leading slash in the path.

Using a wrong path like '/contact' instead of '/about'.

The href prop should be the path string '/about' to navigate to the About page.

3fill in blank

hard

Fix the error in the Link usage by completing the blank.

NextJS

<Link href="/blog">[1]Read Blog[1]</Link>

Drag options to blanks, or click blank then click option'

A<a>

B<button>

C<div>

D<span>

Attempts:

3 left

💡 Hint

Common Mistakes

Using <button> or <div> inside Link.

Not wrapping the text inside any tag.

Next.js requires an <a> tag inside Link for proper client navigation and accessibility.

4fill in blank

hard

Fill both blanks to create a Link that navigates to '/profile' with accessible text.

NextJS

<Link href=[1]><a aria-label=[2]>Go to Profile</a></Link>

Drag options to blanks, or click blank then click option'

A'/profile'

B"Profile page"

C"Profile section"

D'/dashboard'

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect href paths like '/dashboard'.

Not providing an aria-label or using unclear text.

The href should be '/profile' and the aria-label should describe the link purpose clearly for screen readers.

5fill in blank

hard

Fill all three blanks to create a Link with a dynamic href and accessible label.

NextJS

const userId = '123';
<Link href=[1]><a aria-label=[2]>[3]</a></Link>

Drag options to blanks, or click blank then click option'

A`/user/${userId}`

B"User profile"

C"View Profile"

D"/user/123"

Attempts:

3 left

💡 Hint

Common Mistakes

Using plain string '/user/123' instead of dynamic template string.

Missing aria-label or using non-descriptive text.

Use a template string for dynamic href, a clear aria-label, and descriptive link text for accessibility.