Next.js

Next.js is a React framework. 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. Install internal-ip version 7 for mobile development. Version 8.0.0 does not work!

npm

npm install --save-dev internal-ip@7.0.0

Yarn

yarn add -D internal-ip@7.0.0

pnpm

pnpm add -D internal-ip@7.0.0

2. Update Tauri configuration:

npm

tauri.conf.json

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

yarn

tauri.conf.json

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

pnpm

tauri.conf.json

{
  "build": {
    "beforeDevCommand": "pnpm dev",
    "beforeBuildCommand": "pnpm generate",
    "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;