Blank Pages and Asset 404s When Unifying Multiple Domains in Next.js

Help
,
1

I have multiples applications and I want unify the domains, https://app.example.com written with react the rest with next js https://blog.example.com, https://other.example.com and https://example the main application.

I want to access these using a unique domain: https://example.com/[app|other|...|blog]/:path* but the configurations are not working. I inspect and I notice that the applications are being requested but the pages is blanck and on console I got the error:

GET http://localhost:3007/assets/index-d470242f.css net::ERR_ABORTED 404 (Not Found)Understand this errorAI app:24

GET http://localhost:3007/assets/index-02ba1c9a.js net::ERR_ABORTED 404 (Not Found) app:25

My configurations

/* eslint-disable @typescript-eslint/no-require-imports */
/** @type {import('next').NextConfig} */
const nextTranslate = require("next-translate-plugin");

const i18n = nextTranslate();

const nextConfig = {
  compress: false,
  reactStrictMode: true,
  async rewrites() {
    return [
      {
        source: "/app",
        destination: "https://app.example.com/",
      },
      {
        source: "/blog",
        destination: "http://blog.example.com/",
      },
      // Add more rewrites as needed
    ];
  },
  ...i18n,
};

module.exports = nextConfig;
2

There’s another community post with 404 debugging tips that might be helpful. Please give these solutions a try and let us know how it goes.

A human should be around soon to offer more advice. But you can also get helpful information quickly by asking v0.