0
0
NextJSframework~10 mins

Root layout (required) 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 define a root layout component that wraps children in a <html> and <body>.

NextJS
export default function RootLayout({ children }) {
  return (
    <html lang=[1]>
      <body>{children}</body>
    </html>
  )
}
Drag options to blanks, or click blank then click option'
A"app"
B"en"
C"root"
D"main"
Attempts:
3 left
💡 Hint
Common Mistakes
Omitting the lang attribute on the html tag.
Using an incorrect string for lang attribute.
2fill in blank
medium

Complete the code to import global CSS styles in the root layout file.

NextJS
import [1];

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}
Drag options to blanks, or click blank then click option'
A"globals.css"
Bstyles
C"./globals.css"
D"./globals"
Attempts:
3 left
💡 Hint
Common Mistakes
Trying to import CSS as a named import.
Omitting the file extension .css.
3fill in blank
hard

Fix the error in the root layout component by completing the metadata export with the correct title string.

NextJS
export const metadata = {
  title: [1],
  description: 'My Next.js app'
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}
Drag options to blanks, or click blank then click option'
AMyApp
BMy App
C'My App'
D"My App"
Attempts:
3 left
💡 Hint
Common Mistakes
Omitting quotes around the string.
Using single quotes inconsistently.
4fill in blank
hard

Fill both blanks to add a <head> element with a <title> inside the root layout.

NextJS
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>[1]<title>My App</title>[2]</head>
      <body>{children}</body>
    </html>
  )
}
Drag options to blanks, or click blank then click option'
A<>
B</>
C<React.Fragment>
D</React.Fragment>
Attempts:
3 left
💡 Hint
Common Mistakes
Not wrapping multiple elements inside head.
Using invalid tags inside head.
5fill in blank
hard

Fill all three blanks to create a root layout that imports global CSS, sets metadata, and renders children inside <html> and <body>.

NextJS
import [1];

export const metadata = {
  title: [2],
  description: 'Example app'
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>[3]</body>
    </html>
  )
}
Drag options to blanks, or click blank then click option'
A"./globals.css"
B"My Root Layout"
Cchildren
DRootLayout
Attempts:
3 left
💡 Hint
Common Mistakes
Not importing CSS correctly.
Missing quotes around title.
Not rendering children inside body.