← Volver al listado de tecnologías ← Índice de Vinext

Instalación y Primer Proyecto

25 de febrero de 2025 Por: Artiko

vinextinstalacionvitesetup

Requisitos previos

Node.js 18+ (recomendado 20+)
React 19.2+ (Vinext requiere React 19 para RSC)
Un package manager: npm, pnpm o bun

Crear proyecto nuevo (App Router)

Crea la estructura del proyecto e instala las dependencias:

mkdir mi-app && cd mi-app
npm init -y
npm install react react-dom vinext vite @vitejs/plugin-rsc

Estructura de archivos

mi-app/
  app/
    layout.tsx        # Layout raíz
    page.tsx          # Página principal
  package.json
  tsconfig.json
  vite.config.ts

vite.config.ts

import { defineConfig } from "vite";
import vinext from "vinext";

export default defineConfig({
  plugins: [vinext()],
});

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "paths": { "@/*": ["./*"] }
  },
  "include": ["**/*.ts", "**/*.tsx"]
}

app/layout.tsx

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="es">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Mi App Vinext</title>
      </head>
      <body>{children}</body>
    </html>
  );
}

app/page.tsx

export default function HomePage() {
  return (
    <main>
      <h1>Hola desde Vinext</h1>
      <p>Renderizado en el servidor: {new Date().toISOString()}</p>
    </main>
  );
}

Scripts en package.json

{
  "type": "module",
  "scripts": {
    "dev": "vinext dev",
    "build": "vinext build",
    "start": "vinext start"
  }
}

Crear proyecto (Pages Router)

Para Pages Router, la estructura es más simple y no necesita el plugin RSC:

mkdir mi-app-pages && cd mi-app-pages
npm init -y
npm install react react-dom vinext vite

Estructura

mi-app-pages/
  pages/
    index.tsx         # Página principal
    api/
      hello.ts        # API route
  vite.config.ts
  package.json

vite.config.ts (Pages Router)

import { defineConfig } from "vite";
import vinext from "vinext";

export default defineConfig({
  plugins: [vinext()],
});

No necesitas @vitejs/plugin-rsc — Vinext detecta automáticamente si usas app/ o pages/.

Servidor de desarrollo

npm run dev

El servidor arranca en http://localhost:3000 con HMR habilitado. Vinext ofrece las mismas opciones de CLI que Next.js:

vinext dev --port 4000          # Puerto custom
vinext dev --hostname 0.0.0.0   # Accesible en red local

La opción --turbopack es aceptada pero es un no-op — Vite ya proporciona HMR instantáneo.

Comandos CLI

Comando	Descripción
`vinext dev`	Servidor de desarrollo con HMR
`vinext build`	Build de producción
`vinext start`	Servidor local de producción
`vinext deploy`	Build + deploy a Cloudflare Workers
`vinext check`	Evaluar compatibilidad de un proyecto Next.js
`vinext init`	Migrar proyecto Next.js existente
`vinext lint`	Delegar a eslint u oxlint

Verificar que funciona

Después de npm run dev, abre http://localhost:3000. Deberías ver tu página con el timestamp del servidor, confirmando que SSR funciona correctamente.

Cada recarga muestra un timestamp diferente — la página se renderiza en el servidor en cada request.

Siguiente paso

En el siguiente capítulo exploraremos el Pages Router: file-system routing, rutas dinámicas y data fetching con getServerSideProps.