Dynamic routes with [param] in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a dynamic route file named correctly for a parameter called 'id'.

NextJS

pages/[1].js

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

A[id]

Bid

C{id}

D(id)

Attempts:

3 left

💡 Hint

Common Mistakes

Using curly braces or parentheses instead of square brackets.

Naming the file simply 'id.js' which is a static route.

In Next.js, dynamic route files use square brackets around the parameter name, like [id].

2fill in blank

medium

Complete the code to extract the dynamic route parameter 'id' using Next.js useRouter hook.

NextJS

import { useRouter } from 'next/router';

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

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

Aparam

Broute

Cquery

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name different from 'id' causing confusion.

Trying to destructure router.query directly without .id.

The dynamic parameter 'id' is accessed from router.query.id and assigned to a variable named 'id'.

3fill in blank

hard

Fix the error in the code to correctly display the dynamic route parameter 'slug'.

NextJS

import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const slug = router.query.[1];
  return <h1>Post: {slug}</h1>;
}

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

Aparam

Bslug

Cid

Dquery

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'id' or other names that don't match the route parameter.

Trying to access router.query directly without the parameter name.

The parameter name in the route is 'slug', so router.query.slug accesses it correctly.

4fill in blank

hard

Fill both blanks to create a dynamic route page that fetches the 'userId' parameter and displays it.

NextJS

import { useRouter } from 'next/router';

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

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

AuserId

Bid

Dparam

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the variable and query property.

Using generic names like 'id' when the parameter is 'userId'.

The variable and the query property must both be 'userId' to correctly access the dynamic parameter.

5fill in blank

hard

Fill all three blanks to create a dynamic route page that uses useRouter to get 'postId', checks if it's loading, and displays it.

NextJS

import { useRouter } from 'next/router';

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

  if (router.[3]) {
    return <p>Loading...</p>;
  }

  return <h1>Post ID: {postId}</h1>;
}

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

ApostId

CisFallback

DisLoading

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'isLoading' instead of 'isFallback' for loading state.

Using different names for the variable and query property.

The variable and query property are 'postId'. The loading state is checked with router.isFallback in Next.js.