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. 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

   src-tauri/tauri.conf.json

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

   yarn

   src-tauri/tauri.conf.json

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

   pnpm

   src-tauri/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;

4. Update package.json configuration

   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
     "tauri": "tauri"
   }