🧩 Creación de la primera página y componentes básicos

🧩 Creación de la primera página y componentes básicos

Aprende cómo crear tu primera página en Next.js y organiza tus componentes de manera profesional.

📌 Índice de esta entrada:

📁 Cómo funcionan las páginas en Next.js
🏠 Personalizando la página principal (page.tsx)
🆕 Creando una nueva página (about/page.tsx)
🔗 Navegación entre páginas con Link
⚙️ Creando un componente reutilizable (Header/Footer)
🎨 Aplicando estilos con Tailwind CSS

📁 Cómo funcionan las páginas en Next.js

En Next.js, **cada carpeta dentro de app/ representa una ruta** de tu sitio web, y el archivo page.tsx dentro de esa carpeta representa el contenido de esa página.

Por ejemplo:

app/
├── page.tsx         → Página principal (ruta "/")
└── about/
    └── page.tsx     → Página "Acerca de" (ruta "/about")

Así, crear páginas nuevas es tan fácil como crear carpetas dentro de app/.

🏠 Personalizando la página principal (`page.tsx`)

Abre el archivo app/page.tsx. Por defecto tiene un código generado por create-next-app. Borra su contenido y reemplázalo por lo siguiente:

export default function Home() {
  return (
    <main className="flex flex-col items-center justify-center min-h-screen">
      <h1 className="text-4xl font-bold text-blue-600">
        ¡Bienvenido a mi Blog con Next.js!
      </h1>
      <p className="text-gray-600 mt-4">
        Esta es tu primera página creada con Next.js 🚀
      </p>
    </main>
  );
}

Guarda los cambios y ejecuta el servidor:

npm run dev

Luego abre http://localhost:3000 y verás tu primera página personalizada 🎉

🆕 Creando una nueva página (`about/page.tsx`)

Vamos a crear una nueva página llamada “Acerca de”. Dentro de la carpeta app/, crea una subcarpeta llamada about y dentro de ella un archivo page.tsx.

El resultado será:

app/
├── page.tsx
└── about/
    └── page.tsx

Escribe este código en about/page.tsx:

export default function About() {
  return (
    <main className="flex flex-col items-center justify-center min-h-screen">
      <h1 className="text-3xl font-semibold text-blue-500">
        Acerca de este Blog
      </h1>
      <p className="text-gray-600 mt-3 max-w-md text-center">
        Este blog fue creado con Next.js como parte de nuestro curso práctico.  
        Aquí aprenderás a crear, renderizar y optimizar tu propio sitio paso a paso.
      </p>
    </main>
  );
}

Ahora abre http://localhost:3000/about y verás tu nueva página funcionando correctamente.

🔗 Navegación entre páginas con `Link`

Para navegar entre páginas sin recargar el sitio, Next.js usa el componente Link del paquete next/link.

Edita tu app/page.tsx y agrega un enlace a la página “Acerca de”:

import Link from 'next/link';

export default function Home() {
  return (
    <main className="flex flex-col items-center justify-center min-h-screen">
      <h1 className="text-4xl font-bold text-blue-600">
        ¡Bienvenido a mi Blog con Next.js!
      </h1>
      <Link href="/about" className="text-blue-500 underline mt-4">
        Ir a la página Acerca de
      </Link>
    </main>
  );
}

Ahora puedes navegar entre tus páginas sin recargar la aplicación 💫.

⚙️ Creando un componente reutilizable

Vamos a crear un componente de encabezado para usar en todas las páginas.

Dentro de app/, crea una carpeta llamada components y dentro un archivo Header.tsx:

import Link from 'next/link';

export default function Header() {
  return (
    <header className="bg-blue-600 text-white p-4 text-center">
      <h1 className="text-xl font-bold">Mi Blog con Next.js</h1>
      <nav className="mt-2">
        <Link href="/" className="mx-2 hover:underline">Inicio</Link>
        <Link href="/about" className="mx-2 hover:underline">Acerca</Link>
      </nav>
    </header>
  );
}

Ahora importa este componente en app/layout.tsx:

import './globals.css'
import Header from './components/Header'

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

¡Y listo! Ahora el encabezado aparecerá en todas tus páginas 🎉

🎨 Aplicando estilos con Tailwind CSS

Si seleccionaste Tailwind CSS durante la creación del proyecto, puedes usar sus clases directamente como lo hemos hecho arriba. Si no lo hiciste, puedes agregarlo más adelante con:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

💡 Consejo: Crea siempre tus páginas dentro de app/ y organiza tus componentes en una carpeta separada. Esto te ayudará a mantener tu proyecto limpio y escalable.

← Volver al índice

🧩 Creación de la primera página y componentes básicos