Skip to content
Tauri

Next.js

Next.js is a meta framework for React. Learn more about Next.js at https://nextjs.org. This guide is accurate as of Next.js 14.2.3.

Checklist

  • Use static exports by setting output: 'export'. Tauri doesn’t support server-based solutions.
  • Use internal-ip for mobile compatibility so you can configure assetPrefix. This is required so that the server properly resolves assets.
  • Use out/ as frontendDist in tauri.conf.json.

Example Configuration

  1. Version 8.0.0 does not work!

    npm install --save-dev internal-ip@7.0.0
  2. src-tauri/tauri.conf.json
    {
    "build": {
    "beforeDevCommand": "npm run dev",
    "beforeBuildCommand": "npm run build",
    "devUrl": "http://localhost:3000",
    "frontendDist": "../dist"
    }
    }
  3. Update Next.js configuration
    next.conf.mjs
    /** @type {import('next').NextConfig} */
    const isProd = process.env.NODE_ENV === 'production';
    let internalHost = null;
    if (!isProd) {
    const { internalIpV4 } = await import('internal-ip');
    internalHost = await internalIpV4();
    }
    const nextConfig = {
    // Ensure Next.js uses SSG instead of SSR
    // https://nextjs.org/docs/pages/building-your-application/deploying/static-exports
    output: 'export',
    // Note: This feature is required to use the Next.js Image component in SSG mode.
    // See https://nextjs.org/docs/messages/export-image-api for different workarounds.
    images: {
    unoptimized: true,
    },
    // Configure assetPrefix or else the server won't properly resolve your assets.
    assetPrefix: isProd ? null : `http://${internalHost}:3000`,
    };
    export default nextConfig;
  4. Update package.json configuration
    "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "tauri": "tauri"
    }

© 2024 Tauri Contributors. CC-BY / MIT