Self-hosting with Node.js in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Next.js server component when self-hosted with Node.js?

Consider this simple Next.js server component that fetches data and renders it. What will be the rendered output when accessed via a Node.js self-hosted server?

NextJS

import React from 'react';

export default async function Greeting() {
  const data = await Promise.resolve({ name: 'Alice' });
  return <h1>Hello, {data.name}!</h1>;
}

A Error: Cannot use await in this context

B <h1>Hello, undefined!</h1>

C <h1>Hello, Alice!</h1>

D <h1>Hello, !</h1>

💡 Hint

Think about how Next.js server components handle async data fetching.

Next.js server components support async functions and await data fetching. The component resolves the promise and renders the name 'Alice' inside the <h1> tag.

❓ lifecycle

intermediate

Which lifecycle behavior is true for Next.js API routes when self-hosted with Node.js?

When you self-host a Next.js API route on Node.js, which statement about its lifecycle is correct?

A The API route runs once at server start and caches all responses.

B The API route runs only once per user session.

C The API route runs only on client-side navigation events.

D The API route runs on every request, creating a new instance each time.

💡 Hint

Think about how serverless functions behave in a Node.js environment.

Next.js API routes are functions that run on every HTTP request, creating a new context each time. They do not cache responses by default.

🔧 Debug

advanced

Why does this self-hosted Next.js app fail to start with Node.js?

Examine the following server start script. Why does it fail with a syntax error?

NextJS

import { createServer } from 'http';
import next from 'next';

const app = next({ dev: false });
const handle = app.getRequestHandler();

createServer((req, res) => {
  app.prepare().then(() => {
    handle(req, res);
  });
}).listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

A TypeError because 'app.prepare' is not a function.

B SyntaxError because 'import' cannot be used in CommonJS without 'type: module'.

C Runtime error because 'handle' is undefined.

D No error; the code runs correctly.

💡 Hint

Check the Node.js module system compatibility with ES modules.

Using 'import' statements requires the Node.js environment to support ES modules, typically by setting 'type: module' in package.json or using .mjs files. Otherwise, a SyntaxError occurs.

📝 Syntax

advanced

Which option correctly configures a Next.js custom server with Express for self-hosting?

Choose the correct code snippet to create a custom Express server that handles Next.js pages.

A

const express = require('express');
const next = require('next');

const app = next({ dev: false });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();
  server.all('*', (req, res) => handle(req, res));
  server.listen(3000);
});

B

import express from 'express';
import next from 'next';

const app = next({ dev: false });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();
  server.get('/', (req, res) => handle(req, res));
  server.listen(3000);
});

C

import express from 'express';
import next from 'next';

const app = next({ dev: true });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();
  server.use((req, res) => handle(req, res));
  server.listen(3000);
});

D

import express from 'express';
import next from 'next';

const app = next({ dev: false });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();
  server.get('*', (req, res) => handle(req, res));
  server.listen(3000);
});

💡 Hint

Consider which HTTP methods and routes should be handled to serve all Next.js pages.

Option A uses CommonJS syntax with 'require', handles all HTTP methods with 'server.all', and routes all paths with '*', which correctly serves all Next.js pages.

🧠 Conceptual

expert

What is the main advantage of self-hosting a Next.js app with Node.js over using Vercel's platform?

Choose the best explanation for why a developer might choose to self-host a Next.js app using Node.js instead of deploying on Vercel.

A Self-hosting allows full control over the server environment and custom backend integrations.

B Self-hosting automatically scales the app globally without configuration.

C Self-hosting eliminates the need to write API routes or server components.

D Self-hosting guarantees zero downtime without any additional setup.

💡 Hint

Think about flexibility and control versus managed services.

Self-hosting gives developers full control over the server, environment, and backend integrations, which is not always possible on managed platforms like Vercel.