0
0
NextJSframework~10 mins

Multiple root layouts with route groups in NextJS - Interactive Code Practice

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Practice - 5 Tasks
Answer the questions below
1fill in blank
easy

Complete the code to import the RootLayout component correctly.

NextJS
import [1] from './layout';
Drag options to blanks, or click blank then click option'
ALayoutRoot
BrootLayout
CRootLayout
DMainLayout
Attempts:
3 left
💡 Hint
Common Mistakes
Using lowercase names for component imports.
Importing a non-existent component name.
2fill in blank
medium

Complete the code to define a route group folder named admin with its own layout.

NextJS
app/[1]/layout.tsx
Drag options to blanks, or click blank then click option'
Aadmin
Bdashboard
Cuser
Dsettings
Attempts:
3 left
💡 Hint
Common Mistakes
Using a folder name that does not match the intended route group.
Placing the layout file outside the route group folder.
3fill in blank
hard

Fix the error in the layout component export to make it a valid Next.js root layout.

NextJS
export default function [1]({ children }: { children: React.ReactNode }) {
  return <html><body>{children}</body></html>;
}
Drag options to blanks, or click blank then click option'
Alayout
BLayout
Crootlayout
DRootLayout
Attempts:
3 left
💡 Hint
Common Mistakes
Using lowercase or camelCase names for the root layout component.
Not exporting the component as default.
4fill in blank
hard

Fill both blanks to create a nested route group with its own layout and page.

NextJS
app/[1]/[2]/page.tsx
Drag options to blanks, or click blank then click option'
Aadmin
Bdashboard
Csettings
Dprofile
Attempts:
3 left
💡 Hint
Common Mistakes
Swapping the order of route group folders.
Using folder names that do not exist in the project.
5fill in blank
hard

Fill all three blanks to complete a root layout that wraps a route group layout and renders children.

NextJS
export default function [1]({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <[2]>
          {children}
        </[3]>
      </body>
    </html>
  );
}
Drag options to blanks, or click blank then click option'
ARootLayout
BAdminLayout
DMainLayout
Attempts:
3 left
💡 Hint
Common Mistakes
Mismatched opening and closing tags.
Incorrect function or component names.