Coins5's Blog
Project Setup and Tailwind

Project Setup and Tailwind

Written by: Marlon Colca
Posted on 06 Sep 2025 - a month ago
nextjs typescript clones

Create a Next.js App Router project and enable Tailwind with a dark, media‑friendly baseline.


Objetivo: crear un proyecto Next.js con App Router y habilitar Tailwind con una base oscura.

Crear el proyecto ⚡

npx create-next-app@latest next-netflix-clone \
  --typescript --eslint --src-dir --app --import-alias @/*
cd next-netflix-clone

Tailwind (Next 15) 🎨

  • Next 15 permite importar @import "tailwindcss"; directamente en globals.css.

globals.css mínimo 🎛️

@import "tailwindcss";

/* Base oscura cinematográfica */
:root {
  color-scheme: dark;
}
body {
  background: #000;
  color: #fff;
}

/* Scrollbar delgada para filas */
* {
  scrollbar-width: thin;
  scrollbar-color: #444 transparent;
}
*::-webkit-scrollbar {
  height: 8px;
}
*::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 999px;
}

Layout 🧩

// src/app/layout.tsx
import type { Metadata } from "next";
import "./globals.css";

export const metadata: Metadata = {
  title: "Netflix Clone Demo",
  description: "Catálogo con videos locales y externos",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="es">
      <body className="antialiased">{children}</body>
    </html>
  );
}

Carpetas públicas 🗂️

mkdir -p public/videos public/posters public/subs

Tips de TypeScript 🧰

{
  "compilerOptions": {
    "resolveJsonModule": true,
    "moduleResolution": "bundler",
    "paths": { "@/*": ["./src/*"] }
  }
}

Ejecutar ▶️

npm run dev
# http://localhost:3000

Problemas comunes 🛠️

  • No carga CSS → revisa que globals.css se importe en layout.tsx.
  • No se ven imágenes → confirma que estén en public/ y el path empiece con /.

🔜 Coming up next


Data Model and Catalog

Data Model and Catalog

Define a simple, typed catalog and helpers to query it efficiently from the UI.

07 Sep 2025 - a month ago