What is Next.js - Practice Questions & Exercises

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the primary purpose of Next.js?

Next.js is a popular framework built on top of React. What is its main purpose?

A To provide server-side rendering and static site generation for React applications

B To create mobile apps without using React Native

C To manage databases directly within React apps

D To replace React with a new UI library

💡 Hint

Think about how Next.js helps with rendering pages faster and improving SEO.

Next.js enhances React by enabling server-side rendering and static site generation, which improves performance and SEO.

❓ component_behavior

intermediate

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?

A It treats the component as a server component and renders it on the server by default

B It ignores the component unless you wrap it in a special Next.js function

C It automatically converts the component into a class component

D It requires you to manually register the component in a routing file

💡 Hint

Next.js 14 uses server components by default in the app directory.

By default, components exported in the app directory are server components, rendered on the server to improve performance.

❓ lifecycle

advanced

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?

A Data fetching happens both on server and client simultaneously

B Data fetching happens on the client after the page loads

C Data fetching is not allowed inside server components

D Data fetching happens on the server during rendering before sending HTML to the client

💡 Hint

Server components run on the server, so their code executes there.

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

advanced

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?

A const addItem = (item) => { 'use server'; /* logic here */ }

B export async function addItem(item) { 'use server'; /* logic here */ }

C export async function addItem(item) { /* logic here */ }

D export const addItem = async (item) => { 'use server'; /* logic here */ }

💡 Hint

Server actions require the 'use server' directive at the top of the function body.

Server actions must be async functions with the 'use server' directive inside the function body to mark them as server-only.

🔧 Debug

expert

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>;
}

A The onClick handler syntax is invalid in server components

B The code is missing an import for React, causing a ReferenceError

C React.useState cannot be used in server components because they run on the server and have no state

D The button element cannot be used inside server components

💡 Hint

Server components do not support React state hooks like useState.

Server components run on the server and do not have interactive state or event handlers. useState only works in client components.