Why file-based routing simplifies navigation in NextJS - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a page component in Next.js that will be automatically routed.

NextJS

export default function [1]() {
  return <h1>Home Page</h1>;
}

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

APage

BHomePage

CApp

Dindex

Attempts:

3 left

💡 Hint

Common Mistakes

Using a component name that is not exported as default

Not exporting the component at all

In Next.js, the default export of a file inside the app or pages folder is the component rendered for that route. Naming the function Page is a common convention in the app directory.

2fill in blank

medium

Complete the code to create a nested route by placing a file in the correct folder.

NextJS

app/[1]/page.js

export default function Page() {
  return <h1>About Us</h1>;
}

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

Ahome

Bcontact

Cabout

Dindex

Attempts:

3 left

💡 Hint

Common Mistakes

Naming the folder incorrectly

Placing the file outside the folder

In Next.js file-based routing, placing a page.js inside a folder named about creates the /about route automatically.

3fill in blank

hard

Fix the error in the code to correctly link to the About page using Next.js navigation.

NextJS

import Link from 'next/link';

export default function Home() {
  return (
    <nav>
      <Link href=[1]>About</Link>
    </nav>
  );
}

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

A'/about'

B'about/'

C'./about'

D'/About'

Attempts:

3 left

💡 Hint

Common Mistakes

Using relative paths in href

Incorrect casing in the path

In Next.js, the href prop in Link should be the absolute path starting with a slash and matching the folder name exactly in lowercase.

4fill in blank

hard

Fill both blanks to create a dynamic route for user profiles in Next.js.

NextJS

app/users/[1]/page.js

export default function Page({ params }) {
  return <h1>User ID: {params.[2]</h1>;
}

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

A[id]

BuserId

Cid

Dprofile

Attempts:

3 left

💡 Hint

Common Mistakes

Not using square brackets for dynamic routes

Mismatching param names in code

Dynamic routes in Next.js use square brackets in folder names like [id]. The parameter is accessed via params.id.

5fill in blank

hard

Fill all three blanks to create a nested dynamic route and display both parameters in Next.js.

NextJS

app/blog/[1]/[2]/page.js

export default function Page({ params }) {
  return (
    <>
      <h1>Category: {params.[3]</h1>
      <h2>Post: {params.postId}</h2>
    </>
  );
}

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

A[category]

B[postId]

Ccategory

DpostId

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect folder names without brackets

Accessing params with wrong keys

For nested dynamic routes, folders use square brackets like [category] and [postId]. The param names match the folder names without brackets.