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.

Practice

1. What is the main benefit of file-based routing in Next.js?

easy

A. It only works with static HTML files, not React components.

B. It automatically creates routes based on files in the pages folder.

C. It requires manual configuration of each route in a separate file.

D. It disables dynamic URL parameters for pages.

Solution

1. Step 1: Understand file-based routing concept

   File-based routing means Next.js uses the file names in the pages folder to create website routes automatically.

2. Step 2: Compare options with this concept

   It automatically creates routes based on files in the pages folder. matches this idea exactly. Options A, B, and D contradict the automatic and dynamic nature of file-based routing.

3. Final Answer:

   It automatically creates routes based on files in the pages folder. -> Option B

4. Quick Check:

   File-based routing = automatic routes [OK]

Hint: File names equal routes in Next.js [OK]

Common Mistakes:

• Thinking routes need manual setup
• Confusing static files with React components
• Believing dynamic URLs are not supported

2. Which file name correctly creates a dynamic route for a user profile page in Next.js?

easy

A. userId.js

B. profile.js

C. user-profile.jsx

D. [userId].js

Solution

1. Step 1: Identify dynamic route syntax in Next.js

   Dynamic routes use square brackets around the parameter name, like [param].js.

2. Step 2: Match options to this syntax

   Only [userId].js uses square brackets correctly to create a dynamic route for userId.

3. Final Answer:

   [userId].js -> Option D

4. Quick Check:

   Dynamic route syntax = [param].js [OK]

Hint: Dynamic routes use [param].js file names [OK]

Common Mistakes:

• Using plain file names without brackets
• Confusing file extensions
• Missing brackets around parameter

3. Given these files in the pages folder: index.js, about.js, [postId].js, what URL paths will Next.js automatically create?

medium

A. /, /about, /:postId (dynamic route)

B. /index, /about, /[postId]

C. /, /about, /postId

D. /home, /about-us, /post

Solution

1. Step 1: Understand file to route mapping

   index.js maps to root '/', about.js maps to '/about', and [postId].js creates a dynamic route '/:postId'.

2. Step 2: Evaluate options for correct paths

   /, /about, /:postId (dynamic route) correctly shows '/' for index, '/about' for about.js, and dynamic '/:postId' for [postId].js. Others are incorrect or literal.

3. Final Answer:

   /, /about, /:postId (dynamic route) -> Option A

4. Quick Check:

   File names map to routes including dynamic [param] [OK]

Hint: index.js = /, [param].js = dynamic route [OK]

Common Mistakes:

• Confusing index.js with /index path
• Treating dynamic routes as literal strings
• Assuming file names map exactly without dynamic syntax

4. You created a file named user.js inside the pages folder to handle user profiles, but navigating to /123 shows a 404 error. What is the likely problem?

medium

A. Next.js does not support nested routes.

B. The file extension must be .jsx, not .js.

C. The file should be named [userId].js to handle dynamic user IDs.

D. You need to add a route manually in a config file.

Solution

1. Step 1: Understand dynamic route handling

   To handle URLs like /123, the file must use dynamic routing syntax with brackets, e.g., [userId].js.

2. Step 2: Check options for correct fix

   The file should be named [userId].js to handle dynamic user IDs. correctly identifies the need for a dynamic route file name. Options A, B, and C are incorrect because Next.js supports .js files, automatic routing, and nested routes.

3. Final Answer:

   The file should be named [userId].js to handle dynamic user IDs. -> Option C

4. Quick Check:

   Dynamic routes need [param].js file names [OK]

Hint: Use [param].js for dynamic URLs [OK]

Common Mistakes:

• Using static file names for dynamic URLs
• Thinking manual route config is needed
• Confusing file extensions

5. You want to create a blog with categories and posts using file-based routing. Which folder and file structure correctly supports URLs like /blog/technology/123 where technology is a category and 123 is a post ID?

hard

A. /pages/blog/[category]/[postId].js

B. /pages/blog/category/postId.js

C. /pages/blog/[category-postId].js

D. /pages/blog/category/[postId].js

Solution

1. Step 1: Understand nested dynamic routes

   To handle URLs with multiple dynamic parts, Next.js uses nested folders with bracketed file names for each parameter.

2. Step 2: Match structure to URL pattern

   /pages/blog/[category]/[postId].js uses nested folders with [category] and [postId].js, matching /blog/technology/123 correctly. Other options do not match dynamic nesting properly.

3. Final Answer:

   /pages/blog/[category]/[postId].js -> Option A

4. Quick Check:

   Nested dynamic folders = nested URL params [OK]

Hint: Use nested [param] folders for multi-level dynamic routes [OK]

Common Mistakes:

• Putting multiple params in one file name
• Using static folder names for dynamic parts
• Not nesting folders for URL segments