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.

Practice

1. In Next.js 14 with the App Router, what does placing a page.tsx file inside a nested folder under app/ do?

easy

A. Bundles all pages into a single route regardless of folder structure.

B. Overrides the root page.tsx and disables routing.

C. Creates a nested route matching the folder path in the URL.

D. Automatically generates API endpoints instead of pages.

Solution

1. Step 1: Understand folder structure in Next.js App Router

   Each folder inside app/ represents a route segment in the URL.

2. Step 2: Role of page.tsx in nested folders

   A page.tsx inside a nested folder creates a page for that nested route path.

3. Final Answer:

   Creates a nested route matching the folder path in the URL. -> Option C

4. Quick Check:

   Nested folder + page.tsx = nested route [OK]

Hint: Remember: folder path + page.tsx = nested URL route [OK]

Common Mistakes:

• Thinking nested folders disable routing
• Confusing API routes with page routes
• Assuming all pages merge into one route

2. Which of the following is the correct folder and file structure to create a nested route /dashboard/settings in Next.js App Router?

easy

A. app/dashboard/settings/page.tsx

B. app/dashboard-settings/page.tsx

C. app/dashboard/page.tsx/settings.tsx

D. app/page.tsx/dashboard/settings.tsx

Solution

1. Step 1: Identify folder nesting for nested routes

   Nested routes require nested folders matching the URL segments.

2. Step 2: Match file placement for the nested page

   The page.tsx file must be inside the deepest folder representing the route.

3. Final Answer:

   app/dashboard/settings/page.tsx -> Option A

4. Quick Check:

   Nested folders + page.tsx file = nested route [OK]

Hint: Use nested folders named after URL segments with page.tsx inside [OK]

Common Mistakes:

• Placing page.tsx outside the nested folder
• Using hyphens instead of folders for nested routes
• Misplacing files inside page.tsx instead of folders

3. Given this folder structure inside app/:

app/
  blog/
    [slug]/
      page.tsx
  page.tsx

What URL will render the page inside app/blog/[slug]/page.tsx?

medium

A. /blog/[slug]

B. /blog/*

C. /blog/{slug}

D. /blog/:slug

Solution

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

   Folders with square brackets like [slug] represent dynamic route segments.

2. Step 2: Translate dynamic folder to URL pattern

   The dynamic segment is represented as :slug in URL patterns, meaning any value matches.

3. Final Answer:

   /blog/:slug -> Option D

4. Quick Check:

   Dynamic folder [slug] = URL param :slug [OK]

Hint: Dynamic folders [name] map to :name in URLs [OK]

Common Mistakes:

• Using literal [slug] in URL
• Confusing dynamic segment syntax
• Assuming wildcard * matches dynamic segments

4. You have this folder structure:

app/
  products/
    page.tsx
  details/
    page.tsx

But navigating to /products/details shows a 404 error. What is the likely cause?

medium

A. The details/page.tsx file is misplaced; it should be inside products/details/page.tsx.

B. The details folder should be named [details] for dynamic routing.

C. The products folder must not have its own page.tsx when nested routes exist.

D. Missing page.tsx inside details folder.

Solution

1. Step 1: Verify folder and file placement

   The details/page.tsx must be inside products/details/ folder to match the route /products/details.

2. Step 2: Check the given structure

   The structure shows details/page.tsx inside app/ root, not nested under products/.

3. Final Answer:

   The details/page.tsx file is misplaced; it should be inside products/details/page.tsx. -> Option A

4. Quick Check:

   Nested route files must be inside matching nested folders [OK]

Hint: Check file location matches nested folder path exactly [OK]

Common Mistakes:

• Misplacing nested page.tsx outside correct folder
• Confusing dynamic and static folder names
• Removing parent page.tsx unnecessarily

5. You want to create a nested route /profile/settings/privacy in Next.js App Router. You also want to share a layout between /profile/settings and /profile/settings/privacy. How should you organize your folders and files inside app/?

hard

A. app/profile/settings/privacy/page.tsx only; layouts are not needed for nested routes

B. app/profile/settings/layout.tsx, app/profile/settings/page.tsx, app/profile/settings/privacy/page.tsx

C. app/profile/layout.tsx, app/profile/settings/page.tsx, app/profile/settings/privacy/page.tsx

D. app/profile/settings/page.tsx, app/profile/settings/privacy/layout.tsx, app/profile/settings/privacy/page.tsx

Solution

1. Step 1: Understand layout sharing in nested routes

   Layouts placed in a folder apply to all nested routes inside that folder.

2. Step 2: Organize folders for shared layout

   To share layout between /profile/settings and /profile/settings/privacy, place layout.tsx inside settings/ folder.

3. Step 3: Place page.tsx files correctly

   Put page.tsx inside settings/ and inside settings/privacy/ for those pages.

4. Final Answer:

   app/profile/settings/layout.tsx, app/profile/settings/page.tsx, app/profile/settings/privacy/page.tsx -> Option B

5. Quick Check:

   Layout in parent folder shares UI with nested pages [OK]

Hint: Put layout.tsx in parent folder to share with nested routes [OK]

Common Mistakes:

• Placing layout.tsx too deep to share with sibling routes
• Omitting layout.tsx and expecting shared UI
• Misplacing page.tsx files outside correct folders