Create Next App setup in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a new Next.js app using the command line.

NextJS

npx create-next-app@latest [1]

Drag options to blanks, or click blank then click option'

Acreate-next

Bnext-app

Capp-next

Dmy-next-app

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving the app name blank

Using invalid characters in the app name

Typing the command incorrectly

The command npx create-next-app@latest my-next-app creates a new Next.js app named my-next-app.

2fill in blank

medium

Complete the command to start the Next.js development server.

NextJS

cd my-next-app && npm run [1]

Drag options to blanks, or click blank then click option'

Abuild

Btest

Cdev

Dstart

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'start' instead of 'dev' for development

Running the command outside the project folder

The command npm run dev starts the Next.js development server for live coding.

3fill in blank

hard

Fix the error in the Next.js app entry point import statement.

NextJS

import { [1] } from 'next/app';

Drag options to blanks, or click blank then click option'

Aapp

BAppProps

CAppComponent

DMyApp

Attempts:

3 left

💡 Hint

Common Mistakes

Using default import syntax (no curly braces)

Using incorrect names like 'App' or lowercase

The correct import is import { AppProps } from 'next/app'; to use the AppProps type in your custom App component.

4fill in blank

hard

Fill both blanks to create a basic Next.js page component.

NextJS

export default function [1]() {
  return <[2]>Hello Next.js!</[2]>;
}

Drag options to blanks, or click blank then click option'

AHomePage

Bdiv

Cspan

DApp

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase function names

Using invalid HTML tags

The component name is HomePage and it returns a div element with text.

5fill in blank

hard

Fill all three blanks to import React, define a component, and export it as default.

NextJS

import [1] from 'react';

function [2]() {
  return <h1>Welcome to Next.js!</h1>;
}

export default [3];

Drag options to blanks, or click blank then click option'

AReact

BWelcomePage

DReactDOM

Attempts:

3 left

💡 Hint

Common Mistakes

Not importing React

Mismatching function name and export

Importing ReactDOM instead of React

We import React, define the component WelcomePage, and export it as default. (Note: React import is optional in Next.js 13+.)