Statically served NextJS website is adding a trailing slash on page refresh - .htaccess

Question

I have a NextJS website statically served on an apache server and using an .htaccess file to setup the routing rules etc. This files looks like this
Options +FollowSymLinks
RewriteEngine On
RewriteCond %{ENV:HTTPS} !=on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^([^/]+)/$ $1.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^/]+)/$ $1.html
RewriteRule ^([^/]+)/([^/]+)/$ /$1/$2.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !(\.[a-zA-Z0-9]{1,5}|/)$
RewriteRule (.*)$ /$1/ [L,R=301]
</IfModule>
The problem I'm facing:
My internal links look like example.com/page-1, so when I redirect from example.com to example.com/page-1 everything is working well.
But when I target this page directly from it's URL or reload the page the server is adding a extra trailing slash to the URL. e.g. example.com/page-1/
This causes duplicate content within search engines /
What I'm looking for:
I'm looking for a solution in my .htaccess that prevents the server from adding a trailing slash on reloading the page. But URL's like example.com/about/page-1 should keep working.

Answer 1

I found a solution for my own problem. The problem was causes because I copied this .htaccess from an old React project where it was supporting the react-router.
Within my NextJS project I only had to remove the .html extension inside the .htaccess file. See example below:
Options +FollowSymLinks
RewriteEngine On
RewriteCond %{ENV:HTTPS} !=on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.html [NC,L]
</IfModule>