Proyecto de Ejemplo Next.js con Material-UI

Este proyecto es una demostración de varias características de Next.js 13+ y Material-UI, incluyendo ejemplos de Client-Side Rendering (CSR), Server-Side Rendering (SSR), API Routes, y más.

Estructura del Proyecto

src/
└── app/
    ├── api/
    ├── components/
    ├── dashboard/
    ├── forms/
    ├── landing/
    ├── posts/
    ├── status/
    └── users/

Componentes Principales

• components/: Contiene componentes reutilizables y ejemplos de formularios.
• api/: Contiene las API Routes, incluyendo un endpoint de estado del sistema.
• dashboard/: Página de dashboard con ejemplo de data fetching paralelo.
• forms/: Página con ejemplos de diferentes tipos de formularios.
• landing/: Página de aterrizaje de ejemplo.
• posts/: Ejemplo de SSR con manejo de errores.
• status/: Página que consume la API de estado del sistema.
• users/: Ejemplo de ruta dinámica con generación de metadatos.

Ejemplos Destacados

1. Client-Side Rendering (CSR): Ver components/UserList.tsx
2. Server-Side Rendering (SSR): Ver posts/page.tsx
3. API Routes: Ver api/status/route.ts
4. Formularios con React Hook Form y Zod: Ver components/sampleForms/
5. Revalidación y Caching: Ejemplos en varios componentes
6. Uso de Material-UI: Implementado en todos los componentes

Cómo Ejecutar el Proyecto

1. Instala las dependencias:

   npm install
   

2. Ejecuta el servidor de desarrollo:

   npm run dev
   

3. Abre http://localhost:3000 en tu navegador.

Navegación

La página principal (/page.tsx) contiene enlaces a los diferentes ejemplos y componentes del proyecto. Explora cada sección para ver demostraciones de las diferentes características de Next.js y Material-UI.