Create Next App setup in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

Correct command to create a new Next.js app

Which command correctly creates a new Next.js app named my-app using the official recommended method?

A npx create-next-app@latest my-app

B npm create next-app my-app

C next new my-app

D npm init next-app my-app

💡 Hint

Use the official Next.js recommended command with npx.

The official way to create a new Next.js app is using 'npx create-next-app@latest my-app'. Other commands are either invalid or deprecated.

❓ component_behavior

intermediate

Default page output after creating a Next.js app

After running npx create-next-app@latest my-app and starting the development server, what will the default homepage display?

A A list of all files in the project directory

B A blank white page with no content

C A welcome page with Next.js logo and links to documentation

D An error page saying 'Page Not Found'

💡 Hint

The default app includes a friendly welcome page.

The default Next.js app shows a styled welcome page with the Next.js logo and helpful links to get started.

🔧 Debug

advanced

Fixing a missing dependency error after setup

You created a Next.js app with npx create-next-app@latest my-app but running npm run dev gives an error: Cannot find module 'react'. What is the most likely cause?

A You must rename <code>package.json</code> to <code>next.json</code>

B The Next.js app template does not include React by default

C You need to downgrade Node.js to version 12

D You forgot to run <code>npm install</code> before <code>npm run dev</code>

💡 Hint

Dependencies must be installed before running the app.

The error means React is missing. Running npm install installs all dependencies including React.

🧠 Conceptual

advanced

Understanding the role of the pages directory

In a freshly created Next.js app, what is the main purpose of the pages directory?

A It stores global CSS styles for the entire app

B It automatically maps files to routes for the app's URLs

C It contains configuration files for the Next.js build process

D It holds server-side API code only

💡 Hint

Think about how URLs relate to files in Next.js.

Next.js uses the pages folder to create routes automatically based on file names.

❓ state_output

expert

Effect of editing app/page.tsx in Next.js 14 app router

In a Next.js 14 app created with the app router, you edit app/page.tsx to add a console.log('Hello') inside the default exported component function. What happens when you refresh the homepage in the browser?

NextJS

export default function Page() {
  console.log('Hello');
  return <h1>Welcome</h1>;
}

A The message 'Hello' appears in the server console, not the browser console

B The message 'Hello' appears in the browser console each time the page loads

C No console message appears anywhere because console.log is ignored

D The app crashes with a runtime error due to console.log usage

💡 Hint

Remember that Next.js 14 app router components run on the server by default.

In Next.js 14 app router, components are server components by default, so console.log runs on the server, not in the browser.