Multi-domain Next.js application with dynamic basePath - Asset loading issues

[FKuna]

Summary

Need to run a single Next.js application across multiple domains with different basePaths, but assets are not loading correctly due to incorrect asset paths that don't include the required basePath segment.

Current Setup

Project structure: app/[locale]/[basePath]/page.tsx
Target domains:

cucumber.com/apple
pepper.de/pear
watermelon.cz/tomato

Requirements: Single Next.js app serving multiple domains with dynamic data fetching based on domain

Problem Description

Current Issue
When deploying the Next.js application to production domains, assets fail to load because:

• Asset paths are generated as cucumber.com/_next/...
• But the actual accessible path should be cucumber.com/apple/_next/...
• The base domain (cucumber.com) is not accessible for us - only the full path with basePath (cucumber.com/apple)

Current Project Structure

app/
  [locale]/
    [basePath]/
      page.tsx

Where:

• [locale] determines the website language
• [basePath] determines the path segment after the slash (apple, pear, tomato)

Considered Solutions

Option 1: Using Next.js basePath config

Implementation: Set basePath in next.config.js for each domain
Required changes:

• Restructure to app/[locale]/page.tsx
• Create separate Next.js applications for each domain
• Individual .env files with basePath variables (/apple, /pear, /tomato)

Concerns with Option 1

Maintainability: Managing 14+ separate Next.js applications (with more being added)
Debugging complexity: Difficult to identify which instance is causing build errors
Scaling issues: Adding new domains requires new deployments and configurations

Questions

1. Is there a way to dynamically set basePath at runtime instead of build time?
2. Can asset paths be modified to include the basePath segment without creating separate apps?
3. Are there alternative approaches to serve a single Next.js app across multiple domains with different basePaths?
4. Has anyone solved similar multi-tenant scenarios with Next.js?

Expected Behavior

• Single Next.js application serving multiple domains
• Assets load correctly with proper basePath included in URLs
• Dynamic content fetching based on domain
• Maintainable solution for 14+ domains

Additional information

No response

Example

No response

[SametDulger]

Serve multiple domains on one app --> Use domain-based routing or basePath via rewrites
Asset paths fail due to basePath --> Avoid basePath, use rewrites and relative paths
Need runtime flexibility --> Use middleware + headers/context
Want to avoid 14+ apps --> Use a single app with rewrites and modular structure