Next.js

The leading React framework

newt-app uses Next.js as the frontend framework, running inside the apps/web package of your monorepo.

App Router

newt-app uses the Next.js App Router with server and client components, layouts, and file-based routing.

UI Package

Shared components live in packages/ui and are imported into your Next.js app as a workspace package.

import { Button } from '@my-project/ui/button';

Client Side Data Fetching

You can use a data fetching library to query your NestJS backend from client components.

'use client';
 
import { useQuery } from '@tanstack/react-query';
 
interface Todo {
  id: string;
  title: string;
  done: boolean;
}
 
async function fetchTodos(): Promise<Todo[]> {
  const res = await fetch('/api/todos');
  if (!res.ok) throw new Error('Failed to fetch todos');
  return res.json();
}
 
export function TodoList() {
  const { data: todos, isPending, isError } = useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos,
  });
 
  if (isPending) return <p>Loading...</p>;
  if (isError) return <p>Something went wrong.</p>;
 
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

PreviousInstallation

NextNestJS