Tutorial para desplegar un sitio estático con Next.js en Vercel y conectar con Stripe

1. Requisitos previos

• Node.js (versión >=14) instalado en tu máquina.
• Cuenta en GitHub (o similar) para controlar versiones.
• Cuenta en Vercel para desplegar tu proyecto.
• Cuenta en Stripe para obtener tus claves de API.
• Editor de código moderno (por ejemplo, VSCode).

2. Inicialización del proyecto Next.js

1. Crear la aplicación:

   npx create-next-app@latest mi-sitio-estatico --typescript

2. Navegar al directorio:

   cd mi-sitio-estatico

3. Eliminar funcionalidades SSR:

   Next.js genera rutas estáticas si tus páginas exportan getStaticProps o no usan getServerSideProps. Para un sitio 100% estático, asegúrate de no utilizar funciones de servidor.

3. Estructura del sitio

Organiza tu carpeta pages para definir rutas estáticas:

mi-sitio-estatico/
├─ pages/
│  ├─ index.tsx       ← Página de inicio
│  ├─ about.tsx       ← Página de “Acerca de”
│  └─ products/
│     ├─ index.tsx    ← Catálogo de productos
│     └─ [id].tsx     ← Detalle de producto (generado estáticamente)
└─ public/            ← Archivos estáticos (imágenes, icons)

Ejemplo de getStaticProps en pages/products/index.tsx:

import { GetStaticProps } from next

export const getStaticProps: GetStaticProps = async () =gt {
  const products = await fetch(https://api.example.com/products).then(res =gt res.json())
  return { props: { products } }
}

export default function Products({ products }) {
  return (
    ltdivgt
      lth2gtCatálogo de productoslt/h2gt
      ltulgt
        {products.map(p =gt (
          ltli key={p.id}gt{p.name} - {p.price}lt/ligt
        ))}
      lt/ulgt
    lt/divgt
  )
}

4. Configuración para despliegue en Vercel

Vercel detecta automáticamente proyectos Next.js. Sigue estos pasos:

1. Inicia sesión en Vercel y haz click en New Project.
2. Conecta tu repositorio de GitHub donde resides el proyecto.
3. En Framework Preset selecciona Next.js (se detectará automáticamente).
4. En Build amp Output Settings deja los valores por defecto (npm run build y out/ si es export).
5. Despliega haciendo click en Deploy.

Vercel generará una URL en unos segundos con tu sitio estático optimizado y listo para producción.

5. Integración con Stripe

Stripe ofrece una API sencilla para gestionar pagos. Configuraremos un botón de pago que redirija al Checkout de Stripe.

5.1 Instalación del SDK

npm install stripe @stripe/stripe-js

5.2 Claves de API y variables de entorno

En tu panel de Stripe obtén:

Variable	Descripción
STRIPE_SECRET_KEY	Clave secreta (Secret Key) para llamadas desde tu servidor.
NEXT_PUBLIC_STRIPE_PUBLIC_KEY	Clave pública (Publishable Key) para el cliente.

Define estas variables en tu archivo .env.local:

STRIPE_SECRET_KEY=sk_test_xxx
NEXT_PUBLIC_STRIPE_PUBLIC_KEY=pk_test_xxx

5.3 Creando el endpoint de Checkout

En pages/api/checkout_sessions.ts:

import Stripe from stripe
import { NextApiRequest, NextApiResponse } from next

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY as string, {
  apiVersion: 2022-11-15,
})

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === POST) {
    try {
      const { priceId } = req.body
      const session = await stripe.checkout.sessions.create({
        mode: payment,
        payment_method_types: [card],
        line_items: [{ price: priceId, quantity: 1 }],
        success_url: {req.headers.origin}/successsession_id={CHECKOUT_SESSION_ID},
        cancel_url: {req.headers.origin}/cancel,
      })
      res.status(200).json({ sessionId: session.id })
    } catch (err) {
      res.status(500).json({ error: Error en la creación de la sesión de pago. })
    }
  } else {
    res.setHeader(Allow, POST)
    res.status(405).end(Method Not Allowed)
  }
}

5.4 Botón de pago en el cliente

En tu componente React (por ejemplo, components/CheckoutButton.tsx):

import { loadStripe } from @stripe/stripe-js
import React from react

const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY as string)

export default function CheckoutButton({ priceId }: { priceId: string }) {
  const handleCheckout = async () =gt {
    const stripe = await stripePromise
    const res = await fetch(/api/checkout_sessions, {
      method: POST,
      headers: { Content-Type: application/json },
      body: JSON.stringify({ priceId }),
    })
    const { sessionId } = await res.json()
    await stripe.redirectToCheckout({ sessionId })
  }

  return (
    ltbutton
      style=background:#111 color:#fff padding:12px 24px border:none border-radius:4px cursor:pointer
      onClick={handleCheckout}
    gtPagar ahoralt/buttongt
  )
}

6. Pruebas y validación

Antes de desplegar en producción:

• Verifica que tus precios en Stripe sean correctos (USD, EUR, etc.).
• Utiliza tarjetas de prueba de Stripe (por ejemplo, 4242 4242 4242 4242).
• Revisa la consola de errores en Vercel y Stripe Dashboard.

7. Despliegue final y optimizaciones

Una vez comprobado el flujo de pago:

1. Configura las variables de entorno en Vercel (en Project Settings gt Environment Variables), usando las claves en modo production.
2. Despliega tu proyecto desde la rama principal (main o master).
3. Habilita Vercel Analytics para medir el rendimiento y los errores.
4. Activa Stripe Webhooks si necesitas notificaciones de eventos (por ejemplo, pagos completados).

8. Buenas prácticas y recomendaciones

• Seguridad: Nunca expongas tu Secret Key en el cliente.
• Optimización: Usa next/image para optimizar imágenes.
• Accesibilidad: Añade atributos aria y textos alternativos.
• SEO: Define metadatos y Open Graph en cada página.
• Versionado: Mantén tu package.json actualizado y revisa los changelogs.

9. Recursos adicionales

• Documentación oficial de Next.js
• Guía de despliegue en Vercel
• Documentación de Stripe