Challenge - 5 Problems
Next.js Mastery
Get all challenges correct to earn this badge!
Test your skills under time pressure!
🧠 Conceptual
intermediate2:00remaining
What is the primary purpose of Next.js?
Next.js is a popular framework built on top of React. What is its main purpose?
Attempts:
2 left
💡 Hint
Think about how Next.js helps with rendering pages faster and improving SEO.
✗ Incorrect
Next.js enhances React by enabling server-side rendering and static site generation, which improves performance and SEO.
❓ component_behavior
intermediate2:00remaining
What happens when you export a React component as default in a Next.js page?
In Next.js, you create a file under the 'app' directory and export a React component as default. What does Next.js do with this component?
Attempts:
2 left
💡 Hint
Next.js 14 uses server components by default in the app directory.
✗ Incorrect
By default, components exported in the app directory are server components, rendered on the server to improve performance.
❓ lifecycle
advanced2:00remaining
How does Next.js handle data fetching in server components?
Consider a server component in Next.js that fetches data using 'fetch' inside the component body. When and where does this data fetching happen?
Attempts:
2 left
💡 Hint
Server components run on the server, so their code executes there.
✗ Incorrect
Server components run on the server, so any data fetching inside them happens on the server before the HTML is sent to the browser.
📝 Syntax
advanced2:00remaining
Which code snippet correctly defines a server action in Next.js 14?
Next.js 14 introduces server actions to handle server-side logic. Which of the following snippets correctly defines a server action?
Attempts:
2 left
💡 Hint
Server actions require the 'use server' directive at the top of the function body.
✗ Incorrect
Server actions must be async functions with the 'use server' directive inside the function body to mark them as server-only.
🔧 Debug
expert3:00remaining
Why does this Next.js server component throw an error?
Given this Next.js server component code, why does it throw an error when rendering?
```jsx
export default function Page() {
const [count, setCount] = React.useState(0);
return ;
}
```
NextJS
export default function Page() { const [count, setCount] = React.useState(0); return <button onClick={() => setCount(count + 1)}>{count}</button>; }
Attempts:
2 left
💡 Hint
Server components do not support React state hooks like useState.
✗ Incorrect
Server components run on the server and do not have interactive state or event handlers. useState only works in client components.