Dynamic route segments in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a dynamic route file for a user profile page.

NextJS

pages/[1].js

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

A{userId}

BuserId

C(userId)

D[userId]

Attempts:

3 left

💡 Hint

Common Mistakes

Using curly braces or parentheses instead of square brackets.

Not using any brackets, which creates a static route.

In Next.js, dynamic route segments are defined by square brackets around the segment name, like [userId].

2fill in blank

medium

Complete the React component to access the dynamic route parameter using Next.js hooks.

NextJS

import { useRouter } from 'next/router';

export default function Profile() {
  const router = useRouter();
  const [1] = router.query.userId;

  return <p>User ID: {userId}</p>;
}

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

Aparams

Bid

CuserId

DqueryId

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different variable name than the dynamic segment.

Trying to destructure router.query incorrectly.

The dynamic route parameter is accessed from router.query using the exact segment name, here userId.

3fill in blank

hard

Fix the error in the dynamic route component to correctly handle the case when the router is not ready.

NextJS

import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  if (!router.isReady) return <p>Loading...</p>;
  const postId = router.query.[1];
  return <p>Post ID: {postId}</p>;
}

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

Aid

BpostId

Cslug

Dpost

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different name than the dynamic segment in the query.

Not checking if the router is ready before accessing query.

The dynamic segment name must match the file name. If the file is [postId].js, then use router.query.postId.

4fill in blank

hard

Fill all three blanks to create a dynamic route segment and access its parameter in the component.

NextJS

import { useRouter } from 'next/router';

export default function Product() {
  const router = useRouter();
  const [1] = router.query.[2];
  return <p>Product ID: {productId}</p>;
}

// File path: pages/[3].js

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

AproductId

Bid

C[productId]

Dproduct

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the file and query parameter.

Not using square brackets in the file name.

The dynamic segment and the query parameter must have the same name, here productId.

5fill in blank

hard

Fill all three blanks to create a nested dynamic route and access both parameters in the component.

NextJS

import { useRouter } from 'next/router';

export default function Review() {
  const router = useRouter();
  const [1] = router.query.[2];
  const [3] = router.query.reviewId;
  return <p>Product: {productId}, Review: {reviewId}</p>;
}

// File path: pages/products/[productId]/reviews/[reviewId].js

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

AproductId

CreviewId

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up parameter names or missing one.

Not matching the dynamic segment names exactly.

The nested dynamic route uses [productId] and [reviewId]. Access both from router.query with matching names.