Nested routes with folders in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a nested route folder named 'blog' inside the 'app' directory.

NextJS

app/[1]/page.js

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

Aposts

Bblog

Chome

Dabout

Attempts:

3 left

💡 Hint

Common Mistakes

Using a folder name that doesn't match the intended route segment.

Placing the file directly under 'app' without a folder for nested routes.

The folder named blog inside the app directory creates a nested route at /blog.

2fill in blank

medium

Complete the code to define a nested page component inside the 'blog' folder.

NextJS

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

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

APage

BBlogPage

CHomePage

DBlogHome

Attempts:

3 left

💡 Hint

Common Mistakes

Using a component name that is not 'Page' which is the convention.

Forgetting to export the component as default.

In Next.js App Router, the default exported component in page.js is usually named Page.

3fill in blank

hard

Fix the error in the nested route file path to correctly represent a dynamic route for blog posts by slug.

NextJS

app/blog/[1]/page.js

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

A[slug]

B(slug)

C{slug}

D<slug>

Attempts:

3 left

💡 Hint

Common Mistakes

Using curly braces or parentheses instead of square brackets for dynamic routes.

Not using any brackets, which makes it a static folder.

Dynamic route folders in Next.js use square brackets, like [slug], to capture dynamic segments.

4fill in blank

hard

Fill both blanks to create a nested dynamic route folder and a page component that receives the slug parameter.

NextJS

app/blog/[1]/page.js

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

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

A[slug]

Bslug

Cid

DpostId

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatch between folder name and parameter name in code.

Using incorrect parameter names like 'id' or 'postId' when folder is '[slug]'.

The folder [slug] defines the dynamic segment, and params.slug accesses its value inside the component.

5fill in blank

hard

Fill all three blanks to create a nested route with a subfolder 'comments' inside a dynamic post route, and display the comment id from params.

NextJS

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

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

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

A[slug]

B[commentId]

CcommentId

Dslug

Attempts:

3 left

💡 Hint

Common Mistakes

Using static folder names instead of dynamic ones.

Mismatch between folder names and parameter names in the component.

The dynamic post folder is [slug], inside it the dynamic comments folder is [commentId], and the component accesses params.commentId.