Primeros pasos

Creando un nuevo proyecto

Recomendamos usar pnpm como gestor de paquetes, ya que es más rápido y eficiente que npm o yarn. Si no tienes pnpm instalado, puedes instalarlo globalmente ejecutando:

npm install -g pnpm

Para crear una aplicación Next.js, abre tu terminal, navega con cd a la carpeta donde deseas guardar tu proyecto y ejecuta el siguiente comando:

npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm

Este comando utiliza create-next-app, una herramienta de interfaz de línea de comandos (CLI) que configura una aplicación Next.js por ti. En el comando anterior, también estás usando la bandera --example con el ejemplo inicial para este curso.

Explorando el proyecto

A diferencia de los tutoriales donde escribes código desde cero, gran parte del código para este curso ya está escrito. Esto refleja mejor el desarrollo en el mundo real, donde probablemente trabajarás con bases de código existentes.

Nuestro objetivo es ayudarte a enfocarte en aprender las principales características de Next.js, sin tener que escribir todo el código de la aplicación.

Después de la instalación, abre el proyecto en tu editor de código y navega a nextjs-dashboard.

cd nextjs-dashboard

Dediquemos un tiempo a explorar el proyecto.

Estructura de carpetas

Notarás que el proyecto tiene la siguiente estructura de carpetas:

• /app: Contiene todas las rutas, componentes y lógica para tu aplicación, aquí es donde trabajarás principalmente.
• /app/lib: Contiene funciones utilizadas en tu aplicación, como funciones utilitarias reutilizables y funciones para obtener datos.
• /app/ui: Contiene todos los componentes de interfaz de usuario para tu aplicación, como tarjetas, tablas y formularios. Para ahorrar tiempo, hemos pre-estilizado estos componentes por ti.
• /public: Contiene todos los recursos estáticos para tu aplicación, como imágenes.
• Archivos de configuración: También notarás archivos de configuración como next.config.ts en la raíz de tu aplicación. La mayoría de estos archivos se crean y configuran automáticamente cuando inicias un nuevo proyecto con create-next-app. No necesitarás modificarlos en este curso.

Siéntete libre de explorar estas carpetas, y no te preocupes si no entiendes todo lo que hace el código todavía.

Datos de ejemplo

Cuando construyes interfaces de usuario, es útil tener algunos datos de ejemplo. Si una base de datos o API no está disponible aún, puedes:

• Usar datos de ejemplo en formato JSON o como objetos JavaScript.
• Usar un servicio de terceros como mockAPI.

Para este proyecto, hemos proporcionado algunos datos de ejemplo en app/lib/placeholder-data.ts. Cada objeto JavaScript en el archivo representa una tabla en tu base de datos. Por ejemplo, para la tabla de facturas:

const invoices = [
  {
    customer_id: customers[0].id,
    amount: 15795,
    status: 'pending',
    date: '2022-12-06',
  },
  {
    customer_id: customers[1].id,
    amount: 20348,
    status: 'pending',
    date: '2022-11-14',
  },
  // ...
];

En el capítulo sobre configuración de tu base de datos, usarás estos datos para sembrar tu base de datos (poblarla con algunos datos iniciales).

TypeScript

También puedes notar que la mayoría de los archivos tienen la extensión .ts o .tsx. Esto se debe a que el proyecto está escrito en TypeScript. Queríamos crear un curso que refleje el panorama web moderno.

No hay problema si no conoces TypeScript - proporcionaremos los fragmentos de código TypeScript cuando sean necesarios.

Por ahora, revisa el archivo /app/lib/definitions.ts. Aquí, definimos manualmente los tipos que serán devueltos desde la base de datos. Por ejemplo, la tabla de facturas tiene los siguientes tipos:

export type Invoice = {
  id: string;
  customer_id: string;
  amount: number;
  date: string;
  // En TypeScript, esto se llama tipo de unión de cadenas.
  // Significa que la propiedad "status" solo puede ser una de las dos cadenas: 'pending' o 'paid'.
  status: 'pending' | 'paid';
};

Al usar TypeScript, puedes asegurarte de no pasar accidentalmente el formato de datos incorrecto a tus componentes o base de datos, como pasar un string en lugar de un number al amount de una factura.

Si eres desarrollador de TypeScript:

• Estamos declarando manualmente los tipos de datos, pero para mayor seguridad de tipos, recomendamos Prisma o Drizzle, que generan automáticamente tipos basados en el esquema de tu base de datos.
• Next.js detecta si tu proyecto usa TypeScript e instala automáticamente los paquetes y configuración necesarios. Next.js también incluye un plugin de TypeScript para tu editor de código, para ayudar con el autocompletado y la seguridad de tipos.

Ejecutando el servidor de desarrollo

Ejecuta pnpm i para instalar los paquetes del proyecto.

pnpm i

Luego ejecuta pnpm dev para iniciar el servidor de desarrollo.

pnpm dev

pnpm dev inicia tu servidor de desarrollo Next.js en el puerto 3000. Verifiquemos si está funcionando.

Abre http://localhost:3000 en tu navegador. Tu página de inicio debería verse así, intencionalmente sin estilos: