How to Set Up Next.js as the Default Page Instead of WordPress Content on an Apache Server?

I have a server setup with Apache on Ubuntu, where I'm running both a Next.js application and a WordPress site. The WordPress installation is located in /var/www/html/wordpress, and the Next.js application is in /var/www/html/personal. My goal is to configure the server so that the Next.js application serves as the default page, while keeping WordPress accessible as well.

I have successfully deployed the Next.js application using PM2, and it is running without any issues or errors.

Here's what I've tried so far:

Apache Configuration:I have modified the Apache configuration files to point to the Next.js application as the default site. My configuration file (/etc/apache2/sites-available/example.com.conf) looks like this:

<VirtualHost *:80>

ServerName example.com

DocumentRoot /var/www/html/personal

<Directory /var/www/html/personal>

Options Indexes FollowSymLinks

AllowOverride All

Require all granted

</Directory>

ProxyPass / http://localhost:3000/

ProxyPassReverse / http://localhost:3000/ErrorLog ${APACHE_LOG_DIR}/error.log

CustomLog ${APACHE_LOG_DIR}/access.log combined

</VirtualHost>

**.htaccess Configuration:**In the WordPress .htaccess file (/var/www/html/wordpress/.htaccess), I added the following rules to exclude the Next.js application from being processed by WordPress:

# BEGIN WordPress

<IfModule mod_rewrite.c>

RewriteEngine On

RewriteBase /

# Do not process requests for Next.js app

RewriteCond %{REQUEST_URI} !^/personal/

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^(.*)$ /wp-admin/index.php [L]

</IfModule>

# END WordPress

**Permissions:**I ensured that the Next.js folder and files have the correct permissions:sudo

chown -R www-data:www-data /var/www/html/personal

sudo chmod -R 755 /var/www/html/personal

Service Status:The Next.js application is running and accessible at http://localhost:3000, but it does not seem to replace the WordPress content on the main domain (example.com).

Questions:

• Are there any additional Apache configuration settings needed to ensure that Next.js serves as the default page?
• Is there something missing in the .htaccess file that might be causing the issue?
• How can I verify that the Apache proxy settings are correctly routing requests to the Next.js application?