nextjs - 💡(How to fix) Fix Bug report: Styles not loading when Next.js runs under Apache subfolder with WordPress root [5 comments, 2 participants]

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

1. Access the Next.js app at: https://example.com/projects/tickets
2. 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.
3. 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 <head> all <link> 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.