Next.js

Next.js es un framework para React. Aprende más sobre Next.js en https://nextjs.org. Esta guía es precisa a partir de Next.js 13.4.19.

Checklist

• Usa exports estáticos estableciendo output: 'export'. Tauri no soporta soluciones basadas en el servidor.
• Usa out/ como distDir en tauri.conf.json.

Ejemplo de Configuración

1. Actualiza la configuración de Tauri:

npm

tauri.conf.json

{
  "build": {
    "beforeDevCommand": "npm run dev",
    "beforeBuildCommand": "npm run build",
    "devPath": "http://localhost:3000",
    "distDir": "../dist"
  }
}

yarn

tauri.conf.json

{
  "build": {
    "beforeDevCommand": "yarn dev",
    "beforeBuildCommand": "yarn generate",
    "devPath": "http://localhost:3000",
    "distDir": "../dist"
  }
}

pnpm

tauri.conf.json

{
  "build": {
    "beforeDevCommand": "pnpm dev",
    "beforeBuildCommand": "pnpm generate",
    "devPath": "http://localhost:3000",
    "distDir": "../dist"
  }
}

2. Actualiza la configuración de Next.js:

next.conf.ts

const isProd = process.env.NODE_ENV === 'production';
module.exports = async (phase, { defaultConfig }) => {
  // En modo de desarrollo usamos TAURI_DEV_HOST para servir los archivos si es necesario
  const internalHost = process.env.TAURI_DEV_HOST || 'localhost';
  const nextConfig = {
    // Aségurate de que Next.js use SSG en lugar de SSR
    // https://nextjs.org/docs/pages/building-your-application/deploying/static-exports
    output: 'export',
    // Nota: Esta función experimental es necesaria para usar NextJS Image en modo SSG.
    // Consulta https://nextjs.org/docs/messages/export-image-api para ver diferentes soluciones.
    images: {
      unoptimized: true,
    },
    // Configura assetPrefix o el servidor no resolverá correctamente tus archivos.
    assetPrefix: isProd ? null : `http://${internalHost}:3000`,
  };
  return nextConfig;
};