Self-hosting with Node.js in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Next.js server creation function.

NextJS

import { createServer } from '[1]';

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

Anext

Bfs

Cexpress

Dhttp

Attempts:

3 left

💡 Hint

Common Mistakes

Importing from 'next' instead of 'http'.

Using 'express' which is a different server framework.

The createServer function is imported from the http package to create an HTTP server for Next.js.

2fill in blank

medium

Complete the code to initialize the Next.js app with the correct configuration.

NextJS

const app = next({ dev: [1] });

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

Afalse

Bnull

Ctrue

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Setting dev to false disables development features.

Using null or undefined causes errors.

Setting dev to true enables development mode for the Next.js app.

3fill in blank

hard

Fix the error in the server listen call by completing the port number.

NextJS

server.listen({ port: [1] }, () => console.log('Server running'));

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

A3000

B'3000'

C'http'

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string instead of a number for the port.

Passing invalid types like 'http' or boolean.

The port number should be a number, not a string or other type.

4fill in blank

hard

Fill both blanks to handle requests and prepare the Next.js app.

NextJS

const handle = app.[1]();

app.[2]().then(() => { /* server start code */ });

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

AgetRequestHandler

Bprepare

Clisten

Drender

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'listen' instead of 'prepare' to start the app.

Confusing 'render' with 'getRequestHandler'.

getRequestHandler returns the request handler function, and prepare prepares the app before starting the server.

5fill in blank

hard

Fill all three blanks to create a simple HTTP server that uses Next.js request handler.

NextJS

import http from 'http';

const server = http.createServer(app.[1]());

server.[2]({ port: [3] }, () => console.log('Server started'));

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

AgetRequestHandler

Blisten

C3000

Dprepare

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'prepare' instead of 'getRequestHandler'.

Passing port as a string instead of a number.

The server uses getRequestHandler to handle requests, and listen to start on port 3000.