Bug report: Styles not loading when Next.js runs under Apache subfolder with WordPress root

[MkeyhaniM]

Link to the code that reproduces this issue

https://github.com/MkeyhaniM/nextjs-apache-deplay-issue

To Reproduce

1. Set up an Apache server with WordPress at the root (https://example.com/) and Next.js proxied under a subfolder (https://example.com/projects/tickets).
2. Build the Next.js app with:

npm run build
npm run start

3. Access the Next.js app at:
   https://example.com/projects/tickets
4. Observe that:
   The page HTML renders.
   Requests to /_next/static/... return responses, but the content is incorrect (HTML instead of CSS/JS).
   As a result, styles are not applied and the page renders unstyled.
5. Navigate to a non-existent route (e.g. https://example.com/projects/tickets/does-not-exist) and note that the Next.js 404 page does load styles correctly.

Notes

Screenshots can be added showing the browser console with 404s or incorrect asset responses.
Syntax highlighting for code blocks should be set to apache for VirtualHost config and bash for commands.

Current vs. Expected behavior

Next.js styles and static assets fail to load when deployed under Apache subfolder with WordPress root

Description
I am deploying a Next.js application alongside WordPress on the same Apache server. WordPress runs at the root domain (https://example.com/), and Next.js is mounted under a subfolder (https://example.com/projects/tickets).

In production, the Next.js pages render but CSS styles do not load at all. The browser downloads the files, but they contain incorrect content (often HTML from WordPress). As a result, the page renders completely unstyled

Interestingly, the Next.js 404 page loads styles correctly, which suggests the issue is related to Apache rewriting and not the Next.js build itself.

Steps to Reproduce

1. Configure Apache VirtualHost with WordPress at root and Next.js proxied under /projects/tickets.
2. Build Next.js with npm run build and run with npm run start.
3. Access https://example.com/projects/tickets
4. Observe that CSS/JS files under /_next/static/... are downloaded but styles are not applied.

Current vs Expected Behavior

• Current: Assets are downloaded but contain incorrect content (HTML instead of CSS/JS). Styles are not applied, so the page renders unstyled.
• Expected: Assets should be served correctly from Next.js and styles should load and apply to the page.

Apache Configuration
Here is the exact VirtualHost configuration I am using (with domain anonymized to example.com):

<VirtualHost 192.0.2.10:80>
    SuexecUserGroup "#1000" "#1000"
    ServerName example.com
    ServerAlias www.example.com mail.example.com webmail.example.com admin.example.com
    DocumentRoot /home/example/public_html

    ProxyPreserveHost On
    ProxyRequests Off

    ProxyPass /projects/tickets/ http://127.0.0.1:3000/
    ProxyPassReverse /projects/tickets/ http://127.0.0.1:3000/
    ProxyPass /_next/static/ http://127.0.0.1:3000/_next/static/
    ProxyPassReverse /_next/static/ http://127.0.0.1:3000/_next/static/
    ProxyPass /fonts/ http://127.0.0.1:3000/fonts/
    ProxyPassReverse /fonts/ http://127.0.0.1:3000/fonts/
    ProxyPass /_next/image/ http://127.0.0.1:3000/_next/image/
    ProxyPassReverse /_next/image/ http://127.0.0.1:3000/_next/image/
    ProxyPass /opus-recorder/ http://127.0.0.1:3000/opus-recorder/
    ProxyPassReverse /opus-recorder/ http://127.0.0.1:3000/opus-recorder/

    RequestHeader set X-Forwarded-Proto "https"
    RequestHeader set X-Forwarded-Port "443"

    ErrorLog /var/log/apache2/example-error.log
    CustomLog /var/log/apache2/example-access.log combined
    DirectoryIndex index.php index.html
    <Directory /home/example/public_html>
        Options -Indexes +IncludesNOEXEC +SymLinksIfOwnerMatch 
        Require all granted
        AllowOverride All
    </Directory>
</VirtualHost>

<VirtualHost 192.0.2.10:443>
    SuexecUserGroup "#1000" "#1000"
    ServerName example.com
    ServerAlias www.example.com mail.example.com webmail.example.com admin.example.com
    DocumentRoot /home/example/public_html

    ProxyPreserveHost On
    ProxyRequests Off

    ProxyPass /projects/tickets/ http://127.0.0.1:3000/
    ProxyPassReverse /projects/tickets/ http://127.0.0.1:3000/
    ProxyPass /_next/static/ http://127.0.0.1:3000/_next/static/
    ProxyPassReverse /_next/static/ http://127.0.0.1:3000/_next/static/
    ProxyPass /fonts/ http://127.0.0.1:3000/fonts/
    ProxyPassReverse /fonts/ http://127.0.0.1:3000/fonts/
    ProxyPass /_next/image/ http://127.0.0.1:3000/_next/image/
    ProxyPassReverse /_next/image/ http://127.0.0.1:3000/_next/image/
    ProxyPass /opus-recorder/ http://127.0.0.1:3000/opus-recorder/
    ProxyPassReverse /opus-recorder/ http://127.0.0.1:3000/opus-recorder/

    RequestHeader set X-Forwarded-Proto "https"
    RequestHeader set X-Forwarded-Port "443"

    ErrorLog /var/log/apache2/example-error.log
    CustomLog /var/log/apache2/example-access.log combined

    SSLEngine on
    SSLCertificateFile /etc/ssl/example/ssl.cert
    SSLCertificateKeyFile /etc/ssl/example/ssl.key
    SSLCACertificateFile /etc/ssl/example/ssl.ca
</VirtualHost>

Additional Observations
The issue does not occur when running Next.js alone (without Apache/WordPress).
The issue does not occur on Netlify or Vercel.
Adding [NE] flag to RewriteRule helps with percent-encoded dynamic routes (%5Bid%5D), but CSS/JS styles still fail under subfolder deployment.
I cannot use basePath in next.config.js due to multi-project constraints.

Question:
Is there a recommended configuration for running Next.js under a subfolder with Apache (while WordPress is at root)?
How can I ensure that /_next/static/... assets are proxied correctly and styles are applied, instead of being intercepted by DocumentRoot?

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: Ubuntu (Cloudways stack)

Binaries:
  Node: 24.0.2
  npm: 11.0.2
  Yarn: not installed
  pnpm: not installed

Relevant Packages:
  next: 15.5.7
  eslint-config-next: N/A
  react: ^19.0.0
  react-dom: ^19.0.0

Which area(s) are affected? (Select all that apply)

CSS

Which stage(s) are affected? (Select all that apply)

Other (Deployed)

Additional context

The application is deployed on Cloudways (Ubuntu stack) with Apache + Nginx.
WordPress runs at the root domain (https://example.com/), and Next.js is proxied under a subfolder (https://example.com/projects/tickets).
The issue only occurs in production when served through Apache/Nginx.
On Netlify and Vercel, the same build works correctly (styles load as expected).
Locally (npm run dev and npm run start), everything works fine.
The problem is reproducible across browsers (tested on Chrome and Firefox latest).
In the Network tab, CSS files are requested and downloaded successfully, and in the rendered HTML all tags for styles are present. However, styles are not applied to the page.
Adding [NE] flag to RewriteRule fixes percent-encoded dynamic routes (%5Bid%5D), but does not solve the CSS/JS style issue.
I cannot use basePath in next.config.js due to multi-project constraints.

[icyJoseph]

Hi,

I kind of want to move this to a discussion for now. Do you have an .htaccess file? I wonder if there some rule there taking over the _next/static requests. What's the payload of the failed requests?

[MkeyhaniM]

Thanks for pointing that out — you’re right, this may not be a Next.js bug itself and I hadn’t realized that before.
To clarify:

• We do use an .htaccess file in our setup.
• In the browser’s Network tab, the CSS files are indeed being requested and returned correctly. For example:
  b768cd3c08ab615c.css

These files are also injected into the page head as expected:

<link rel="preload" href="/_next/static/css/b768cd3c08ab615c.css">
<link rel="stylesheet" href="/_next/static/css/b768cd3c08ab6157c.css">

However, the styles are still not applied. After a few seconds, the browser console sometimes shows this warning:

The resource https://noavarpub.com/_next/static/css/b768cd3c08ab615c.css 
was preloaded using link preload but not used within a few seconds from the window's load event. 
Please make sure it has an appropriate as value and it is preloaded intentionally.

So even though the CSS file is fetched and linked, the styles are not applied to the page.
Thanks again for taking the time to look into this and guide me — I really appreciate it.

[icyJoseph]

Mmm did you manually edit this?

c08ab615c.css
c08ab6157c.css

I mean technically, you preload one thing, and then download another... that explains that warning you see.

In the browser’s Network tab, the CSS files are indeed being requested and returned correctly

I don't believe that. What are the response headers and contents? Content-Type header, etc, is it CSS rules coming down on that file?

This still sounds like a .htaccess file rule that's gone wrong, or even worse some path rewrites? That 15c.css to 157c.css is really weird.

[MkeyhaniM]

Title: CSS build size mismatch between local and server environments

Hi, I just rebuilt my project and deployed it again. Here are the outputs from my host environment.

I recently noticed a problem:

• When I build locally, the generated CSS file is about 44 KB.
• When I build on the server, the same CSS file is only around 13 KB.
• After comparing them, I can see they are not equal at all — the local file is roughly 5× larger than the one generated on the server.

This difference explains why styles are missing in production.
Additional context:

• I develop the project locally using pnpm.
• On the server, I run the project using npm.

So the build outputs are inconsistent between environments, and I suspect this mismatch in package managers or dependency resolution may be related.
Thanks again for your reply and for taking the time to look into this — I really appreciate your guidance.

[icyJoseph]

I'll move this to a discussion item for now:

• No proper reproduction repository, and
• looks like this is more of an environment problem, rather than Next.js