setting-up-nextjs-tv-app

name	setting-up-nextjs-tv-app
description	Scaffolds a Next.js 16 project with React 19, Tailwind CSS v4, and TypeScript optimized for TV display. Configures cursor hiding, overflow control, remote image patterns, and installs matter-js and qrcode.react. Use when creating a new TV-optimized web display.

Setting Up a Next.js TV Display App

Quick Start

npx create-next-app@latest conference-agenda --typescript --tailwind --app --src-dir
cd conference-agenda
npm install matter-js qrcode.react
npm install -D @types/matter-js

Dependencies

Target versions:

• next: 16.x
• react / react-dom: 19.x
• tailwindcss: 4.x (with @tailwindcss/postcss)
• matter-js: 0.20.x (2D physics engine)
• qrcode.react: 4.x (QR code component)
• typescript: 5.x

next.config.ts

Configure remote image patterns for speaker avatars:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "your-avatar-host.com",
        pathname: "/media/avatars/**",
      },
    ],
  },
};

export default nextConfig;