I have a Next.js app that I’ve deployed on Digital Ocean, but I’m running into an issue when trying to access custom paths.

Project Structure:

The project has two separate directories: a backend directory using TypeScript and Express, and a frontend directory using Next.js and its pages router.

Deployment Steps:

Build the Next.js project in the frontend directory.

Copy the out directory from the frontend to the backend’s static directory.

Build the backend project.

Build Steps:

cd ../frontend
npm i
npm run build
cp -r out ../backend/static
cd ../backend 
npm run build

Run Steps:

npm start

Issue: The app deploys successfully, but when I try to directly enter in URLs like https://<DO-URL>/auth/login or refresh browser I get a “CANNOT GET ‘<url-path>'” error. I suspect it’s because the client is sending a GET request to the path, but since the frontend uses Next.js, it might not be configured properly.

Next.js Configuration (next.config.js):

/** @type {import('next').NextConfig} */
const { hostname } = require('os')
const path = require('path')

const nextConfig = {
output: 'export',
images: {
unoptimized: true,
remotePatterns: [
{
protocol: 'http',
hostname: 'localhost',
},
],
},

reactStrictMode: true,
swcMinify: true,
sassOptions: {
includePaths: [path.join(__dirname, 'src/styles')],
},
}

module.exports = nextConfig

Question: How can I fix this issue and ensure that custom paths in my Next.js app work correctly when deployed on Digital Ocean? Is there a way to configure the backend server to handle Next.js routing properly?

Any help or guidance would be greatly appreciated. Thank you

I tried implementing a catch all GET HTTP endpoint in express that tries to resolve path to index.html but this did not work