Next.js <-> NestJS Communication

{
  "name": "api",
  "private": true,
  "scripts": {
    "build": "nest build",
    "start": "nest start",
    "start:dev": "nest start --watch"
  },
  "dependencies": {
    "@nestjs/common": "12.0.3",
    "@nestjs/core": "12.0.3",
    "@nestjs/platform-fastify": "12.0.3",
    "reflect-metadata": "^0.2.2",
    "rxjs": "^7.8.2"
  },
  "devDependencies": {
    "@nestjs/cli": "12.0.3",
    "@nestjs/schematics": "12.0.3",
    "@nestjs/testing": "12.0.3",
    "typescript": "~6.0.2"

import { Module } from '@nestjs/common';
import { HealthModule } from './health/health.module.js';
import { TodosModule } from './todos/todos.module.js';

@Module({
  imports: [HealthModule, TodosModule],
})
export class AppModule {}

import { Controller, Get } from '@nestjs/common';
import { HealthService } from './health.service.js';

@Controller('health')
export class HealthController {
  constructor(private readonly healthService: HealthService) {}

  @Get()
  getHealth() {
    return this.healthService.getStatus();
  }
}

import { Module } from '@nestjs/common';
import { HealthController } from './health.controller.js';
import { HealthService } from './health.service.js';

@Module({
  controllers: [HealthController],
  providers: [HealthService],
})
export class HealthModule {}

import { Injectable } from '@nestjs/common';

@Injectable()
export class HealthService {
  getStatus() {
    return {
      status: 'ok',
      service: 'taskflow-api',
    };
  }
}

import { NestFactory } from '@nestjs/core';
import { FastifyAdapter, NestFastifyApplication } from '@nestjs/platform-fastify';
import { AppModule } from './app.module.js';

async function bootstrap() {
  const app = await NestFactory.create<NestFastifyApplication>(
    AppModule,
    new FastifyAdapter(),
  );

  app.enableCors({
    origin: [
      'http://localhost:3000',
      'http://127.0.0.1:3000',
    ],
  });

  app.enableShutdownHooks();

  const port = Number(process.env.PORT ?? 4000);

import {
  BadRequestException,
  Body,
  Controller,
  Delete,
  Get,
  HttpCode,
  Param,
  Patch,
  Post,
} from '@nestjs/common';
import { TodosService } from './todos.service.js';

@Controller('todos')
export class TodosController {
  constructor(private readonly todosService: TodosService) {}

  @Get()
  findAll() {
    return this.todosService.findAll();

import { Module } from '@nestjs/common';
import { TodosController } from './todos.controller.js';
import { TodosService } from './todos.service.js';

@Module({
  controllers: [TodosController],
  providers: [TodosService],
})
export class TodosModule {}

import { Injectable, NotFoundException } from '@nestjs/common';

interface Todo {
  id: number;
  title: string;
  completed: boolean;
}

@Injectable()
export class TodosService {
  private nextId = 3;
  private readonly todos: Todo[] = [
    { id: 1, title: 'Learn HTTP', completed: false },
    { id: 2, title: 'Build the API contract', completed: false },
  ];

  findAll() {
    return this.todos;
  }

API_BASE_URL=
NEXT_PUBLIC_API_BASE_URL=

{
  "name": "web",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint"
  },
  "dependencies": {
    "next": "16.3.3",
    "react": "19.3.0",
    "react-dom": "19.3.0"
  }
}

:root {
  --background: #f6f8fa;
  --surface: #ffffff;
  --text: #17212b;
  --border: #d8e0e6;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: Arial, sans-serif;
}

main {
  width: min(1100px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 2rem 0;

import type { Metadata } from "next";
import Link from "next/link";
import "./globals.css";

export const metadata: Metadata = {
  title: "TaskFlow",
  description: "Project and task management for focused teams",
};

export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="en">
      <body>
        <header>
          <Link href="/">TaskFlow</Link>
          <nav aria-label="Primary navigation">
            <Link href="/projects">Projects</Link>
            <Link href="/settings">Settings</Link>
          </nav>
        </header>

export default function HomePage() {
  return (
    <section>
      <p>TaskFlow</p>
      <h1>Keep work visible and moving.</h1>
      <p>Projects, tasks, ownership, and progress will grow here throughout the course.</p>
    </section>
  );
}

const projects = [
  { id: 1, name: "Website refresh", status: "Active" },
  { id: 2, name: "Inventory rollout", status: "Planning" },
];

export default function ProjectsPage() {
  return (
    <section>
      <h1>Projects</h1>
      {projects.map((project) => (
        <article key={project.id}>
          <h2>{project.name}</h2>
          <p>{project.status}</p>
        </article>
      ))}
    </section>
  );
}

"use client";

import { useState } from "react";

export function DensityToggle() {
  const [compact, setCompact] = useState(false);
  return (
    <button onClick={() => setCompact((value) => !value)}>
      Density: {compact ? "Compact" : "Comfortable"}
    </button>
  );
}

import { DensityToggle } from "./density-toggle";

export default function SettingsPage() {
  return (
    <section>
      <h1>Settings</h1>
      <DensityToggle />
    </section>
  );
}

import { fetchTodos } from '@/lib/api/todos';

export default async function TodosPage() {
  const apiBaseUrl = process.env.API_BASE_URL;

  if (!apiBaseUrl) {
    throw new Error('API_BASE_URL is not configured');
  }

  const todos = await fetchTodos(apiBaseUrl);

  return (
    <main>
      <h1>Todos from NestJS</h1>
      {todos.length === 0 ? (
        <p>No Todos yet.</p>
      ) : (
        <ul>
          {todos.map((todo) => (
            <li key={todo.id}>

'use client';

import { useCallback, useEffect, useState } from 'react';
import { createTodo, fetchTodos, type Todo } from '@/lib/api/todos';

export function BrowserTodos() {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL;

  const loadTodos = useCallback(async () => {
    if (!baseUrl) {
      setError('NEXT_PUBLIC_API_BASE_URL is not configured');
      setLoading(false);
      return;
    }

    setLoading(true);

import { BrowserTodos } from './browser-todos';

export default function TodosBrowserPage() {
  return (
    <main>
      <h1>Browser-to-API Todos</h1>
      <BrowserTodos />
    </main>
  );
}

export interface Todo {
  id: number;
  title: string;
  completed: boolean;
}

async function expectJson<T>(response: Response): Promise<T> {
  if (!response.ok) {
    throw new Error(`HTTP ${response.status} for ${response.url}`);
  }

  return response.json() as Promise<T>;
}

export async function fetchTodos(baseUrl: string): Promise<Todo[]> {
  const response = await fetch(`${baseUrl}/todos`, { cache: 'no-store' });
  return expectJson<Todo[]>(response);
}

export async function createTodo(baseUrl: string, title: string): Promise<Todo> {