Skip to content
Tauri
Releases

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 install --save-dev internal-ip@7.0.0
  1. Update Tauri configuration:
tauri.conf.json
{
"build": {
"beforeDevCommand": "npm run dev",
"beforeBuildCommand": "npm run build",
"devUrl": "http://localhost:3000",
"frontendDist": "../dist"
}
}
  1. 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;

© 2024 Tauri Contributors. CC-BY / MIT